详解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生产批量批处理执行命令
Jul 28 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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数据库操作方法(MYSQL版)
2011/06/08 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
jQuery 位置插件
2008/12/25 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python开发之str.format()用法实例分析
2016/02/22 Python
python常用函数详解
2016/09/13 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Django权限设置及验证方式
2020/05/13 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
python飞机大战游戏实例讲解
2020/12/04 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
升学宴演讲稿
2014/09/01 职场文书
民用住房租房协议书
2014/10/29 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
婚宴新郎致辞
2015/07/28 职场文书
学习党章心得体会2016
2016/01/15 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python