如何使用Axios Interceptor在打字稿中处理401 API错误和刷新令牌。-DEV365 开发者社区

要使用Axios拦截器来处理401 API errors和Refresh Access/JSON Web令牌（JWTS）代币在Typescript/JavaScript中，您可以执行以下操作：

导入axios库，并创建一个axios对象的实例：

import axios from 'axios';

const instance = axios.create();

定义一个函数以使用刷新令牌刷新访问令牌：

function refreshAccessToken(refreshToken: string): Promise<string> {
  // Send a request to the server to refresh the access token using the refresh token
  return axios
    .post('/refresh-token', { refreshToken })
    .then((response) => response.data.accessToken);
}

将拦截器添加到instance对象中以处理401个错误。在拦截器中，检查401错误，如果找到了401个错误，请使用刷新令牌刷新访问令牌并重试原始请求：

instance.interceptors.response.use(
  (response) => response,
  (error) => {
    const originalRequest = error.config;

    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const refreshToken = // Get the refresh token from storage

      return refreshAccessToken(refreshToken).then((accessToken) => {
        // Replace the access token in the original request config
        originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;
        return instance(originalRequest);
      });
    }

    return Promise.reject(error);
  }
);

使用此处，每当Axios请求返回401错误时，Interceptor都会自动刷新访问令牌并重试原始请求。

重要的是要注意，此示例只是如何使用Axios Interceptor来处理401错误和刷新访问令牌的粗略轮廓。您将需要在现实世界中处理其他边缘案例并实施正确的错误处理。

有关更多信息，请确保参考拦截器上的Axios' official documentation。