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第九节课学习笔记
fdisk可添加.删除.转换分区. 创建主分区:n-p-w:扩展分区:n-e:逻辑分区:n-l. SWAP分区专用格式化命令mkswap,专用挂载命令swapon. 磁盘容量配额中,硬限制必须,软限制 ...
- 第七节《Git协议与工作协同》
Git提供了丰富的协议支持,包括:SSH.GIT.HTTPS.FTP.FTPS.RSYNC,这些协议可以分为两类:智能协议和哑协议. <1>智能协议 在会话时使用智能协议,会在会话的两个版 ...
- lua 匹配空白符
lua 支持的所有字符类: . 任意字符%s 空白符 空白字符一般包括空格.换行符\n.制表符\t以及回到行首符\r%p 标点字符%c 控制字符%d 数字%x 十六进制数字%z 代表0的字符% ...
- Yii2 使用 QQ 和 Weibo 第三方登录源码
我们社区在 yii2-authclient 多次升级后,登录异常.一直想寻求一种通用的方法,尽量不重写 OAuth2, BaseOAuth 以及 OAuthToken 类, 所以本次直接在 initU ...
- js/php判断移动端还是PC端
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobi ...
- Eclipse中Java build path的使用
1.Eclipse中,工程属性的Java Build Path的Library标签页下,有如下几个按钮:Add Jars...添加JAR包,是指本Eclipse当前包含的工程中的,在工程列表下选取即可 ...
- POSIX标准 库文件
POSIX标准定义的必须的头文件(26项) 头文件 说明 头文件 说明 <dirent.h> 目录项 <fcntl.h> 文件控制 <fnmatch.h> 文件名匹 ...
- transform、transition、animation 区别
Transform 在部分的test case当中,每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性.而恰恰相反,tra ...
- truffle init 从零开始创建简单DApp项目
下面的部分软件需要FQ.这里默认你已经会***,不懂的可以自己搜索解决. 软件安装 chrome浏览器 下载地址 metamask插件 在谷歌应用商店中搜索metamask ganche(图形版) 下 ...
- 图解Tomcat