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(); } ...
随机推荐
- 汇编实验一 查看CPU和内存，用机器指令和汇编语言指令编程
在装完DosBox环境之后,就可以用debug模式进行汇编指令的编程了. 实验内容: 首先用a指令进行数据的储存,然后用t命令进行调试. 可以发现ax,bx在不同的命令下发生了改变,cs的地 ...
- 【分布式锁】redis实现
转载:https://www.jianshu.com/p/c970cc710SETNX命令简介 SETNX key value 将key的值设为value,并且仅当key不存在. 若给定的key已经存 ...
- C++——list中erase和remove的区别
1.之前在做相关的操作的时候,涉及到清除list相关的元素,因此会用到erase和remove,那么二者有什么区别呢? 从官方文档中,我们可以获取以下信息 erase : 说明:Removes fro ...
- Windows batch file
Echo off @ECHO OFF echo string to generate the output create a blank line echo . create a file echo ...
- GRE配置教程——华为设备
GRE隧道是通过隧道两端的Tunnel接口建立的,所以需要在隧道两端的设备上分别配置Tunnel接口.对于GRE的Tunnel接口,需要指定其协议类型为GRE.源地址或源接口.目的地址和Tunnel接 ...
- lnmp环境 swoole聊天室
pecl install swoole 安装php扩展swooleservice php-fpm restart 重启php服务whereis php.ini 查看php.ini的位置 查看文件是否配 ...
- Java Swing 界面中文乱码问题解决（Idea环境）
编译(build)的时候和运行的时候使用同样的字符集就可以了.这里,我都设置为“UTF-8”.具体做当如下: File->Settings->Build...->Compiler,在 ...
- Android Studio Gradle依赖冲突
版本冲突 Gradle提供了两种解决版本冲突的策略:Newest和Fail.默认策略是Newest,配置Fail模式: configurations.all { resolutionStrategy. ...
- android全屏／沉浸式状态栏下，各种键盘挡住输入框解决办法
https://blog.csdn.net/smileiam/article/details/69055963
- vue 路由参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...