TIL-72 Axios interceptors

PRB·2022년 9월 14일
0

WEB

목록 보기
13/15
post-thumbnail

회사에서 refreshToken을 도입하게 되면서 axios interceptors에 대해 학습하였다.

axios 인터셉터란 ?then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다.

플로우는 interceptors를 이용해서 이미 만료된 AccessToken이거나 AccessToken이 없다면 RefreshToken을 다시 받아와서 원래 요청하려고 했던 api를 재 호출하는 방식으로 작업하였다.

const checkRefreshAndAccessToken = async () => {
  const hasRefreshToken = await RefreshToken여부 // boolean
  const hasAccessToken = await AccessToken여부 // boolean
  return { hasRefreshToken, hasAccessToken };
};

axios.interceptors.response.use(
  async (response) => {
    const { config } = response;
    const originalRequest = config;
    const { hasRefreshToken, hasAccessToken } = await checkRefreshAndAccessToken();

    if (hasRefreshToken && !hasAccessToken) {
      await refreshAccessToken();
      return axios(originalRequest);
    }

    return response;
  },

  async (error) => {
    const { config } = error;
    const originalRequest = config;
    const resp = error.response;
    const { hasRefreshToken, hasAccessToken } = await checkRefreshAndAccessToken();

    if (resp && resp.status >= 400) {
      await refreshAccessToken();

      if (!hasRefreshToken && !hasAccessToken) {
        // refreshToken, AccessToken 둘 다 없을 경우 처리
      }
      return axios(originalRequest);
    }
    return Promise.reject(error);
  }
);

정상적인 응답 시에도 체크를 하게 했는데 정책상 에러가 아니어도 토큰이 필요한 경우가 있어서 방어코드를 작성하였다.

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글