当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解VUE前端按钮权限控制

详解VUE前端按钮权限控制

2019年07月21日  | 移动技术网IT编程  | 我要评论

霸爱甜心小公主,傻女不愁嫁,兔年宝宝起名大全

在用户登陆后，根据用户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前端按钮权限控制详解整合，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网