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(); } ...
随机推荐
- 我的linux部署nginx步骤记录
http://www.runoob.com/linux/nginx-install-setup.html 安装prce找不到GCC c++文件 解决方法: yum install gcc-c++^C ...
- Linux上使用源代码安装软件
- scp断点续传
linux命令 rsync -P --rsh=ssh homefile.zip root@30.19.103.99:/home/remote.zip 这个命令的含义: -P 断点续传 -rsh ssh ...
- LOJ 2547 「JSOI2018」防御网络——思路+环DP
题目:https://loj.ac/problem/2547 一条树边 cr->v 会被计算 ( n-siz[v] ) * siz[v] 次.一条环边会被计算几次呢?于是去写了斯坦纳树. #in ...
- C++vector针对排序操作练习
目的: 定义5个学生,包含名字和分数,对成员进行从大到小排序,并输出 #include <iostream> #include <cstring> #include <v ...
- SoapUI接口测试-验签值处理-调用java的加密jar包
转载自:https://www.jianshu.com/p/7c672426a165 一. 背景: 调用接口时有个请求参数是对请求入参按一定规则进行加密生成的验签值,每次不同参数的请求生成唯一的验签值 ...
- 将Json数据 填充到 实例类 的函数
/// <summary> /// 将Json数据 填充到 实例类 /// </summary> /// <typeparam name="T"> ...
- Open Source 开发工具集
Open Source 开发工具集 转自:http://www.linuxforum.net原作者:gogoliu(Pooh-Bah) 编辑器: vi:老牌编辑器,在各个unix和unix-like平 ...
- java安装与配置
参考:https://blog.csdn.net/gaokao2011/article/details/75211429 Win 1.JDK JDK 可以到官网下载http://www.oracle. ...
- iOS业务模块化利用CocoaPod入门实践
iOS业务模块化即是通过不同的工程管理不同的业务,通常应用在中大型项目中,这样做的好处主要有:1.多人开发时,防止工程文件冲突 2.能够为下个不同的项目抽取代码,话不多说,直接看步骤:括号内容为本例 ...