动态路由（前端/后端控制）

Bertha 。 2023-01-19 03:10 33阅读 0赞

## 动态路由 ##

后台管理系统，大部分都会涉及到权限控制这一项需求，即：根据不同登录角色渲染不同页面功能

现在主流有两种方式：

1.  前端控制
    
    逻辑简单，上手快
2.  后端控制
    
    相对安全，需要后期改动

## 后端控制 ##

后端路由时大部分后台管理项目的解决方案

核心：用户登录以后，后端根据该角色生成可访问的路由数据，前端根据这个路由数据转换成自己需要的路由结构

具体代码结构：

1.  router 文件中，只放一些静态路由和公共路由
    
    代码参考：[https://github.com/PanJiaChen/vue-element-admin/blob/master/src/router/index.js][https_github.com_PanJiaChen_vue-element-admin_blob_master_src_router_index.js]
2.  在 vuex 中写一个 state，把路由和获取到的角色进行匹配，控制菜单栏的显示隐藏
    
        import {  constantRoutes } from '@/router'
        import {  getRoutes } from '@/api/menu'
        import Layout from '@/layout/index'
        
        // 遍历后台传来的路由字符串，转换为组件对象
        function filterAsyncRoutes(asyncRouterMap) { 
          return asyncRouterMap.filter(route => { 
            if (route.component) { 
              // Layout组件特殊处理
              if (route.component === 'Layout') { 
                route.component = Layout
              } else { 
                route.component = loadView(route.component)
              }
            }
            if (route.children && route.children.length) { 
              route.children = filterAsyncRoutes(route.children)
            }
            return true
          })
        }
        function loadView(view) { 
          // 注意：webpack4动态import不支持变量方式，如下写法是不行的
          // return () => import(`@/views/${view}`)
          return resolve => require([`@/views/${ view}`], resolve)
        }
        
        const permission = { 
          state: { 
            routes: [],
            addRoutes: [],
          },
          mutations: { 
            SET_ROUTES: (state, routes) => { 
              state.addRoutes = routes
              state.routes = constantRoutes.concat(routes)
            },
          },
          actions: { 
            GenerateRoutes({ commit }) { 
              const Id = sessionStorage.getItem('SESSION_KEY')
              return new Promise(resolve => { 
                getRoutes(Id).then(res => { 
                  const accessedRoutes = filterAsyncRoutes(res.data)
                  accessedRoutes.push({  path: '*', redirect: '/404', hidden: true })
                  commit('SET_ROUTES', accessedRoutes)
                  resolve(accessedRoutes)
                })
              })
            },
          },
        }
3.  给后端整理一份前端需要的 router 数据结构
    
    一般必须有的参数：id、path、name、title、children
    
        path: # 路由地址
        name: # 路由名称
        id: # id
        component: # 组件路径
        meta->title: # 菜单名称(和path同级就可以)
        meta->icon: # 菜单图标(和path同级就可以)
        meta->type: # 菜单类型，用于区分模块、目录、菜单、按钮
        meta->hidden: # 是否全局隐藏此菜单
        children: # 子集集合
    
    如果后端传的不是 children，是 parentId 那种类型，则需要写一个转换方法
    
    方法可以参考这篇文章：[Vue 封装无限层级树形菜单组件（后台传的是扁平数组）][Vue]
4.  在导航守卫中，使用 `router.beforeEach` 进行拦截，可以动态添加可访问的路由表（使用 addRoutes 添加）
    
        import NProgress from 'nprogress'
        import 'nprogress/nprogress.css'
        
        NProgress.configure({  showSpinner: false })
        const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
        
        router.beforeEach((to, from, next) => { 
          NProgress.start()
          // 判断是否有token
          if (store.getters.token) { 
            if (to.path === '/login') { 
              next({  path: '/' })
            } else { 
              // 判断当前用户是否已拉取完user_info信息
              if (store.getters.roles.length === 0) { 
                // 获取info信息
                store.dispatch('GetInfo').then(res => { 
                  const roles = res.roles
                  store
                    .dispatch('GenerateRoutes', {  roles })
                    .then(accessRoutes => { 
                      // 动态添加可访问路由表
                      router.addRoutes(accessRoutes)
                      // hack方法 确保addRoutes已完成
                      next({  ...to, replace: true })
                    })
                    .catch(err => { 
                      console.log(err)
                    })
                })
              } else { 
                // 当有用户权限的时候，说明可访问路由表已生成
                next()
              }
            }
          } else { 
            if (whiteList.includes(to.path)) { 
              // 在免登录白名单，直接进入
              next()
            } else { 
              // 否则全部重定向到登录页
              next('/login')
            }
          }
        })
5.  从 router 中取出可用的路由对象，来进行侧边栏的渲染

也可以参考这篇文章：[后端控制路由][Link 1]

## 前端控制 ##

可以参考花裤衩的文章，[手摸手，带你用vue撸后台 系列二(登录权限篇)][vue_]

核心：通过 token 获取用户的 role，根据 role 动态跟路由表 `meta.role` 进行匹配，形成可访问的路由再通过 `router.addRotes` 动态挂载路由

具体代码结构：

*  可以参考：[动态路由前端控制还是后端控制？（附代码）][Link 2]

1.  把动态路由和静态路由分别写在 router 文件中（`asyncRoutes/constantRoutes`）。在动态路由的 meta 元信息中添加 roles 权限
    
    代码参考：[https://github.com/PanJiaChen/vue-element-admin/blob/master/src/router/index.js][https_github.com_PanJiaChen_vue-element-admin_blob_master_src_router_index.js]
2.  在 vuex 中写一个 state，把路由和获取到的角色进行匹配，控制菜单栏的显示隐藏
    
    代码参考：[https://github.com/PanJiaChen/vue-element-admin/blob/master/src/store/modules/permission.js][https_github.com_PanJiaChen_vue-element-admin_blob_master_src_store_modules_permission.js]
3.  在导航守卫中，使用 `router.beforeEach` 进行拦截，可以动态添加可访问的路由表（使用 addRoutes 添加）
    
    [https://github.com/PanJiaChen/vue-element-admin/blob/master/src/permission.js][https_github.com_PanJiaChen_vue-element-admin_blob_master_src_permission.js]
4.  从 router 中取出可用的路由对象，来进行侧边栏的渲染
    
    [https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/Sidebar/index.vue][https_github.com_PanJiaChen_vue-element-admin_blob_master_src_layout_components_Sidebar_index.vue]
    
    [https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/Sidebar/SidebarItem.vue][https_github.com_PanJiaChen_vue-element-admin_blob_master_src_layout_components_Sidebar_SidebarItem.vue]

[https_github.com_PanJiaChen_vue-element-admin_blob_master_src_router_index.js]: https://github.com/PanJiaChen/vue-element-admin/blob/master/src/router/index.js
[Vue]: https://blog.csdn.net/qq_38689395/article/details/116019842?spm=1001.2014.3001.5501
[Link 1]: https://blog.csdn.net/weixin_46923775/article/details/108366807?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-18.control&dist_request_id=1619664910213_44556&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-18.control
[vue_]: https://segmentfault.com/a/1190000009506097
[Link 2]: https://juejin.cn/post/6844904145267195917
[https_github.com_PanJiaChen_vue-element-admin_blob_master_src_store_modules_permission.js]: https://github.com/PanJiaChen/vue-element-admin/blob/master/src/store/modules/permission.js
[https_github.com_PanJiaChen_vue-element-admin_blob_master_src_permission.js]: https://github.com/PanJiaChen/vue-element-admin/blob/master/src/permission.js
[https_github.com_PanJiaChen_vue-element-admin_blob_master_src_layout_components_Sidebar_index.vue]: https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/Sidebar/index.vue
[https_github.com_PanJiaChen_vue-element-admin_blob_master_src_layout_components_Sidebar_SidebarItem.vue]: https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/Sidebar/SidebarItem.vue