用于令牌刷新的Axios全局拦截器

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发送请求时，会自动处理令牌刷新的逻辑，确保用户的访问令牌始终有效。

腾讯云相关产品推荐：