Vue 自定义指令实现权限控制（按钮级）
在用户登陆后，根据用户id读取用户的所有权限数据，放入本地的sessionStorage进行存储（这里我是拿到权限按钮按钮的标识，英文名称。把他们合成一个字符串存储在 btnPowerString 中。），之后，定义指令，如果用户含有此按钮权限，则在页面显示出来：
<body>
<div id="app"> <div style="width: 100px;height: 100px;background-color: pink;" v-has="{role:['editor','admin']}"></div> </div>
</body>
<script type="text/javascript"> Vue.directive('has',{ bind : function(el,binding){ //需要在DOM更新完成以后再执行以下代码，不然通过 el.parentNode 获取不到父节点，因为此时还没有绑定到 Vue.nextTick(function(){
var role = binding.value.role
if(!Vue.prototype.$_has(role)){
el.parentNode.removeChild(el);
}
})
}
}) Vue.prototype.$_has = function(role){ //当前角色可以从cookie中获取
var currentRole = ['editor','reader'] if(Array.isArray(role)){
return currentRole.some(function(ele){
return role.indexOf(ele) >= 0
}) }else{
return currentRole.indexOf(role) >= 0;
}
} var app = new Vue({
el : "#app"
}) </script>
Vue 自定义指令实现权限控制（按钮级）的更多相关文章
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- 基于Vue实现后台系统权限控制
原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue3 自定义指令控制按钮权限
经过1个周的摸索和查阅资料,终于搞定VUE3中自定义指令,实现按钮级别的权限控制.当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(bu ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
随机推荐
- [原] inline operator delete & DLL boundary
很久以前写在百度空间的这篇文章: [百度空间] [原] 全局operator delete重载到DLL 首先,纠正一个词“重载”,operator new/delete是替换(replacement) ...
- Flagr 配置说明
说明文档来自官方文档 https://checkr.github.io/flagr/#/flagr_env 完整配置 包含了组件的配置参数以及说明,对于学习如何使用Flagr 还是很重要的,包含了数据 ...
- Thing in java 第5章，初始化和清理，练习题答案
/** * Created by Sandy.Liu on 2018/7/28. * Thinking in java version 4, chapter 5, practice 2 * Creat ...
- dbca建库--linux上使用vnc图形化安装oracle10g版本
选择创建数据库 配不配置em,自己决定,我们选择配置 配置下面账户密码,在项目中,下面账户肯定是不相同的,我们这里输入相同的,密码为oracle10g 选择文件系统存放(asm和字符设备暂时不能存放) ...
- obs源码uml
- Django学习笔记之安全
CSRF攻击 CSRF攻击概述 CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其他安全 ...
- Java小代码
1. public class test1 {public static void main(String[] args) { Person P = new Person("gdsgds&q ...
- Windows 数字化器类输入设备--笔设备分析（1）（原创）
一.前言: 参考microsoft公司的链接:https://developer.microsoft.com/zh-cn/windows/hardware 将对Windows数字化器类输入设备--笔设 ...
- 【C++】智能指针简单剖析
转自 http://www.cnblogs.com/lanxuezaipiao/p/4132096.html 导读 最近在补看<C++ Primer Plus>第六版,这的确是本好书,其中 ...
- C#中List按特定字段排序
有一个类,如Student,有学号.数学成绩.语文成绩, 存在List列表中,要将List按数学成绩排序,怎么办呢? List<Student> scores=GetScores(); s ...