详解VUE前端按钮权限控制

作者: 瓦尔瓦拉_瓦西里耶夫娜
来源: 51数据库
2021-08-25

在用户登陆后，根据用户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){
     isexist=true;
     break;
    }
   }
   return isexist;
  };

页面上使用方式：

<el-button type="primary" class="btns first" @click="querylist" v-has="'sys_user_list'">查询</el-button>
     <el-button class="btns" @click="showaddview" v-has="'sys_user_save'">新增</el-button>
     <el-button class="btns" @click="modifyuseritem" v-has="'sys_user_update'">修改</el-button>
     <el-button class="btns" @click="delitem" v-has="'sys_user_delete'">删除</el-button>

以上所述是小编给大家介绍的vue前端按钮权限控制详解整合，希望对大家有所帮助

推荐阅读