How can I send different request in intercepter?

Question

I'm trying to send different request in interceptor

I want to send accessToken in request header authorization for every request except one case

so I write this code in interceptor request.use

config.headers = {authorization: `Bearer ${accessToken}`};

but if this error occurred

error.response.data.code === 'expired'

I want to send refreshtoken in header authorization not accesstoken

so I write this code in interceptor.response.use.error

const { data } = await axios.post(
  `${Config.API_URL}/user/refreshToken`,
  {},
  { headers: { authorization: `Bearer ${refreshToken}` } }
);

this is my code

useEffect(() => {
  axios.interceptors.request.use(async (config: any) => {
    const accessToken = await EncryptedStorage.getItem("accessToken");
    config.headers = { authorization: `Bearer ${accessToken}` };
    return config;
  });

  axios.interceptors.response.use(
    (response) => {
      return response;
    },
    async (error) => {
      const {
        config,
        response: { status },
      } = error;
      if (status === 419) {
        if (error.response.data.code === "expired") {
          const originalRequest = config;
          const refreshToken = await EncryptedStorage.getItem("refreshToken");
          const { data } = await axios.post(
            `${Config.API_URL}/user/refreshToken`,
            {},
            { headers: { authorization: `Bearer ${refreshToken}` } }
          );
          return axios(originalRequest);
        }
      }
      return Promise.reject(error);
    }
  );
}, [dispatch]);

how can i fix my code? if i use my code if error.response.data.code === 'expired'

the headers.authorization accesstoken is still being requested.

user_283366 · Answer

Make it so your request interceptor only sets a default authorization header without overriding anything already present

axios.interceptors.request.use(async (config) => {
  const accessToken = await EncryptedStorage.getItem("accessToken");
  return {
    ...config,
    headers: {
      authorization: `Bearer ${accessToken}`,
      ...config.headers
    }
  }
});

You could also avoid making the getItem() request entirely which might save a little time

axios.interceptors.request.use(async (config) => {
  if (!config.headers.authorization) {
    config.headers.authorization = `Bearer ${await EncryptedStorage.getItem("accessToken")}`
  }
  return config;
});

How can I send different request in intercepter?

1 Answers