要解决Axios请求拦截器在浏览器刷新时不起作用的问题,可以在Axios实例中使用sessionStorage或localStorage来存储拦截器所需的信息,并在浏览器刷新时重新添加拦截器。
以下是一个示例代码,展示了如何使用sessionStorage来存储拦截器的token,并在浏览器刷新时重新添加拦截器:
import axios from 'axios';
// 创建一个Axios实例
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(
(config) => {
// 从sessionStorage中获取token
const token = sessionStorage.getItem('token');
// 如果token存在,则在请求头中添加Authorization字段
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
(response) => {
// 处理响应数据
return response;
},
(error) => {
return Promise.reject(error);
}
);
// 在浏览器刷新时重新添加请求拦截器
window.addEventListener('beforeunload', () => {
// 从sessionStorage中获取token
const token = sessionStorage.getItem('token');
if (token) {
// 存储token到localStorage
localStorage.setItem('token', token);
}
});
// 在页面加载时检查是否存在token,并重新添加请求拦截器
window.addEventListener('DOMContentLoaded', () => {
// 从localStorage中获取token
const token = localStorage.getItem('token');
if (token) {
// 移除localStorage中的token
localStorage.removeItem('token');
// 存储token到sessionStorage
sessionStorage.setItem('token', token);
// 添加请求拦截器
instance.interceptors.request.use(
(config) => {
// 在请求头中添加Authorization字段
config.headers.Authorization = `Bearer ${token}`;
return config;
},
(error) => {
return Promise.reject(error);
}
);
}
});
export default instance;
在上面的代码中,我们创建了一个Axios实例instance,并在请求拦截器中使用sessionStorage来存储token。在浏览器刷新时,我们将token从sessionStorage存储到localStorage中,并在页面加载时重新添加请求拦截器。
请注意,这只是一个示例代码,具体的实现可能因项目的需求而有所不同。在实际应用中,你可能需要根据实际情况进行适当的调整。