Vue2动态路由+鉴权+异步请求

项目场景：Vue2动态路由+鉴权+异步请求

动态路由+鉴权：

项目场景：在用户登录到系统中的时候，去服务器校验获取令牌，同时返回相关的数据，此时请求速度慢于组件的渲染速度，会产生异步，页面404或者空白。

---

问题描述

异步函数

请求登录接口Api数据没响应回来，系统就读取数据，此时为空。
主要思路是：
①登录鉴权，获取令牌和数据存储到VueX中（Store）
②在首页挂载的时候读取store里面的数据 渲染页面
在②的时候读取不到，而是在②执行完成后，才把值set到store里。

因为系统集成比较多，没有登录界面但是也需要鉴权，就没有把getUserInfo分离

全局前置守卫 中接收数据代码：

store.dispatch('login', userId).then(() => {
      console.log("router")
      loadingInstance.close()
      next({replace: true})
    })

---

原因分析：

异步请求函数

组件的渲染速度很快，接口响应速度慢于渲染速度，产生异步导致不能及时第一时间获取数据和令牌

---

解决方案：

使用关键字async await 告诉js引擎这是一个异步请求，等待api的响应结果

store.dispatch('login', userId).then(async () => {
      console.log("router")
      loadingInstance.close()
      await next({replace: true})
    })