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

 

.......下次有时间继续写完