Vue利用自定义指令实现按钮权限控制
作者：fuGUI
这篇文章主要为大家详细介绍了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>
到此这篇关于Vue利用自定义指令实现按钮权限控制的文章就介绍到这了,更多相关Vue按钮权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！