VUE前端按钮权限控制

最新推荐文章于 2024-07-29 11:45:48 发布

水田如雅

最新推荐文章于 2024-07-29 11:45:48 发布

阅读量2.1w

点赞数 8

分类专栏： AngularJs/React/Vue 文章标签：存储前端

本文链接：https://blog.csdn.net/lhc1105/article/details/78807189

版权

AngularJs/React/Vue 专栏收录该内容

10 篇文章 7 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中，如何实现在用户登录后，通过获取用户ID并存储其权限数据到本地storage。接着，利用自定义指令判断用户是否拥有特定按钮的权限，以此决定按钮在页面上是否显示。

摘要由CSDN通过智能技术生成

在用户登陆后，根据用户id读取用户的所有权限数据，放入本地的storage进行存储，之后，定义指令，如果用户含有此按钮权限，则在页面显示出来：

/**权限指令**/
    Vue.directive('has', {
      bind: function(el, binding) {
        if (!Vue.prototype.$_has(binding.value)) {
          el.parentNode.removeChild(el);
        }
      }
    });
    //权限检查方法
    Vue.prototype.$_has = function(value) {
      debugger
      let isExist=false;
      let buttonpermsStr=sessionStorage.getItem("buttenpremissions");
      if(buttonpermsStr==undefined || buttonpermsStr==null){
        return false;
      }
      let buttonperms=JSON.parse(buttonpermsStr);
      for(let i=0;i<buttonperms.length;i++){
        if(buttonperms[i].perms.indexOf(value)>-1