vue3 无痛刷新简单教程

小胡消炎

于 2023-03-14 16:20:38 发布

阅读量609

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/aside_bi/article/details/129523434

本文介绍了在Vue3应用中如何实现无痛刷新，解决令牌过期问题。建议将账号密码存放在不易直接查看的地方，如状态管理。通过在HTTP响应拦截器中设置异步操作，使用await确保任务同步执行，实现令牌的自动更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在进行一些增删改查的操作时客户登录的令牌token过期会跳转到登录页面重新获取令牌token

而无痛刷新的作用就是在客户在进行重要操作时重新调用一次登录接口将过期的token替换

你可以将账号密码存在状态管理里面，或者全局变量，sessionStorage，localStorage中，但是建议将这些账号密码存在客观不能直观发现的地方（状态管理可以指定持久化不用去对账密持久化--->持久化可以在存储中看到）

login(data).then(res => {
    if (200 === res.data.errno) {
      Object.assign(store.logindata,data)//浅拷贝data--->账密存贮在状态管理
       //逻辑代码操作--->等等
      return Promise.resolve(Token)
    }

2.在https.ts文件中的响应拦截器进行拦截操作这里的async是将普通函数转化成异步函数 await是将其转为同步任务并阻塞等待其他执行完了在继续

最低0.47元/天解锁文章

200万优质内容无限畅学