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

Jacob程序员

已于 2024-01-19 11:03:55 修改

阅读量420

点赞数 10

文章标签： vue node.js webstorm

于 2023-12-20 16:08:42 首次发布

本文链接：https://blog.csdn.net/weixin_45609702/article/details/135110207

版权

项目场景：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})
    })

关注