用户登录后,选择子节点,节点中含有多个菜单,可以根据后台返回的权限数据进行权限控制

在vue上挂载自定义指令方法,根据后台返回权限移除相应节点

import Cookies from "js-cookie";
const hasPermission = {
install(Vue, options) {
// let shishi = Cookies.get("shishi");
Vue.directive('has', { bind(el, binding, vnode) {
// console.log(el,'------------el',binding,'-----------------binding',vnode,'------------vnode');
let permTypes = vnode.context.$route.meta.permTypes;
let shishi = Cookies.get("permTypes");
// console.log(shishi, '-------------------------shishi');
// console.log(binding, '-------------------------binding');
if (!shishi.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}, });
}
}; export default hasPermission;

main.js中

import hasPermission from '@/libs/hasPermission';
Vue.use(hasPermission);

原计划在路由上挂载相应的权限信息

import router from '@/router/index';

// 生成路由节点
util.initRouterNode = function (routers, data) {
// console.log(data); for (var item of data) {
// console.log(item)
let menu = Object.assign({}, item);
// console.log(menu);
// menu.component = import(`@/views/${menu.component}.vue`);
menu.component = lazyLoading(menu.component);
// console.log(menu.component);
if (item.children && item.children.length > 0) {
// console.log('true');
menu.children = [];
util.initRouterNode(menu.children, item.children);
}
let meta = {}; if(item.title=='云主机'){
meta={keepAlive:true,isBack:false}
}else{
meta = {}
} // 给页面添加权限、标题、第三方网页链接
meta.permTypes = menu.permTypes ? menu.permTypes : null;
// console.log(meta.permTypes,'---------------------meta.permTypes-------------------------')
meta.title = menu.title ? menu.title + " - ATOS Cloud 管理平台" : null;
meta.url = menu.url ? menu.url : null;
menu.meta = meta;
routers.push(menu);
}
}; export default util;

后由于闭包问题没解决,无法再路由取得相应权限信息,故将权限内容存放cookie;

(闭包解决思路1.1、事件解绑,重新绑定 2、把binding挂在到元素上,更新数据后更新binding 3、更新父元素--:key="Date.now()"

闭包问题详情见连接 https://www.jb51.net/article/159179.htm

vue的自定义指令控制菜单权限的更多相关文章

  1. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

  2. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  3. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  4. vue 通过自定义指令实现 置顶操作;

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  5. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  6. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  7. Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...

  8. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  9. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

随机推荐

  1. HDU1052Tian Ji -- The Horse Racing

    Tian Ji -- The Horse Racing Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  2. MFC ListControl技巧汇总

    转自:http://hi.baidu.com/qi_xian/blog/item/1971aa22da89ada24723e856.html 以下未经说明,listctrl默认view 风格为repo ...

  3. 【CEOI2002】【Poj 1038】Bugs Integrated, Inc.

    http://poj.org/problem?id=1038 发一下中文题面(今天考试直接被改了): 生记茶餐厅由于受杀人事件的影响,生意日渐冷清,不得不暂时歇业.四喜赋闲在家,整天抱着零食看电视,在 ...

  4. POJ2115 C-Loop

    传送门 这道题是求解不定方程的一道好练习题. 题目描述的很诡异……还说什么k进制,其实就是要求一个数A,每次加C,问到B要加多少次,所有的数对2k取模. 也就是说我们能列出如下方程:A+xC ≡ B ...

  5. Flask中的ThreadLocal本地线程,上下文管理

    先说一下和flask没有关系的: 我们都知道线程是由进程创建出来的,CPU实际执行的也是线程,那么线程其实是没有自己独有的内存空间的,所有的线程共享进程的资源和空间,共享就会有冲突,对于多线程对同一块 ...

  6. Android 属性系统 Property service 设定分析 (转载)

    转自:http://blog.csdn.net/andyhuabing/article/details/7381879 Android 属性系统 Property service 设定分析 在Wind ...

  7. Linux系统下强制踢掉登录用户

    1,利用who命令,找出用户登录的终端代号 who root     pts/0        2017-03-14 22:30 (223.1.1.1) root     pts/1        2 ...

  8. java性能优化读书笔记(1)

    1.采用clone()方式创建对象 java语言里面的所有类都默认继承自java.lang.Object,此类里有一个clone()方法: 拷贝对象返回的是一个新的对象,而不是一个对象的引用地址: 拷 ...

  9. 关于mybatis的xml文件中使用 >= 或者 <= 号报错的解决方案

    当我们需要通过xml格式处理sql语句时,经常会用到< ,<=,>,>=等符号,但是很容易引起xml格式的错误,这样会导致后台将xml字符串转换为xml文档时报错,从而导致程序 ...

  10. iPhone4到iPhone6的设计、制造工艺历程浅析

    这里就阐述一下我对这几个手机在设计和制造工艺上的一些看法. 这 5 个型号概括起来就三个外观: iPhone4 的三明治夹心设计. iPhone5 的三段式铝合金一体成型. iPhone6 的全金属一 ...