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

需求: 当用户登录,或者已经登录状态下刷新和重进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()时动态添加的路由已经被完全加载上去。

你可能感兴趣的:(Vue动态权限路由addRoutes执行初次白屏解决方法。)