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()
  }
}

這樣寫只有在登陸之后刷新頁面才會動態注入，解決辦法就是在登陸之后執行一下 紅色字體部分代碼