vue---权限指令
时间:2021-07-25
本文章向大家介绍vue---权限指令,主要包括vue---权限指令使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
使用VUE开发项目,在进行权限验证的时候,例如在对某个按钮进行权限验证,验证其显示还是隐藏。解决方法有两种:
第一种:在页面中进行权限验证,使用 v-if 来判断按钮的显示和隐藏。
缺点:
1、具体的验证需要在写在页面上,导致每一个视图页面都需要写,对于后期维护相对比较困难。
2、如果使用 v-if 进行权限验证。在页面中的按钮显示可能存在多个 v-if 进行判断,同时也不利于维护。
第二种:封装公共的权限验证方法来进行验证。
缺点:虽然封装公共权限验证方法,能够更好的维护权限验证规则,但是仍然需要在每个页面进行引入,判断,对于按钮可能也会存在多个 v-if 进行显示和隐藏。
第三种:封装权限指令
优点:能够做到统一验证,而且全局注册指令,可以全局使用指令,相对比较灵活和易于维护。
代码示例:
新建:directive.js
/** * directive * 指令 */ import Vue from 'vue'; Vue.directive('permissions',{ inserted: function(el,bind,vnode){ // 自定义指定中无法使用this获取VUE实例 // vnode绑定在实例上下文 // 所以可以用vnode.context可以解决这个问题 let rule = vnode.context.$store.state.user.permissions; let permissions = rule ? rule.split(',') : []; let state = false; for(let i in permissions){ if(bind.value == permissions[i]){ state = true; break; } } !state ? el.remove() : ''; } });
在main.js中引入
import '@/utils/directive' // directive
在页面中使用:
<el-button v-permissions="'config.add'">新增</el-button>
到此,VUE指令验证权限结束。
原文地址:https://www.cnblogs.com/e0yu/p/15058941.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 实例讲解通过PHP创建数据库
- PHP的mysqli_select_db()函数讲解
- PHP的PDO事务与自动提交
- 使用pytorch实现论文中的unet网络
- Python如何优雅删除字符列表空字符及None元素
- php语法检查的方法总结
- PHP实现浏览器格式化显示XML的方法示例
- Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
- PHP的mysqli_stmt_init()函数讲解
- PHP内置函数生成随机数实例
- PHPStudy下如何为Apache安装SSL证书的方法步骤
- PHP的mysqli_thread_id()函数讲解
- thinkPHP框架中layer.js的封装与使用方法示例
- OpenCV+python实现实时目标检测功能
- 在tensorflow实现直接读取网络的参数(weight and bias)的值