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[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>