详解VUE前端按钮权限控制
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了VUE前端按钮权限控制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
在用户登陆后，根据用户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前端按钮权限控制详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
上一篇：vue组件间的参数传递实例详解
下一篇：微信小程序开发之点击按钮退出小程序的实现方