Vue权限指令控制权限详解

import permission from './permission'
import Vue from 'vue'
Vue.directive('permission', permission)

import store from '@/store'
async function checkPermission(el, binding) {
	const { value } = binding
	const roles = await store.getters && store.getters.permission
	if( value && value instanceof Array) {
		if( value.length > 0) {
			const permissionRoles = value
			const hasPermission = roles.some(role => {
				return permissionRoles.includes(role)
			})
			if(!hasPermission) {
				el.parentnode && el.parentNode.removeChild(el)
			}
		}
	}else {
		throw new Error('需要以数组的形式传角色')
	}
}
export default {
	inserted(el, binding) {
		checkPermission(el, binding)
	},
	update(el, binding) {
		checkPermission(el, binding)
	}
}

import './permission' // 此引入需要在创建Vue实例之前引用

<el-button v-permission="['add']">权限按钮</el-button>

import store from "@/store"
export default {
	methods: {
		controlNode(node) {
			const permission = store.getters.permission
			let result = permission.includes(node)
			return result
		}
	}
}

<template>
<div>
	<el-tabs>
		<el-tab-pane v-if="controlNode('add')"></el-tab-pane>
		<el-tab-pane></el-tab-pane>
	</el-tabs>
</div>
</template>
<script>
import controlNode from "@/permission/controlNode"
export default {
	name: "component",
	mixins: [controlNode]
}
</script>