Vue 权限管理

https://juejin.cn/post/6844903478880370701
一、需求明确

// 静态路由，不需要动态权限判断
export const constantRouter = [{
    path: '/',
    component: resolve => require(['@/pages/layout/index.vue'], resolve),
    children: [{
        path: '/',
        name: 'home',
        component: resolve => require(['@/pages/homePage/homePage.vue'], resolve),
        meta: {
            title: '首页'
        }
    }]
}, {
    path: '/login',
    name: 'login',
    component: resolve => require(['@/pages/login/login.vue'], resolve),
    meta: {
        title: '登录'
    }
}]

// 异步路由，需要动态权限判断
export const asyncRouter = [{
    path: '/',
    component: resolve => require(['@/pages/layout/index.vue'], resolve),
    children: [{
        path: '/role',
        name: 'role',
        component: resolve => require(['@/pages/system/role.vue'], resolve),
        meta: {
            title: '角色管理'
        }
    }, {
        path: '/menuManager',
        name: 'menuManager',
        component: resolve => require(['@/pages/system/menuManager.vue'], resolve),
        meta: {
            title: '菜单管理'
        }
    }, {
        path: '/workers',
        name: 'workers',
        component: resolve => require(['@/pages/system/workers.vue'], resolve),
        meta: {
            title: '用户管理'
        }
    }]
}]