在日常的开发过程中，我们除了使用Vue已有的指令之外，还需自定义指令，需要对DOM节点进一步操作。
在后台系统中，最常用的就是权限指令。
权限控制的原理就是在系统当前界面初始化时，判断某些DOM节点有没有权限，没有则移除此DOM。
在Vue中使用指令权限时，通常有两种控制节点的方法。第一个是对普通节点的指令控制（普通节点即是指 html 中的标签节点。），第二个则是对elementUI组件的控制。
为什么分两种呢？是因为在实际开发过程中，我发现自定义指令有时候无法移除element中的组件，例如：在使用el-tab时，下面包含了多个tab页，当某个tab页无权限访问时 想要对其进行移除，这时候自定义的指令只能移除此tab页内的内容，并不能够将此tab页一起移除。所以这时候会使用v-if进行控制。
第一种：自定义权限指令
我的写法是新建permission文件夹，此文件夹下面包含index.js、permission.js，接下来直接上代码：
index.js
import permission from './permission'
import Vue from 'vue'
Vue.directive('permission', permission)
permission.js
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)
}
}
在这里面需要解释的是权限列表的获取，我的权限列表是存储在store的permission中，所以在进入的时候直接获取permission。
最重要的一步，需要将index.js引入到main.js中去执行。
main.js
import './permission' // 此引入需要在创建Vue实例之前引用
用法：
<el-button v-permission="['add']">权限按钮</el-button>
第二种：v-if自定义控制
如果使用第一种方式的话，其是移除当前DOM下的子节点，是没办法移除当前节点的。所以这时候就需要通过自定义的v-if来控制。
思路：v-if中执行一个函数，函数传入一个权限值。在函数中判断权限值是否属于权限菜单内，返回布尔类型值。
这时我们想到，如果要定义一个函数在任何组件中都可以使用，那么要么是工具类函数，要么是mixins。如果是封装工具类函数，则没办法直接在模板中使用，而是需要在methods中使用，所以我们直接选择mixins，混入方法。
我们创建控制节点的文件controlNode.js
import store from "@/store"
export default {
methods: {
controlNode(node) {
const permission = store.getters.permission
let result = permission.includes(node)
return result
}
}
}
用法：
在组件中使用mixins
<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>
最后说明
为什么控制节点权限要分两种情况？同样都是移除节点，为什么还要用v-if？
如果你仔细观察代码，在第一种方式中，我们移除的是 child，是将当前节点的子元素进行移除，此时当前节点依然存在。所以就出现了所分的两种情况。
那有没有办法用自定义的指令就可以完成移除呢？那当然是有的，在第一种方式中，只需要将removeChild改为remove即可。即将移除子元素改为移除当前节点本身。
