Vue 支持自定义指令，具体API说明可以参考下面两个文档：
1. 钩子函数
Vue.directive 提供了几个钩子函数，分别是：
- bind
- inserted
- update
- componentUpdated
- unbind
具体是的说明可以参考钩子函数。
自定义指令控制权限用的是inserted，它表示被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
2. 函数参数
指令的钩子函数会回传3个参数（componentUpdated、unbind是4个）：
- el：指令所绑定的元素，可以用来直接操作 DOM
- binding：一个对象，包含指令的各种属性
- vnode：Vue 编译生成的虚拟节点
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
自定义指令控制权限，需要用到的是el和binding这两个参数，其中binding的属性比较多：
- name：指令名，不包括 v- 前缀，如：v-role="['a', 'b']"中的role
- value：指令的绑定值，如：v-role="['a', 'b']" 中，绑定值为数组['a', 'b']，若v-role="1 + 1"，则绑定值为2
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用
- expression：字符串形式的指令表达式。如：v-role="['a', 'b']"中，表达式为"['a', 'a']"，注意这里是字符串，不是数组
- arg：传给指令的参数，可选。如：v-role:foo 中，参数为 "foo"
- modifiers：一个包含修饰符的对象，如：v-role.foo.bar 中，修饰符对象为 { foo: true, bar: true }
3. 全局指令
Vue的全局指令使用Vue.directive API来定义，自定义权限控制的指令如下：
import Vue from 'vue'
import store from '@/store';
Vue.directive('role', {
inserted: function (el, binding, node) {
const roles = store.getters['user/roles'];
const roleCodeArray = binding.value;
// 如果需要获取TDesign Starter路由定义的权限代码，可以通过meta获取
// const roleCodeArray = vnode.context.$route.meta.roleCodeArray
let exists = false
for (let i = 0; i < roleCodeArray.length; i++) {
if (roles.indexOf(roleCodeArray[i]) !== -1) {
exists = true
break;
}
}
if (!exists) {
el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
}
}
})
注意，需要在main.jsx中导入：
import './permission';
// 导入自定义权限控制指令
import './directives';
4. 权限控制
在vue页面中使用v-role进行权限控制：
<t-link v-rool="['update']" style="margin-right: 10px" hover="color" @click="onEditClick(row.id)">/t-link>
这里是一个数组，可以传多个权限，如果用户没有这个update权限，则不显示该按钮。