Axios只能刷新一次令牌
- 首先，需要设置Axios的拦截器，在请求中添加Authorization header，并将token携带在其中。
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = Bearer ${token};
}
return config;
});
- 在服务端或者API中，将令牌的刷新逻辑拆分成两个步骤：获取新的令牌和设置新的令牌。
// 获取新的token router.post('/refresh', async (req, res) => { try { const refreshToken = req.cookies.refreshToken; const { data } = await axios.post('https://auth.example.com/token', { refreshToken }); res.send(data); } catch (error) { res.status(401).send(error); } });
// 设置新的token
axios.interceptors.response.use(
response => {
const newToken = response.data.token;
if (newToken) {
localStorage.setItem('token', newToken);
}
return response;
},
error => {
const { config, response } = error;
const originalRequest = config;
if (response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
return axios.post('/refresh')
.then(res => {
if (res.status === 200) {
axios.defaults.headers.common.Authorization = Bearer ${res.data.token};
return axios(originalRequest);
}
});
}
return Promise.reject(error);
}
);
- 当旧token过期时，Axios拦截器将会自动发送一个新的请求来获取新的token并设置。这样，在请求间断时，用户可以无缝地继续使用应用。