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