VUE 动态注入路由白屏，再次刷新才显示页面问题

问题描述：
   由于系统需要动态注入路由，刚开始在路由拦截里面根据账号权限动态获取路由，然后注入到本地路由中，代码如下：
 

// 尝试获取本地 store 用户信息中权限字段
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
  next()
} else {
  try {
    // 用token换取用户信息
    store.dispatch('user/getInfo').then(roles => {
      if (!roles) new Error('roles error!')
      // 根据获取的用户权限映射对应的路由信息
      store.dispatch('permission/generateRoutes', roles).then(accessRoutes => {
        if (!accessRoutes) new Error('accessRoutes error!')
        // 动态加入路由
        router.addRoutes(accessRoutes)
        // 确保路由完整性，设置replace 为true 这样导航就不会留下历史记录。
        next({
          ...to,
          replace: true
        })
      })
    })
  } catch (error) {
    // 删除本地token 并且重新登陆
    await store.dispatch('user/resetToken')
    Message.error(error || 'Has Error')
    next(`/login?redirect=${to.path}`)
    NProgress.done()
  }
}

这样写只有在登陆之后刷新页面才会动态注入，解决办法就是在登陆之后执行一下 红色字体部分代码