VUE自定义封装权限指令

• 说明：在一般的后台管理项目中都需要权限管理，有一些权限管理可以通过动态路由进行实现，但是还有一些权限管理是需要我们对页面的按钮或者其他元素进行限制，这时候就用到了权限指令。

自定义指令介绍

注册方法

Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数说明

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

好了，基础说完了我们来看看权限指令到底该如何封装

权限指令的封装

// 在permission.js 中
import store from './store'

/**
 * 判断当前用户是否拥有某项权限权限
 * @param {*} key 权限名称
 */
function checkArray (key) {
  const roles = store.getters.user.resoucesFlagList // 获取用户的全部权限
  const index = roles.indexOf(key)
  if (index > -1) {
    return true
  } else {
    return false
  }
}

/**
 * Action 权限指令
 * 指令用法：
 *  - 在需要控制 action 级别权限的组件上使用 v-action:[method]
 *  - 说明：[method] 为当前资源的权限标识
 *  - 例如：
 *    <el-button v-action:addUser >添加用户</el-button>
 *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
 */
const action = Vue.directive('action', {
  inserted (el, binding) {
    const actionName = binding.arg // 得到 v-action传递过来的值
    if (actionName) {
     // 判断当前用户是否拥有该权限，每个项目业务不同，判断用户是否拥有权限的方法也不同，
     // 我司采用的是将用户拥有的所有权限保存在vuex中，在使用权限指令时把元素所需要的权限传递过来，
    // 然后在vuex中查找用户是否拥有该权限，如果有就显示该元素，否则移除该元素
      const hasPermission = checkArray(actionName)
      if (!hasPermission) { // 没有权限
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  }
})

export { action }
// 最后再在Vue项目的入口文件main.js中导入permission.js