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
}
}
}
}
项目中在表格中使用到了这个方法,用来判断是否显示表格的最后一列的操作列