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)
这个函数从后端加载路由数据,然后配置路由,这个函数由路由前置守卫调用
- 调用
buildMenus
方法从后端获取路由数据。 - 然后使用
filterAsyncRouter
方法来处理路由数据,生成两份路由数据,一份用于侧边栏(sidebarRoutes),一份用于路由器(rewriteRoutes)。 - 将
rewriteRoutes
保存到 Vuex Store 中,并添加到路由器中。 - 将
sidebarRoutes
保存到 Vuex Store 中。
3.filterAsyncRouter函数(src/store/modules/permission.js)
函数 filterAsyncRouter
是用来处理后端返回的路由数据,将其转换为 Vue Router 可以识别的路由配置对象。函数接受三个参数:routers
,lastRouter
和 type
。
routers
是后端返回的路由数据,是一个数组,数组中的每个元素都是一个路由对象。lastRouter
是上一级的路由对象,主要用于处理嵌套路由的情况。默认值为 false。type
是一个布尔值,用于决定是否处理子路由。默认值为 false。
函数的主要逻辑如下:
- 遍历 routers 数组,对每个路由对象进行处理。
- 如果 type 为 true,并且路由对象有子路由(router.children),那么递归调用
filterChildren
函数处理子路由。 - 根据路由对象的 component 字段动态加载组件。如果 component 是 ‘Layout’,那么将其替换为 Layout 组件。如果 component 是
ParentView
,那么将其替换为ParentView
组件。否则,调用loadView
函数动态加载组件。 - 如果路由对象有子路由,那么递归调用
filterAsyncRouter
函数处理子路由。否则,删除 children 和 redirect 字段。 - 最后,返回处理后的路由对象。
这个函数的主要作用是将后端返回的路由数据转换为 Vue Router 可以识别的路由配置对象,以便在前端动态生成路由。
4.filterChildren函数(src/store/modules/permission.js)
这个 filterChildren
函数是用来处理后端返回的子路由数据,将其转换为 Vue Router 可以识别的路由配置对象。函数接受两个参数:childrenMap
和 lastRouter
。
childrenMap
是后端返回的子路由数据,是一个数组,数组中的每个元素都是一个路由对象。lastRouter
是上一级的路由对象,主要用于处理嵌套路由的情况。默认值为false
。
函数的主要逻辑如下:
-
遍历
childrenMap
数组,对每个路由对象进行处理。 -
如果路由对象有子路由,并且其组件是
'ParentView'
,那么遍历其子路由,对每个子路由进行处理。处理方式是将子路由的path
设置为父路由的path
加上子路由的path
。如果子路由还有子路由,那么递归调用filterChildren
函数处理子路由。否则,将子路由添加到children
数组中。 -
如果路由对象没有子路由或者其组件不是
'ParentView'
,那么检查是否有上一级路由。如果有,那么将路由对象的path
设置为上一级路由的path
加上路由对象的path
。然后,将路由对象添加到children
数组中。 -
最后,返回处理后的
children
数组。
这个函数的主要作用是将后端返回的子路由数据转换为 Vue Router 可以识别的路由配置对象,以便在前端动态生成路由。
参考