2019-10-25 vue前端按钮权限控制隐藏

2019-10-25  本文已影响0人  半眼鱼

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
上一篇下一篇

猜你喜欢

热点阅读