Question

按以下方式设置拦截器时，我是否可以退出它们？这是一个React应用程序，我在index.js中有以下代码可用于所有全局axios调用。

在我的onRefreshToken（）调用中，我想以某种方式弹出全局响应拦截器，以向刷新令牌API发送新请求。我已经看到了一些使用变量或函数调用的人的示例，但不确定如何实现。

请求拦截器

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('access_token');
    config.headers.authorization = `Bearer ${token}`;
    return config;
  },
  error => {
    return Promise.reject(error);
  },
);

响应拦截器

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    const errorMessage = error.message;
    const substring = '401';
    const errorCheck = errorMessage.includes(substring);

    return new Promise((resolve, reject) => {
      if (errorCheck) {
        onRefreshToken({
          initialRequest: error.config,
          resolve,
          reject,
        });
      } else {
        refreshFailLogout();
        reject(error);
      }
    });
  },
);

Answer 1

我能够使我的实例处理此要求。尽管可以改进，但是我遵循Shinework的方法对API access_token和refresh_token TTL进行了一些调整。如果有人想知道如何更详细地处理此问题，请告诉我，我可以添加更多方法，可以在不弹出请求和响应拦截器的情况下使它起作用。注意：这是在React，Redux（带有Thunk）和React-Router应用程序中。

我知道那里没有很多文档，因此，如果您遇到麻烦，请寻求帮助！使其正常工作的关键功能：

axios.interceptors.response.use(
  (response) => {
    // eslint-disable-next-line no-console
    console.log('Response Success', response);
    // Do something with response data
    return response;
  },
  (error) => {
    // eslint-disable-next-line no-console
    console.log(error.response);
    return new Promise((resolve, reject) => {
      if (
        error.response.status === 401
        && error.config.headers.Authorization === 'Bearer undefined'
      ) {
        refreshFailLogout();
        reject(error);
      } else if (error.response.status === 401) {
        onRefreshToken({
          initialRequest: error.config,
          resolve,
          reject,
        });
      } else {
        refreshFailLogout();
        reject(error);
      }
    });
  },
);

将您的redux派送，save动作调用保存在saveTokens和refreshFailLogout中。这适用于甚至更小的TTL的用例

Axios Eject：如何进行？

1 个答案: