-
实现思路
- 首次登录前端通过接口获取到两个 token;分别是 accessToken、refreshToken;
- accessToken:正常请求需要传递的 token ;
- refreshToken:当某个请求 401 ,就可以通过 refreshToken 获取到新的 accessToken
- 特殊场景:如果 refreshToken 也过期了 ,那就默认跳回 登录页,重新登录,就类似 七天免登录的场景、过了 第七天,refreshToken 也就过期了;
-
代码
1.javascriptimport axios from "axios"; import { refreshToken } from "../api/index"; //刷新token的api let isRefreshToken = false; //是否正在进行刷新token let requestList = []; // 请求队列 const request = axios.create({ baseURL: "/api", timeout: 10000, }); // 请求拦截器 request.interceptors.request.use( (config) => { let headerToken = localStorage.getItem("acc_token"); // 设置请求头 config.headers.Authorization = `Bearer ${headerToken}`; return config; }, (error) => { // 请求错误时做些事 return Promise.reject(error); } ); // 响应拦截器 request.interceptors.response.use( async (response) => { // 401 代表token过期,需要刷新token if (response.data.code == 401) { // 这里可以加入判断,判断 refreshToken 也过期了,直接 router.push 回登录页 // if () { // router.push('/login') // } if (!isRefreshToken) { isRefreshToken = true; let res = await refreshToken(); // 刷新 token 的接口 isRefreshToken = false; localStorage.setItem("acc_token", res.data.accToken); // 重发请求队列请求 requestList.forEach((callback) => { callback(); }); requestList = []; let currentRequest = await request(response.config); return currentRequest; } else { // 将并发的请求,通过回调函数暂存起来,当token 刷新之后,在进行请求 return new Promise((resolve) => { requestList.push(() => { resolve(request(response.config)); }); }); } } return response; }, (error) => { return Promise.reject(error); } ); export default request;
axios 实现 无感刷新方案
清云随笔2024-11-15 14:19
相关推荐
m0_7482402535 分钟前
前端如何检测用户登录状态是否过期black^sugar36 分钟前
纯前端实现更新检测寻找沙漠的人1 小时前
前端知识补充—CSSGISer_Jing1 小时前
2025前端面试热门题目——计算机网络篇m0_748245521 小时前
吉利前端、AI面试理想不理想v2 小时前
webpack最基础的配置pubuzhixing2 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界2401_857600952 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道GDAL2 小时前
vue入门教程:组件透传 Attributes