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(); } ...
随机推荐
- 学习笔记TF056:TensorFlow MNIST，数据集、分类、可视化
MNIST(Mixed National Institute of Standards and Technology)http://yann.lecun.com/exdb/mnist/ ,入门级计算机 ...
- 网络操作基础（two）
P106 一.什么是活动目录?活动目录有哪些优点? 二.什么是域.域树.森林? 三.什么是信任?什么是域的方向及传递性? 四.如何管理活动目录的信任与站点? 解答! (一) 1.活动目录:提供了用于存 ...
- c# 实现 HSV 调色板
界面相关核心代码如下: public partial class Form1 : Form { public Form1() { InitializeComponent(); } private vo ...
- gunicorn启动flask项目的坑
问题描述:项目用的是flask框架,在项目上线的时候,服务器上是使用gunicorn来启动项目的.但是上线之后,发现服务成功启动了,也有正确的返回值,但是没有生成日志,而用python来启动服务的时候 ...
- Netty 之 Netty生产级的心跳和重连机制
https://blog.csdn.net/z69183787/article/details/52625095 最近工作比较忙,但闲暇之余还是看了阿里的冯家春(fengjiachun)的github ...
- iOS Simulator 模拟器 与 Android Emulator 仿真器：为什么叫不同的英文名字？（待补充）
iOS Simulator 模拟器 与 Android Emulator 仿真器:为什么叫不同的英文名字?(待补充)
- USD在CentOS7.0操作系统下的安装方法
最近Pixar的开源USD软件很火,官方在Introduce中明确讲到这个软件的设计开发目标是增强艺术家协作,减少不确定因素,最大化资产版本迭代效率,追求更大的承载能力. 当今行业中传统的线性的制作方 ...
- 如何快速开发html5跨平台K12/幼儿交互课件、动画课件、交互游戏
flash交互课件能生动表达教学内容,也深受广大教育工作者的喜爱,但是目前flash课件只能在pc电脑平台上进行展示,随着移动网络的发展,越来越多的课件产品需要移殖到各种移动平台(手机,pad,智能电 ...
- Xshell5 提示要继续使用此程序，您必须应用最新的更新或使用新版本
Xshell5 提示要继续使用此程序,您必须应用最新的更新或使用新版本 目录 问题描述 修改系统时间 安装新版本 下载 安装 回到顶部 问题描述 今天上线一个服务,上完准备看下OPS的发布结果,就 ...
- Metabase研究 开源的数据报表
https://blog.csdn.net/bin330720911/article/details/79273317 https://blog.csdn.net/qq_35902833/articl ...