前端tipsvue前端开发那些事儿

Vue动态权限路由addRoutes执行初次白屏解决方法。

2021-03-08  本文已影响0人  萘小蒽

需求: 当用户登录,或者已经登录状态下刷新和重进web端,除了普通的路由配置(login、UserInfo、home、404等),还需要用户的权限路由,需要根据用户信息拿到当前用户的权限路由,动态添加路由。
问题:

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()时动态添加的路由已经被完全加载上去。

上一篇下一篇

猜你喜欢

热点阅读