Vue动态权限路由addRoutes执行初次白屏解决方法。
2021-03-08 本文已影响0人
萘小蒽
需求: 当用户登录,或者已经登录状态下刷新和重进web端,除了普通的路由配置(login、UserInfo、home、404等
),还需要用户的权限路由,需要根据用户信息拿到当前用户的权限路由,动态添加路由。
问题:
- 在
addRoutes()
之后第一次访问被添加的路由会白屏,这是因为刚刚addRoutes()
就立刻访问被添加的路由,然而此时addRoutes()
没有执行结束,因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。
router.beforeEach( async (to, from, next) => {
const token = sessionStorage.getItem('access_token')
// 存在 token 说明已经登录
if (token) {
// 登录过就不能访问登录界面,需要中断这一次路由守卫,执行下一次路由守卫,并且下一次守卫的to是主页'
if (to.path === '/login') {
next({ path: '/' })
}
// 保存在store中路由不为空则放行 (如果执行了刷新操作,则 store 里的路由为空,此时需要重新添加路由)
if (Routerobj已存在) {
//放行
next()
} else {
//这里还需要保存Routerobj 防止重复进入这。
await let Router = getAsyncRouterobj() //拿异步Routerobj
router.addRoutes(Router) //需要添加的路由
// 如果 addRoutes 并未完成,路由守卫会一层一层的执行执行,直到 addRoutes 完成,找到对应的路由
next({ ...to, replace: true })
}
} else {
// 未登录时,注意 :在这里也许你的项目不只有 logon 不需要登录 ,register 等其他不需要登录的页面也需要处理
if (to.path !== '/logon') {
next({ path: '/logon' })
} else {
next()
}
}
解决:使用next({ ...to,replace: true
})来确保addRoutes()时动态添加的路由已经被完全加载上去。