我们这个是后台管理模板,动态路由一般是登录系统后,需要动态新增的路由,也就是我们可以在
全局前置守卫
里面,配置动态路由。
- 用户登录成功后,加载动态路由到路由表,如下所示:
// 白名单列表
const whiteList = ['/login']
// 全局前置守卫,路由跳转前执行
router.beforeEach(async (to, from, next) => {
// token存在的情况
if (store.userStore.token) {
if (to.path === '/login') {
next('/home')
} else {
// 登录的时候,只会返回token,用户信息是没有的,在这里初始化登录后的相关信息
if (!store.userStore.user.id) {
try {
// 获取用户信息
await store.userStore.getUserInfoAction()
// 获取用户权限信息
await store.userStore.getAuthorityListAction()
// 获取字典数据
await store.appStore.getDictListAction()
} catch (error) {
// 请求异常,则跳转到登录页
store.userStore?.setToken('')
next('/login')
return Promise.reject(error)
}
// 动态菜单+常量菜单
const menuRoutes = await store.routerStore.getMenuRoutes()
// 获取扁平化路由,将多级路由转换成一级路由,因为Vue缓存最多支持二级路由
const keepAliveRoutes = getKeepAliveRoutes(menuRoutes, [])
// 添加菜单路由
asyncRoutes.children?.push(...keepAliveRoutes)
router.addRoute(asyncRoutes)
// 上面的路由都匹配不到,则会匹配到错误路由
router.addRoute(errorRoute)
next({ ...to, replace: true })
} else {
next()
}
}
} else {
// 没有token的情况下,可以进入白名单
if (whiteList.indexOf(to.path) > -1) {
next()
} else {
next('/login')
}
}
})
// 异步路由,需要全部放在children里面,可以了解一下嵌套路由知识点
const asyncRoutes: RouteRecordRaw = {
path: '/',
component: () => import('../layout/index.vue'),
redirect: '/home',
children: [
{
path: '/home',
name: 'Home',
component: () => import('../views/home.vue'),
meta: {
title: i18n.global.t('router.home'),
affix: true
}
},
{
path: '/profile/password',
name: 'ProfilePassword',
component: () => import('../views/profile/password.vue'),
meta: {
title: i18n.global.t('router.profilePassword'),
cache: true
}
}
]
}
- 上面会把菜单路由信息,动态的添加到路由表里面。