需求: 当用户登录,或者已经登录状态下刷新和重进web端,除了普通的路由配置(login、UserInfo、home、404等),还需要用户的权限路由,需要根据用户信息拿到当前用户的权限路由,动态添加路由。
问题:在动态添加的路由页面刷新,会造成白屏。
在addRoutes()之后立即访问被添加的路由会白屏,这是因为刷新会重新执行一次addRouters(),然而此时addRoutes()的回调没有执行结束,就立刻访问被添加的路由,因而找不到刚刚被添加的路由所以导致白屏。因此需要从新访问一次路由才行
解决:使用next({ ...to,replace: true})来确保addRoutes()时动态添加的路由已经被完全加载上去。
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
next()
} else {
try {
// get user info
await store.dispatch('user/getInfo')//此次dispatch派发的actions中调用了addRouters
//使用next({ ...to,replace: true})来确保addRoutes()时动态添加的路由已经被完全加载上去
//如果 addRoutes 并未完成,路由守卫会一层一层的执行执行,直到 addRoutes 完成,找到对应的路由
next({ ...to, replace: true })
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})