Vue：TDesign Starter 自定义指令控制权限

Vue 支持自定义指令，具体API说明可以参考下面两个文档：

• Vue.directive( id, [definition] )
• Vue 自定义指令

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 中，修饰符对象为

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权限，则不显示该按钮。