详解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 相关文章推荐
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
原生js实现放大镜组件
Jan 22 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实现与ASP Banner组件相似的类
2006/10/09 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
PHP实现递归的三种方法
2020/07/04 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
js获取页面description的方法
2015/05/21 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
React优化子组件render的使用
2019/05/12 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
python实现linux下使用xcopy的方法
2015/06/28 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
前台文员的岗位职责
2013/11/14 职场文书
大门门卫岗位职责
2013/11/30 职场文书
《大海那边》教学反思
2014/04/09 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python