vue 前端权限设计
数据结构设计页面展示
自定义权限指令 Vue.directive('aoth', {
inserted: function(el, binding, vnode) {
const actionName = binding.value + "";
const limits = store.getters.limits; // ["1-1-1", "1-3-1", "2", "2-1", "2-2", "2-3", "2-1-1", "2-1-2", "2-2-1", "2-2-2", "2-3-1", "2-3-2"]
let arr = [];
if (actionName) {
arr = actionName.split("-")
if (arr.length == 3) {
// 是按钮级别
if (limits.indexOf(actionName) == -1) {
el.remove()
}
}
if (arr.length == 2) {
// 是菜单级别
let flag = false;
limits.forEach((item) => {
let itemArr = item.split("-");
if (arr == itemArr && arr == itemArr) {
flag = true
}
})
if (!flag) {
el.remove()
}
}
if (arr.length == 1) {
// 是模块级别
let flag = false;
limits.forEach((item) => {
let itemArr = item.split("-");
if (arr == itemArr) {
flag = true
}
})
if (!flag) {
el.remove()
}
}
}
}
})
用法 <Button v-aoth="1-1-2" type="primary">新增</Button>
页:
[1]