详解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_09_Function与Object
Oct 16 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
微信小程序开发之点击按钮退出小程序的实现方法
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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
JS重要知识点小结
2011/11/06 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python用input输入列表的实例代码
2020/02/07 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
设计总监岗位职责
2013/12/07 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
个人批评与自我批评
2014/10/15 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
python如何进行基准测试
2021/04/26 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android