CODEWITHSUNDEEP
javascriptreactjsaxiosjwt
Murilo Sitonio
Murilo Sitonio

Reputation: 307

React + axios interceptors: retry original request within component's context

I'm learning React and I'm using axios and JWT for authentication. I have written an interceptor to refresh the token automatically:

privateAxios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const { config, response } = error;
    const originalRequest = config;
    if (response?.status === 401) {
      apiProvider
        .refreshToken()
        .then(() => {
          let headers = getAuthHeaders();
          privateAxios.defaults.headers = headers;
          originalRequest.headers = headers;
          return privateAxios(originalRequest);
        })
        .catch((err) => {
          logout();
          return Promise.reject(err);
        });
    }
    return Promise.reject(error);
  }
);

On my component I have the following:

api.post(data)
  .then(() => {
    showSuccessFeedbackForm();
    reloadTable();
    handleClose();
  })
  .catch((error) => {
    setAlertInfos({
      message: JSON.stringify(error.response.data),
      severity: "error",
    });
    setShowAlert(true);
  })
  .finally(() => {
    setIsLoaded(true);
  });

My problem is that I want to continue with the component's normal "flow" (i.e., showSuccessFeedbackForm() and reloadTable() and handleClose()) if the token needed to be refreshed (when the code reaches return privateAxios(originalRequest)).

How can I accomplish this?

Upvotes: 0

Views: 684

Answers (1)

Wesley LeMahieu
Wesley LeMahieu

Reputation: 2613

It looks like you should just have to return the apiProvider.refreshToken()... call. After return privateAxios(originalRequest); returns, then return Promise.reject(error); is executing which causes the front-end to receiving an rejection not a resolution.

Consider this intercepted error which does not throw an error to the frontend which still "resolves":

axios.interceptors.response.use(
  (res) => res,
  (err) => {
    console.log("##### AXIOS ERROR #####");
    dispatch(increment());
  }
);

Simply changing it to this causes the front-end to catch an error which is what your code is essentially doing:

axios.interceptors.response.use(
  (res) => res,
  (err) => {
    console.log("##### AXIOS ERROR #####");
    return Promise.reject();
  }
);

Upvotes: 2

Related Questions