详解VUE前端按钮权限控制


Posted in Javascript onApril 26, 2019

在用户登陆后,根据用户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前端按钮权限控制详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
vue构建单页面应用实战
Apr 10 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 #Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 #Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 #Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 #Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 #Javascript
js验证身份证号码记录的方法
Apr 26 #Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 #Javascript
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
js 目录列举函数
2008/11/06 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
文明风采获奖感言
2014/02/18 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
初中美术教学反思
2016/02/17 职场文书