Axios是一个基于Promise的HTTP客户端,用于发送HTTP请求。它可以在浏览器和Node.js中使用,并提供了丰富的功能和易于使用的API。
令牌刷新是指在用户登录后,服务器会返回一个访问令牌(access token),用于验证用户的身份和权限。访问令牌通常有一个过期时间,当令牌过期时,需要使用刷新令牌(refresh token)来获取新的访问令牌。
为了实现令牌刷新功能,可以使用Axios的全局拦截器。拦截器可以在每个请求发送之前或响应返回之后执行一些操作,例如添加请求头、处理错误等。
以下是一个用于令牌刷新的Axios全局拦截器的示例代码:
import axios from 'axios';
// 创建一个Axios实例
const instance = axios.create({
baseURL: 'https://api.example.com',
});
// 设置请求拦截器
instance.interceptors.request.use(
(config) => {
// 在请求头中添加访问令牌
const accessToken = getAccessToken();
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 设置响应拦截器
instance.interceptors.response.use(
(response) => {
return response;
},
(error) => {
// 处理令牌过期错误
if (error.response.status === 401) {
const refreshToken = getRefreshToken();
if (refreshToken) {
// 发送刷新令牌请求
return axios.post('/refresh-token', { refreshToken })
.then((response) => {
// 更新访问令牌
const newAccessToken = response.data.accessToken;
setAccessToken(newAccessToken);
// 重新发送原始请求
const originalRequest = error.config;
originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
return axios(originalRequest);
})
.catch((error) => {
// 处理刷新令牌失败
logout();
return Promise.reject(error);
});
} else {
// 刷新令牌不存在,需要重新登录
logout();
}
}
return Promise.reject(error);
}
);
// 导出Axios实例
export default instance;
在上述代码中,我们创建了一个Axios实例,并通过interceptors.request.use
方法设置了请求拦截器。在请求拦截器中,我们从本地存储中获取访问令牌,并将其添加到请求头中。
同时,我们还通过interceptors.response.use
方法设置了响应拦截器。在响应拦截器中,我们检查响应状态码是否为401(令牌过期),如果是,则尝试使用刷新令牌获取新的访问令牌。如果刷新令牌请求成功,我们更新访问令牌并重新发送原始请求。如果刷新令牌请求失败或刷新令牌不存在,则需要重新登录。
这样,我们就实现了一个用于令牌刷新的Axios全局拦截器。在使用Axios发送请求时,会自动处理令牌刷新的逻辑,确保用户的访问令牌始终有效。
腾讯云相关产品推荐:
以上是对于用于令牌刷新的Axios全局拦截器的完善且全面的答案。
领取专属 10元无门槛券
手把手带您无忧上云