token过期 如何使用refresh_token实现无感刷新页面?

当token过期时,通过refresh_token获取新token,避免用户感知。创建独立axios实例处理401响应,检查store中user的token和refresh_token。若存在则用refresh_token请求新token,更新store及请求数据,确保用户体验流畅。
摘要由CSDN通过智能技术生成

1.token过期根据refresh_token获取新的token 重新获取数据

2.创建一个新的axios实例 【使用request防止再次进入请求拦截和请求响应而进入死循环】

3.根据请求相应的响应值 是不是401 是:说明token过期,然后进行判断store中的 user :{token:'*****',refresh_token:'******'}中的 refresh_token和user对象是否存在 ,如果不存在说明之前没有登录过,直接去登录

4.使用新创建的axios 实例对象 requestFreshToken 发送新的请求 headers中的口令携带的是 refresh_token

5.获取token之后 将值重新赋值给user中的token

6.将user重新存入store中

7.重新获取刚才因为token失效而没有获取的数据 直接使用request 参数 来自error对象中【这里保存了之前token失效的请求数据】

实现代码如下:

import axios from "axios";

import store from "@/store";
import router from "@/router";

import jsonBig from "json-bigint";

import { Toast } from "vant";

// var json = '{ "value" : 9223372036854775807, "v2": 123 }'
// // console.log(JSON.parse(json),777888);
// console.log(jsonBig.parse(json).value.toString(),88888);

const request = axios.create({
  //  所有相应的数据就
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值