VUE 動態路由實現權限控制

尤其是做一些管理端系統就會有角色權限的情況出現，新公司所有項目都是使用vue實現，研究了下，記錄下來，希望以后能夠繼續優化

首先，新建router文件夾管理所有路由相關代碼：

如上圖，module文件夾內定義好所有路由，並標記好相應的權限信息：

let router = {
    path: '/system',
    redirect: '/system/user',
    meta: { name: '系統管理', icon: 'iconsystem' },
    component: () => import ('@/components/templatePage/routerSlot.vue'),
    children: [
       {
            path: '/system/user',
            meta: { name: '用戶管理', icon: 'iconuser' },
            component: () => import ('@/pages/system/userManage.vue')
        },
        {
            path: '/system/role',
            meta: { name: '權限管理', icon: 'iconRole' },
            component: () => import ('@/pages/system/roleManage.vue')
        },
        .......
    ]
}

export default router

文件命名為system.js，把系統所有模塊如上圖依次定義好，並命名導入到router文件夾下permission.js文件夾內：

// 所有路由
import dashboardMoudule from './moudule/dashboard.js';
import logMoudule from './moudule/log.js';
... 
 5 import systemMoudule from './moudule/system.js';

export let allRouters = [dashboardMoudule, logMoudule, ..., systemMoudule]

export let defaultRoutes = [
   {
        path: '',
        redirect: '/dashboard',
        component: () => import('@/framework/framework.vue'),
        children: [
             {
                 path: '/403',
                 component: () => import('@/pages/auth/pageNotFound.vue')
              }
        ]
    },
    {
        path: '/login',
        component: () => import('@/pages/login.vue'),
    },
    { path: '*',  redirect: '/403' }
];             

 基本上我們已經把整個項目的所有路由都已經放在permission.js文件里定義管理好了，然后我們只需要在這里做一件事就是：

 獲取系統的角色權限，根據路由里meta對象里的屬性值過濾出該角色權限相對應的路由對象，將生成好的路由對象addRoutes動態加載進去

// 獲取角色權限ID數組
let permissionIds = storage.get('permissionIds')
if (permissionIds && permissionIds.length) {
    // 過濾出對應角色權限ID相對應的路由對象
    let permissionRouter = filterRouter(allRouters, permissionIds)
    getRouterMenus(permissionRouter)
}

// 通過遞歸過濾路由（存在多級路由的情況
function filterRouter(allRouters, permissionIds) {
    let permissionRouter = []
    for (let route of allRouters) {
        let tmp = {...route }
        if (tmp.meta && tmp.meta.id) {
            for (let permissionId of permissionIds) {
                if (tmp.meta.id == permissionId) {
                    if (tmp.children) {
                         tmp.children = filterRouter(tmp.children, permissionIds)
                    }
                    permissionRouter.push(tmp)
                }
            }
        }
    }
    return permissionRouter 
}

function getRouterMenus(permissionRouter) {
    // 獲取需要權限的路由，將可訪問的路由表動態添加
    for (let item of permissionRouter) {
        defaultRoutes[0].children.push(item)
    }
    // 動態添加路由
    router.addRoutes(defaultRoutes)
    // 同步路由
    for (let item of defaultRoutes) {
       router.options.routes.push(item) 
    } 
} 
40

 

.......下次有時間繼續寫完