详解VUE前端按钮权限控制
更新时间：2019年04月26日 11:58:18 作者：水田如雅
这篇文章主要介绍了VUE前端按钮权限控制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在用户登陆后，根据用户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前端按钮权限控制详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在Vue.js中,计算属性（computed properties）是组件的重要组成部分,它们根据组件的数据自动计算新的值,并在数据变化时自动更新,本文将深入探讨如何在Vue.js中监听计算属性的变化,帮助你更好地理解Vue.js的响应式系统,需要的朋友可以参考下2025-03-03
vue跳转时根据url锚点(#xxx)实现页面内容定位的方法
本前端仔在做页面跳转的时候,被要求跳转到页面时候,把对应部分的内容自动滚动到顶部,我一开始想到的就是根据锚点<a href="#xxid">进行处理,但是发现不太好实现,于是便自己研究了一个比较取巧的方法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue项目如何部署到Tomcat服务器上,Vue中自带webpack,可以通过一行命令将项目打包,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了vue 简单自动补全的输入框的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本篇文章主要介绍了浅谈vue+webpack项目调试方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
SSE是围绕只读Comet交互推出的API或者模式,SSE 支持短轮询、长轮询和HTTP 流,而且能在断开连接时自动确定何时重新连接,本文重点给大家介绍2023-10-10
这篇文章主要介绍了vue3+ts+MicroApp实战教程,分别在主应用项目(main)和子应用(childrenOne,childrenTwo)项目中安装microApp，本文给大家详细讲解，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了理解Vue2.x和Vue3.x的自定义指令的用法及钩子函数原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2021-09-09
第一次在Vue中完整使用AJAX请求和axios.js的实战记录
AJAX是现代Web开发的一个关键部分,尽管它一开始看起来令人生畏,但在你的武库中拥有它是必须的,下面这篇文章主要给大家介绍了关于第一次在Vue中完整使用AJAX请求和axios.js的相关资料,需要的朋友可以参考下2022-11-11
这篇文章介绍了vue使用脚手架vue-cli创建并引入自定义组件的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
最新评论