vue的自定义指令控制菜单权限

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

在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