使用axios拦截器来更新认证信息的解决方法如下所示:
import axios from 'axios';
// 创建axios实例
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 获取认证信息(token)并添加到请求头中
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 处理请求错误
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据做些什么
return response;
},
error => {
// 处理响应错误
// 如果响应状态码为401(未授权),则重新获取认证信息(如刷新token)并重试请求
if (error.response && error.response.status === 401) {
return refreshTokenAndRetryRequest(error.config);
}
return Promise.reject(error);
}
);
// 刷新token并重试请求的函数
function refreshTokenAndRetryRequest(config) {
return axios.get('https://api.example.com/refresh-token')
.then(response => {
// 获取新的token并更新到本地存储中
const newToken = response.data.token;
localStorage.setItem('token', newToken);
// 更新请求头中的认证信息
config.headers['Authorization'] = `Bearer ${newToken}`;
// 重新发起原始请求
return axios(config);
})
.catch(error => {
// 处理刷新token失败的情况
return Promise.reject(error);
});
}
// 导出axios实例
export default instance;
上述代码中,我们创建了一个axios实例并添加了请求拦截器和响应拦截器。在请求拦截器中,我们获取本地存储中的认证信息(token),并将其添加到请求头中。在响应拦截器中,我们处理了响应错误的情况,并在状态码为401(未授权)时重新获取认证信息并重试请求。
刷新token并重试请求的逻辑封装在refreshTokenAndRetryRequest函数中。该函数会发送一个刷新token的请求,获取新的token并更新到本地存储中,然后再重新发起原始请求。
最后,我们导出了这个axios实例,其他地方可以直接引用并使用它来发送请求。