详解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 相关文章推荐
js中格式化日期时间型数据函数代码
Nov 08 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
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学习 字符串课件
2008/06/15 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
利用python开发app实战的方法
2019/07/09 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python实现经典排序算法的示例代码
2021/02/07 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
党员个人批评与自我批评
2014/10/14 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
感恩教育观后感
2015/06/17 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
如何写通讯稿
2015/07/22 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
Java实现带图形界面的聊天程序
2022/06/10 Java/Android