ELADMIN-05 v-permission自定义指令实现元素的权限控制

ELADMIN-05 v-permission自定义指令实现元素的权限控制

1 v-permission

v-permission是一个自定义指令，它在src/components/Permission/permission.js文件中定义。这个自定义指令用于控制元素的显示权限。

在permission.js文件中，定义了一个名为permission的对象，这个对象包含了一个inserted方法。这个inserted方法是Vue自定义指令的一个钩子函数，它会在被绑定的元素插入到父节点时被调用。

inserted方法接收两个参数：el和binding。el是被绑定的元素，binding是一个对象，包含了一些关于指令的信息，例如指令的参数、修饰符、绑定值等。

在inserted方法中，首先从binding对象中获取绑定值value，这个值是一个权限标识数组。然后，从Vuex的store中获取用户的角色roles。

接着，检查value是否是一个数组。如果是，就检查数组的长度是否大于0。如果长度大于0，就检查用户的角色是否包含在这个数组中。如果包含，表示用户具有这个权限，元素会显示；如果不包含，表示用户没有这个权限，元素会被移除。

如果value不是一个数组，或者数组的长度不大于0，就抛出一个错误。

在使用v-permission指令时，需要在Vue模板中的元素上添加v-permission属性，并将一个权限标识数组作为值。例如：

<el-button v-permission="['admin', 'editor']">编辑</el-button>

在这个例子中，v-permission指令的值是['admin', 'editor']，表示只有角色为’admin’或’editor’的用户才能看到这个按钮。

在src/main.js文件中，v-permission指令被注册到了Vue中，因此可以在任何Vue组件的模板中使用这个指令。

2 crud中的使用

以src/components/Crud/CRUD.operation.vue这个组件为例，这个组件需要接收的props中定义了permission，并且在默认情况下为一个空对象。

在组件中的新增等按钮中使用v-permission="permission.add"来实现根据用户权限来决定是否显示这个按钮或元素。

所以在使用crud的组件的时候需要定义一个permission对象来传递给crud组件，来决定拥有什么权限的用户才会看到这些按钮，如下是src/views/system/user/index.vue中的使用

上面的例子就是说，当登录的用户具有admin或者user:add权限的时候，才会看到新增按钮…

3 checkPer方法

此外项目中还有另外一种根据用户权限来显示是否显示元素的方法src/utils/permission.js文件定义了一个名为checkPer的方法，并将这个方法添加到了Vue的原型上。这个方法用于检查用户是否具有某个权限。

checkPer方法接收一个权限标识数组作为参数，然后检查用户的角色是否包含在这个数组中。如果包含，返回true，表示用户具有这个权限；否则，返回false，表示用户没有这个权限。

由于checkPer方法被添加到了Vue的原型上，因此在任何Vue组件中都可以通过this.checkPer来调用这个方法。这样，你就可以在Vue组件的模板或脚本中使用this.checkPer方法来检查用户是否具有某个权限。

总的来说，src/utils/permission.js文件的作用是提供一个用于检查用户权限的方法。

export default {
  install(Vue) {
    Vue.prototype.checkPer = (value) => {
      if (value && value instanceof Array && value.length > 0) {
        const roles = store.getters && store.getters.roles
        const permissionRoles = value
        return roles.some(role => {
          return permissionRoles.includes(role)
        })
      } else {
        console.error(`need roles! Like v-permission="['admin','editor']"`)
        return false
      }
    }
  }
}

项目中在表格中使用到了这个方法，用来判断是否显示表格的最后一列的操作列