2024-06-19 vue前端按钮权限控制隐藏

权限控制描述

如何实现
1、储存权限数据
2、权限判断方法
3、设置vue自定义指令
4、最终代码与效果

很多后台管理系统会用到权限管理，菜单权限比较好控制，按钮权限就复杂一些，本文介绍的就是按钮权限如何控制，用的是vue项目。
权限控制描述
前端需要根据后端传来的权限数据控制是否显示新增、编辑、删除（红框所示部分）功能。

image.png

菜单管理处设置的新增、删除、编辑权限参数如图红框所示部分

image.png

如何实现
1、储存权限数据
首先将权限控制的数据储存到vuex或者sessionstorage中，或者全局变量。
如何获得权限数据并提交到vuex的博文
https://blog.csdn.net/weixin_44849078/article/details/89184039

2、权限判断方法
以新增按钮为例,因为设置的新增菜单权限参数为"line-add"，所以html标签如下，v-has为vue自定义指令，line-add为储存在后台的权限参数

<el-button type="primary" v-has="'line_add'">新增</el-button>

store.getters.getMenuBtnList为储存在vuex中的菜单按钮数据，遍历对比permission字段是否与标签中的自定义参数line_add相等，匹配成功则表明有权限，失败没有权限，返回false。

    function permissionJudge(value) {
      let list = store.getters.getMenuBtnList;
      for (let item of list) {
        if (item.permission === value) {
          return true;
        }
      }
      return false;
    }

3、设置vue自定义指令
注册一个全局自定义指令并监控它

// 注册一个全局自定义指令 `v-has`
Vue.directive('has', {
  // 当被绑定的元素插入到 DOM 中时触发bind钩子
  bind: function (el, binding) {
    if (permissionJudge(binding.value)) {
      el.parentNode.removeChild(el);
    }
  }
});

结果发现报错了，调试后发现el.parentNode为null，所以removeChild方法报错，我猜可能是因为bind钩子触发时父元素还没有生成，所以换成inserted钩子。
inseted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

4、最终代码与效果
使用inserted后成功实现没有权限的按钮隐藏效果，代码如下

Vue.directive('has', {
  inserted: function (el, binding) {
    if (!permissionJudge(binding.value)) {
      el.parentNode.removeChild(el);
    }

    function permissionJudge(value) {
      // 此处store.getters.getMenuBtnList代表vuex中储存的按钮菜单数据
      let list = store.getters.getMenuBtnList;
      for (let item of list) {
        if (item.permission === value) {
          return true;
        }
      }
      return false;
    }
  }
});

<el-button type="primary" v-has="'line_add'">新增</el-button>

image.png