基础路由和动态路由

路由文件：src/router/routes/index.js，这个文件里包含基础路由basicRoutes和动态路由asyncRoutes，basicRoutes无需权限，总会注册到最终路由中，asyncRoutes来源与模块路由，存放在src/router/routes/modules，会根据当前登录角色的来判断过滤再注册到最终路由中，如以下用户模块的路由只有当登录角色为admin时才会被注册

  1. // src/router/routes/modules/user.js
  2. import Layout from '@/layout/index.vue'
  4. export default [
  5.   {
  6.     name: 'USER_MANAGER',
  7.     path: '/user',
  8.     component: Layout,
  9.     redirect: '/user/management',
  10.     meta: {
  11.       title: '用户中心',
  12.       role: ['admin'],
  13.     },
  14.     children: [
  15.       {
  16.         name: 'USER',
  17.         path: 'management',
  18.         component: () => import('@/views/user/index.vue'),
  19.         meta: {
  20.           title: '用户管理',
  21.           role: ['admin'],
  22.         },
  23.       },
  24.       {
  25.         name: 'PERMISSION',
  26.         path: 'permission',
  27.         component: () => import('@/views/user/UserPermission.vue'),
  28.         meta: {
  29.           title: '权限管理',
  30.           role: ['admin'],
  31.         },
  32.       },
  33.     ],
  34.   },
  35. ]

路由守卫，权限控制

此项目采用的是前端角色权限，即根据登录角色来判断过滤路由，将没有权限的路由剔除，从而实现权限的控制

实现

具体实现请看代码src/router/guard/permissionGuard.js

菜单

默认有权限的路由都会展示到左侧的菜单中，如无需展示，添加isHidden = true 即可隐藏，如下

  1. {
  2.   name: '404',
  3.   path: '/404',
  4.   component: () => import('@/views/error-page/404.vue'),
  5.   isHidden: true,
  6. }