ELADMIN-01 前端路由加载

ELADMIN-01 前端路由加载

1.router.beforeEach(src/router/index.js)

路由的加载主要通过src/router/index.js中的router.beforeEach来实现的。router.beforeEach是Vue Router的全局前置守卫，在路由改变之前被调用，首先会检查token来确认是否已经登录。

• 如果没有登录

  • 如果目标路由在免登录白名单中，那么直接进入目标路由。
  • 否则，重定向到登录页。

• 已经登录

  • 目标路由如果是登录页，则直接跳转到首页next({ path: '/' })

  • 如果目标路由不是登录页

    • 检查用户的角色信息是否已经被拉取。如果没有，那么拉取用户信息，并加载菜单。如果在拉取用户信息时出错，那么登出并重新加载页面。
    • 如果用户已经登录，并且用户的角色信息已经被拉取，但是菜单还没有被加载，那么加载菜单。
    • 如果用户已经登录，并且用户的角色信息和菜单都已经被加载，那么直接进入下一个路由。

2.loadMenus函数(src/router/index.js)

这个函数从后端加载路由数据，然后配置路由，这个函数由路由前置守卫调用

1. 调用buildMenus方法从后端获取路由数据。
2. 然后使用filterAsyncRouter方法来处理路由数据，生成两份路由数据，一份用于侧边栏（sidebarRoutes），一份用于路由器（rewriteRoutes）。
3. 将 rewriteRoutes 保存到 Vuex Store 中，并添加到路由器中。
4. 将 sidebarRoutes 保存到 Vuex Store 中。

3.filterAsyncRouter函数(src/store/modules/permission.js)

函数 filterAsyncRouter 是用来处理后端返回的路由数据，将其转换为 Vue Router 可以识别的路由配置对象。函数接受三个参数：routers，lastRouter 和 type。

1. routers 是后端返回的路由数据，是一个数组，数组中的每个元素都是一个路由对象。
2. lastRouter 是上一级的路由对象，主要用于处理嵌套路由的情况。默认值为 false。
3. type 是一个布尔值，用于决定是否处理子路由。默认值为 false。

函数的主要逻辑如下：

1. 遍历 routers 数组，对每个路由对象进行处理。
2. 如果 type 为 true，并且路由对象有子路由（router.children），那么递归调用 filterChildren 函数处理子路由。
3. 根据路由对象的 component 字段动态加载组件。如果 component 是 ‘Layout’，那么将其替换为 Layout 组件。如果 component 是 ParentView，那么将其替换为ParentView组件。否则，调用 loadView 函数动态加载组件。
4. 如果路由对象有子路由，那么递归调用 filterAsyncRouter 函数处理子路由。否则，删除 children 和 redirect 字段。
5. 最后，返回处理后的路由对象。

这个函数的主要作用是将后端返回的路由数据转换为 Vue Router 可以识别的路由配置对象，以便在前端动态生成路由。

4.filterChildren函数(src/store/modules/permission.js)

这个 filterChildren 函数是用来处理后端返回的子路由数据，将其转换为 Vue Router 可以识别的路由配置对象。函数接受两个参数：childrenMap 和 lastRouter。

• childrenMap 是后端返回的子路由数据，是一个数组，数组中的每个元素都是一个路由对象。
• lastRouter 是上一级的路由对象，主要用于处理嵌套路由的情况。默认值为 false。

函数的主要逻辑如下：

1. 遍历 childrenMap 数组，对每个路由对象进行处理。

2. 如果路由对象有子路由，并且其组件是 'ParentView'，那么遍历其子路由，对每个子路由进行处理。处理方式是将子路由的 path 设置为父路由的 path 加上子路由的 path。如果子路由还有子路由，那么递归调用 filterChildren 函数处理子路由。否则，将子路由添加到 children 数组中。

3. 如果路由对象没有子路由或者其组件不是 'ParentView'，那么检查是否有上一级路由。如果有，那么将路由对象的 path 设置为上一级路由的 path 加上路由对象的 path。然后，将路由对象添加到 children 数组中。

4. 最后，返回处理后的 children 数组。

这个函数的主要作用是将后端返回的子路由数据转换为 Vue Router 可以识别的路由配置对象，以便在前端动态生成路由。

参考

Vue Router 实现动态路由和常见问题解决方案