- 配置全局加载进度条和路由拦截;
- 配置免登录白名单;
- 根据用户权限动态生成路由表;
import router from './router'
import store from './store'
import { Message } from 'element-ui'
// 导入NProgress和样式表,用于显示页面加载进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import { isRelogin } from '@/utils/request'
// 配置NProgress,隐藏加载进度条中的旋转器
NProgress.configure({ showSpinner: false })
// 白名单数组,包含不需要登录即可访问的路由路径
const whiteList = ['/login', '/register']
// 在路由守卫中,对每个导航操作进行拦截
router.beforeEach((to, from, next) => {
// 开始显示进度条
NProgress.start()
// 用户已登录(存在令牌)
if (getToken()) {
// 若路由元信息中定义了标题,则设置在Vuex中的的网页标题中
to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
/* has token*/
// 如果用户已登录且正尝试访问登录页面,则重定向到根路径并停止加载进度条
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else if (whiteList.indexOf(to.path) !== -1) {
// 如果用户已登录且正尝试访问白名单中的路由,则允许访问
next()
} else {
// 如果用户已登录但尚未获取到角色信息,则执行以下操作:
if (store.getters.roles.length === 0) {
isRelogin.show = true
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => {
isRelogin.show = false
store.dispatch('GenerateRoutes').then(accessRoutes => {
// 根据roles权限生成可访问的路由表
router.addRoutes(accessRoutes) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})
}).catch(err => {
store.dispatch('LogOut').then(() => {
Message.error(err)
next({ path: '/' })
})
})
} else {
// 如果用户已登录且已获取到角色信息,则允许访问
next()
}
}
} else {
// 没有token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单,直接进入
next()
} else {
// 否则,将用户重定向到登录页面
// 附带当前也没的路径作为重定向参数
next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
NProgress.done()
}
}
})
// 每个路由导航完成后,停止显示加载进度条
router.afterEach(() => {
NProgress.done()
})
store.dispatch('GenerateRoutes').then(accessRoutes => {
// 根据roles权限生成可访问的路由表
router.addRoutes(accessRoutes) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})
这段代码的作用是:
- 调用 Vuex 存储中的 GenerateRoutes action,根据用户的角色信息生成可访问的路由表;
- 使用 router.addRoutes 方法动态地将可访问的路由添加到 Vue Router 实例中;
- 使用 next 函数继续导航到目标路由,并使用 replace: true 选项来替换当前历史记录中的条目。
hack 方法的作用:
在 Vue Router 中,动态添加路由后,需要等待 Vue Router 完成更新路由表的过程,才能继续导航到目标路由。然而,在某些情况下,导航操作可能会在路由表更新完成之前执行,导致导航失败。
为了解决这个问题,使用了这个 "hack" 方法。通过使用 replace: true 选项,导航操作将替换当前历史记录中的条目,而不是添加一个新的条目。这迫使 Vue Router 在继续导航之前完成路由表更新。
因此,这个 "hack" 方法可以确保在动态添加路由后,导航操作能够正确地执行。