Axios Eject: Как действовать?

Question

Есть ли способ для меня, чтобы выбросить мои перехватчики, когда они установлены следующим образом? Это приложение реакции, и у меня есть следующий код в моем 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 TTL access_token и refresh_token. Если кому-то интересно, как подойти к этому более подробно, дайте мне знать, и я смогу добавить больше моего подхода, я смог заставить его работать, не исключая перехватчики запросов и ответов. Примечание: это было в приложениях 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);
      }
    });
  },
);

Здесь вы можете разместить свою избыточную рассылку, призывы к действиям внутри saveTokens и refreshFailLogout. Это работает с вариантами использования для еще меньших TTL