vue通过自定义指令实现按钮权限控制

背景:

目前系统里面有一些页面需要根据用户的角色不同,显示不同的按钮,如果用户分配了该按钮权限就展示,否则没有分配权限的按钮就不展示。

实现原理

在 el-button 按钮上设置标签数值,利用 vue 的指令功能获取按钮实例对象和按钮上绑定的标签数值,与从接口拿到的按钮权限数据进行匹配,如果匹配成功,证明用户拥有该按钮的使用权限,如果发现没有使用权限,则在指令处理函数中编写代码移除该按钮,界面上就看不到该按钮了。

实现代码

指令实现:src/directive/hasPermission.js

import store from '@/store'
export default {
 hasPermission: {
// inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
 inserted(el, binding, vnode) {
 const { value } = binding
 const all_permission = "*:*:*";
 const permissions = store.getters && store.getters.permissions
 if (value && value instanceof Array && value.length > 0) {
 const permissionFlag = value
 const hasPermissions = permissions.some(permission => {
 return all_permission === permission || permissionFlag.includes(permission)
 })
 if (!hasPermissions) {
 el.parentNode && el.parentNode.removeChild(el)
 // 或者:el.style.display = 'none'
 }
 } else {
 throw new Error(`请设置操作权限标签值`)
 }
 }
 }
}

指令注册:main.js

// 多个指令的使用
Vue.use((vue) => {
 ((requireContext) => {
 const arr = requireContext.keys().map(requireContext)
 ; (arr || []).forEach((directive) => {
 directive = directive.__esModule && directive.default ? directive.default : directive
 Object.keys(directive).forEach((key) => {
 vue.directive(key, directive[key])
 })
 })
 })(require.context('./directives', false, /^\.\/.*\.js$/))
})

页面使用
在具体的页面,按钮中只需引用v-has-permission指令,赋值判断即可:

<el-button type="primary" v-has-permission="'page1:add'">新增</el-button>
作者:fuGUI原文地址:https://segmentfault.com/a/1190000043825829

%s 个评论

要回复文章请先登录注册