在处理Axios拦截器刷新令牌时,可以使用以下代码示例来解决其他请求返回401错误的问题:
import axios from 'axios';
// 创建一个新的Axios实例
const api = axios.create({ baseURL: 'https://api.example.com' });
// 定义一个变量来保存刷新令牌的Promise
let refreshRequest = null;
// 创建一个请求拦截器
api.interceptors.request.use(
config => {
// 在每个请求中检查令牌是否存在,并添加到请求头中
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 创建一个响应拦截器
api.interceptors.response.use(
response => {
return response;
},
async error => {
const originalRequest = error.config;
// 如果请求返回了401错误,并且没有正在刷新令牌的请求
if (error.response.status === 401 && !refreshRequest) {
try {
// 发起刷新令牌的请求,并保存Promise
refreshRequest = axios.post('/refreshToken', { token: localStorage.getItem('refreshToken') });
// 等待刷新令牌的请求完成
const { data } = await refreshRequest;
// 更新本地存储的令牌和刷新令牌
localStorage.setItem('token', data.token);
localStorage.setItem('refreshToken', data.refreshToken);
// 重新发送原始请求,使用新的令牌
originalRequest.headers.Authorization = `Bearer ${data.token}`;
return api(originalRequest);
} catch (error) {
// 刷新令牌失败,跳转到登录页面
localStorage.removeItem('token');
localStorage.removeItem('refreshToken');
window.location.href = '/login';
return Promise.reject(error);
} finally {
// 重置刷新令牌的Promise
refreshRequest = null;
}
}
// 返回其他错误响应
return Promise.reject(error);
}
);
// 导出Axios实例
export default api;
在上述代码中,我们创建了一个新的Axios实例,并添加了请求拦截器和响应拦截器。
请求拦截器用于在每个请求中检查令牌是否存在,并将其添加到请求头中。
响应拦截器用于处理返回的401错误。当遇到401错误时,它会发起一个刷新令牌的请求,并等待请求完成。然后,它会更新本地存储的令牌和刷新令牌,并重新发送原始请求,使用新的令牌。如果刷新令牌失败,它会移除本地存储的令牌和刷新令牌,并跳转到登录页面。
最后,导出这个新的Axios实例,以便在应用程序中使用它来发送请求。