import axios from 'axios';
// 假设这是你的refreshToken函数，用于刷新访问令牌
function refreshToken() {
// 这里应该包含你用来请求新token的逻辑
// 返回一个Promise
}
// 创建一个axios实例
const instance = axios.create({
baseURL: 'http://your-api-base-url',
timeout: 1000,
});
// 拦截器：请求拦截
instance.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('accessToken');
if (token) {
config.headers['Authorization'] = 'Bearer ' + token;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 拦截器：响应拦截
instance.interceptors.response.use(
response => {
// 对响应数据做点什么
return response;
},
async error => {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
try {
const accessToken = await refreshToken();
localStorage.setItem('accessToken', accessToken);
axios.defaults.headers.common['Authorization'] = 'Bearer ' + accessToken;
return instance(originalRequest);
} catch (refreshError) {
// 处理token刷新错误
return Promise.reject(refreshError);
}
}
return Promise.reject(error);
}
);
export default instance;这段代码首先创建了一个axios实例，并为其设置了基础URL和请求超时时间。然后，它定义了请求和响应拦截器，其中请求拦截器添加了访问令牌到请求头部，而响应拦截器在遇到401未授权错误且尚未重试时，将尝试使用refreshToken函数刷新令牌。如果刷新成功，它将更新本地存储并重新发送原始请求。如果刷新失败，它将拒绝该错误。这个模式确保了在用户无感知的情况下，你的应用程序可以自动获取新的访问令牌。