VUE前端按钮权限控制
来源:互联网 发布:同花顺炒股软件使用 编辑:程序博客网 时间:2024/05/11 15:05
在用户登陆后,根据用户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>
阅读全文
0 0
- VUE前端按钮权限控制
- 如何用 Vue 实现前端权限控制
- 信息系统按钮权限控制
- 窗体按钮权限控制
- guns shiro按钮权限控制
- 基于Vue实现后台系统权限控制
- 基于Vue实现后台系统权限控制
- 前端页面控制按钮可用时间
- SSH权限管理控制到按钮
- springmvc 按钮级别的权限控制
- springMVC+velocity做权限控制 控制到按钮!
- 爬坑日记--------vue的权限控制(vuex)
- JSP自定义标签实现按钮级权限控制
- Spring MVC+FreeMarker实现页面按钮权限控制1
- Spring MVC+FreeMarker实现页面按钮权限控制
- java自定义标签(改造spring security配合控制按钮权限)
- angular实现列表按钮的权限控制(ng-if)
- 使用angular 实现简单 用户-角色-菜单-按钮权限控制
- QT程序、图标
- 详解Javascript中prototype属性(推荐)
- 使用HtmlAgilityPack解析html
- bzoj3295 [Cqoi2011]动态逆序对(CDQ分治)
- cf 600人 bit+大量stl乱搞
- VUE前端按钮权限控制
- 数据结构—期末总结
- 关于单例模式的N种实现方式
- 他丢了一亿多美元,被20吨的垃圾山压着……
- Codeforces 900D-Unusual Sequences
- 【笔记-C语言】 函数
- css的学习
- VTK 多平面重建(MPR)及三维切片显示
- 朴素贝叶斯算法与贝叶斯估计