以下是一个使用Axios进行令牌刷新循环的代码示例:
import axios from 'axios';
// 创建一个Axios实例
const api = axios.create({
baseURL: 'https://api.example.com',
});
// 设置拦截器
api.interceptors.request.use(
(config) => {
// 在每个请求中添加令牌
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 发送刷新令牌请求的函数
const refreshToken = async () => {
try {
const response = await axios.post('https://api.example.com/refresh-token', {
// 发送当前令牌以获取新的令牌
token: localStorage.getItem('token'),
});
const newToken = response.data.token;
// 存储新的令牌
localStorage.setItem('token', newToken);
return newToken;
} catch (error) {
return Promise.reject(error);
}
};
// 发送请求的函数
const getData = async () => {
try {
const response = await api.get('/data');
return response.data;
} catch (error) {
if (error.response.status === 401) {
// 令牌过期,尝试刷新令牌
try {
const newToken = await refreshToken();
// 刷新令牌后重新发送请求
api.defaults.headers.common.Authorization = `Bearer ${newToken}`;
const response = await api.get('/data');
return response.data;
} catch (error) {
return Promise.reject(error);
}
} else {
return Promise.reject(error);
}
}
};
// 使用getData函数发送请求
getData()
.then((data) => {
console.log(data);
})
.catch((error) => {
console.error(error);
});
上述代码中,我们首先创建了一个Axios实例,然后设置了一个请求拦截器来在每个请求中添加令牌。然后定义了一个refreshToken
函数,用于发送刷新令牌请求并获取新的令牌。接下来,我们定义了一个getData
函数用于发送请求,并在遇到令牌过期的情况下尝试刷新令牌后重新发送请求。最后,我们使用getData
函数来获取数据,并处理成功和失败的情况。