学习记录659@vue使用自定义指令判断按钮权限

关于vue 自定义指令 可查看文章：Vue自定义指令

应用如下：
先定义角色和权限的关系，比如业务员的角色有创建客户按钮的权限，有删除客户按钮的权限，有修改客户按钮的权限，并且给这个权限一个标识，比如创建按钮权限标识为canCreateCustomer，将这些权限存入数据库。

在用户登录系统后，使用vuex将此用户的权限permissions 存到全局环境中。

注册自定义指令v-hasPermission，这指令中需要判断v-hasPermission传过来的值是否包含在permissions中，如果存在，就具有某个权限，这个按钮就显示出来，如果不存在，就把这个按钮删除。

注册

// main.js文件中 注册一个全局自定义指令 `v-hasPermission`
Vue.directive('hasPermission', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters && store.getters.permissions //获取这个客户的所有的权限信息
    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value //传过来的值

	// 判断
      const hasPermissions = permissions.some(permission => {
        return permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el) //如果没有权限，这个按钮不显示
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
})

使用

<div>
    <el-button v-hasPermission="['canCreateCustomer']" type="primary" icon="el-icon-plus" @click="add">{{ '新增' }}</el-button>
</div>