数据结构设计

页面展示

自定义权限指令

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[0] == itemArr[0] && arr[1] == itemArr[1]) {
                        flag = true
                    }
                })
                if (!flag) {
                    el.remove()
                }
            }
            if (arr.length == 1) {
                // 是模块级别
                let flag = false;
                limits.forEach((item) => {
                    let itemArr = item.split("-");
                    if (arr[0] == itemArr[0]) {
                        flag = true
                    }
                })
                if (!flag) {
                    el.remove()
                }
            }
        }
    }
})
复制代码

用法

<Button v-aoth="1-1-2" type="primary">新增</Button>
复制代码