vue实现按钮权限控制

需求

管理端设置页面浏览权限和按钮使用权限，如果用户没有某个按钮的权限，则隐藏该按钮。

实现原理

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

代码

src/directive/permission/hasPermi.js

import store from '@/store'export default {
// inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。inserted(el, binding, vnode) {const { value } = bindingconst all_permission = "*:*:*";const permissions = store.getters && store.getters.permissionsif (value && value instanceof Array && value.length > 0) {const permissionFlag = valueconst 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(`请设置操作权限标签值`)}}
}

src/directive/index.js

import hasPermi from './permission/hasPermi'const install = function(Vue) {Vue.directive('hasPermi', hasPermi)
}if (window.Vue) {window['hasPermi'] = hasPermiVue.use(install); // eslint-disable-line
}export default install

main.js

import Vue from 'vue'
import directive from './directive' // directive
Vue.use(directive)

权限列表参考：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！