vue按钮级权限控制
学习记录
1.创建 .js文件
import Vue from 'vue'
// 按钮级别权限 -- 比对元素 元素绑定角色值<<-->>登录获取值
// 元素绑定角色值 →_→ 接收 字符串 或 数组
// 登录获取值 →_→ 接收 字符串
// 执行指令 元素插入时 获取 元素指令角色 与原型对比 执行下方 Vue.prototype.$_has
/** 权限指令**/
let has = Vue.directive('has', {
inserted: function (el, binding) { // 注意使用inserted周期,不要使用 bind 不然无法删除元素
let className = binding.value.class // v-has 接收数组对象
if (el.parentNode && !Vue.prototype.$_has(className)) { // 检查
el.parentNode.removeChild(el)
}
}
})
// 元素指令值与角色值对比 如果不匹配 返回false
// 权限检查
Vue.prototype.$_has = function (val) {
let isShow = false
let btnPermissions = sessionStorage.getItem('btnPermissions')
if (btnPermissions === undefined || btnPermissions == null) {
return false
}
if (typeof (val) === 'string') {
if (val === btnPermissions) {
isShow = true
}
return isShow
} else {
for (let i = 0; i < val.length; i++) {
const showIs = val[i]
if (showIs === btnPermissions) {
isShow = true
}
}
return isShow
}
}
export { has }
暴露方法 export { has } 时,注意要与顶部指令变量对应
2. 在main.js中引入当前文件
注意加 { } 接收
// 按钮级别权限
// eslint-disable-next-line no-unused-vars
import { has } from './router/btnPermissions'
3. 视图层
vue指令使用对象接收
<el-button type="primary" v-has="{class:'supper'}">1</el-button>
<el-button type="primary" v-has="{class:['supper','user']}">2</el-button>