Перехватчики Axios для токенов доступа и обновлений токенов в React

Question

Я пытаюсь отладить проблему с перехватчиками в токене доступа и обновить требование токена. Я попытался выполнить процедуры отладки из: перехватчиков Axios и асинхронного входа в систему , а также следовал формату и процедуре перехватчика Axios из: https://shinework.io/post/handle-oauth2-authentication-with-react-and-flux

Однако я не могу понять, почему мое приложение не работает. Я новичок в перехватчиках, и я думаю, что это может быть проблема с тем, как они выбрасываются? Я столкнулся с проблемой во время моего запроса axios, когда я пытаюсь выполнить начальный запрос с обновленным токеном доступа, полученным от конечной точки обновления. У меня есть этот код в моем корневом файле index.js

Когда я отлаживаюсь после истечения срока действия токена доступа, console.log с именем «Отклонить» во время блока catch первоначального вызова запроса с использованием нового маркера доступа рендерится. Опять же, цель состоит в том, чтобы использовать токен обновления, чтобы получить новые наборы access_token и refresh_token, а затем выполнить первоначальный запрос с использованием нового access_token.

Перехватчики запросов и ответов:

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(store);
            reject(error);
          }
        });
      },
    );

onRefreshToken () и saveTokens ()

const onRefreshToken = params => {
  let refreshToken = store.getState().auth.refresh_token;
  if (refreshToken) {
    axios.interceptors.request.eject(InterceptorUtil.getInterceptor());

    const dataSet = {
      refresh_token: `${refreshToken}`,
    };
    axios
      .post('https://localhost:3469/api/Login/$refresh', dataSet)
      .then(response => {
        saveTokens(response.data);

        // Replay request
        axios(params.initialRequest)
          .then(response => {
            params.resolve(response);
            store.dispatch({ type: AUTHENTICATED, payload: response.data });
          })
          .catch(response => {
            console.log('Rejecting')
            params.reject(response);
          })
          .catch(() => {
            refreshFailLogout();
          });
      });
  }
};

const saveTokens = response => {
  const {
    access_token,
    refresh_token,
    scope,
    id_token,
    token_type,
  } = response;

  // ...local storage save of variables
  let token = localStorage.getItem('access_token');

  let interceptor = axios.interceptors.request.use(config => {
    config.headers.authorization = `Bearer ${token}`;
    return config;
  });

  InterceptorUtil.setInterceptor(interceptor);
};

Класс InterceptorUtil

class InterceptorUtil {
  constuctor() {
    this.interceptor = null;
  }

  setInterceptor(interceptor) {
    this.interceptor = interceptor;
  }

  getInterceptor() {
    return this.interceptor;
  }
}

export default new InterceptorUtil();