Vue项目权限指令的使用

在项目开发过程中，可能会需要根据用户权限去显示、隐藏或禁用某个元素。这时候，通过在多个页面上使用disabled或v-if等方式会比较繁琐。

我们可以通过添加vue指令，在元素上绑定去实现权限控制的效果。

**以下是我个人实现的步骤：**

1.先在utils文件夹中创建permission.js文件

2.引入Vue和store模块

// permission.js

import store from '@/store'
import Vue from 'vue'

3.判断需要多个标识还是单个标识来判断权限，这里是单个标识

// permission.js

Vue.directive('permission', function (el, binding, vnode) {
  // binding即为传入的权限标识
  const { value } = binding
  let permissions = []
  let hasPermission = false
  // 先从vuex中取出当前用户的所有权限
  if (store.getters) {
    permissions = store.getters.permissions ? store.getters.permissions : []
  }
  // 判断是否拥有改权限
  if (value) {
    hasPermission = permissions.some(perm => {
      return perm === value
    })
  } else {
    hasPermission = true
  }
  // 超级管理员始终拥有权限
  if (store.getters.userInfo.superAdmin) {
    hasPermission = true
  }
  // 如果没有权限，则将该元素从dom中移除
  if (!hasPermission) {
    el.parentNode && el.parentNode.removeChild(el)
  }
})

4.有些情况下，如v-for循环，也需要添加权限指令，当传入数据改变时，权限指令会出现生效不匹配的现象，这时候需要给v-for中的:key传参绑定唯一值，并且使用第二种隐藏方式

第一种
  // 如果没有权限，则将该元素从dom中移除
  if (!hasPermission) {
    el.parentNode && el.parentNode.removeChild(el)
  }
第二种
  // 如果没有权限，则将该元素隐藏
  if (!hasPermission) {
    el.style.display = 'none'
  }

5.使用方式示例

// 在main.js中引入
import '@/utils/permission.js'

// 在vue页面中使用
<div v-permission="'mdm.role.add'" class="addRole" @click="add">
  <el-icon class="el-icon-plus"></el-icon>新建角色
</div>