在用户登陆后，根据用户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 自定义指令实现权限控制（按钮级）的更多相关文章

  1. Vue | 自定义指令和动态路由实现权限控制

    功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...

  2. 基于Vue实现后台系统权限控制

    原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...

  3. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  4. vue3 自定义指令控制按钮权限

    经过1个周的摸索和查阅资料,终于搞定VUE3中自定义指令,实现按钮级别的权限控制.当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(bu ...

  5. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

  6. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

  7. 每个人都能实现的vue自定义指令

    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...

  8. vue 自定义指令（directive）实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  9. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

随机推荐

  1. 使用Pandas将多个数据表合一

    使用Pandas将多个数据表合一 将多张数据表合为一张表,便于统计分析,进行这一操作的前提为这多张数据表互相之间有关联信息,或者有相同的列. import pandas as pd unames = ...

  2. 如何一步一步新建一个Owin项目

    打开VS2015,新建Web应用程序,命名为OwinWeb(名字随意). 在弹出的“新建ASP.NET项目”窗口中选择“Empty”模板,“为以下项添加文件夹和核心引用”处全不选.点击确定. 创建完后 ...

  3. Android OkHttp Get请求方式

    1.导入okhttp-2.7.5.jar和okio-1.11.0.jar 2.Get请求 public void getDataByGet(){ OkHttpClient client = new O ...

  4. MySQL中InnoDB锁不住表的原因

    MySQL中InnoDB锁不住表是因为如下两个参数的设置: mysql> show variables like '%timeout%'; +-------------------------- ...

  5. 辨析字节序（Endianness）

    字节序(Endianness, Byte Order)指的是对于一个多字节数值,当在内存中存储该值或者在链路中传输该值时,其值所包含的多个字节的排列顺序. 在计算机科学中,一般存在两种字节序,大端字节 ...

  6. 判断文件是否存在，不要用if exist和if not exist，因为他们会受到文件是否隐藏的影响，改用dir /a 命令代替

    @echo off & setlocal enabledelayedexpansionrem 判断文件是否存在,不要用if exist和if not exist,因为他们会受到文件是否隐藏的影 ...

  7. LAB1 partI

    序言 1. master.go 可以正常调用Distributed() 和 Sequential(). Sequential 顺序执行主要用于调试. 2. master : 创建一个 RPC serv ...

  8. MFC 编辑框输入16进制字符串转换为16进制数或者10进制数据计算

    1.编辑框添加变量,并选择变量类型为CString. 2.  使用“_tcstoul”函数将Cstring 类型转换为16进制/10进制数进行计算.

  9. 20175236 2018-2019-2 《Java程序设计》第六周学习总结

    教材学习内容总结 第七章 try :用于监听.将要被监听的代码(可能抛出异常的代码)放在try语句块之内,当try语句块内发生异常时,异常就被抛出. catch:用于捕获异常.catch用来捕获try ...

  10. note 9 列表、时间复杂度、排序

    列表 List +内建(built-in)数据结构(data structure),用来存储一系列元素(items) 如:lst = [5.4,'hello',2] 前向索引.后向索引.切片.拼接.成 ...