엑시오스 인터셉터에 도전해보자

엑시오스 인터셉터를 왜?

이거 안하면 취업 못할거 같았다
JWT인증을 만들어 보는 중에 토큰이 만료되었을 때,
에러를 핸들링 하는걸 깔끔하게 만들어 보고 싶었다.

문제의 원인

내 일주일 날려먹은 놈

const { reissue } = useReissue();
const res = await reissue();

이놈을 customAxios.ts안에 넣어버린게 문제였다,,,
훅 안에서 훅을 호출하다보니 어딘까 꼬여버린 것 같은 문제가 발생했다.
+++ 나중에 찾아보니 리액트 훅의 라이프사이클관련 문제였다.

해결

그래서 어떻게 해결했냐?

정말 정말 간단하다.
훅으로 토큰을 재발급 하는 함수를 따로 만들지 말고
리스폰스 핸들러 안에서 엑시오스로 요청을 보내게 고쳤다.

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error: AxiosError) => {
    const { config } = error;
    if (config != undefined) {
      config.headers["Content-Type"] = "application/json";
      const refreshToken = getCookie("refreshToken");
      try {
        axios
          .post(`${import.meta.env.VITE_API_URL}/auth/reissue`, {
            refreshToken,
          })
          .then((response) => {
            const newAccessToken = response.data.data.accessToken;
            const newRefreshToken = response.data.data.refreshToken;

            setCookie("accessToken", newAccessToken, { path: "/" });
            setCookie("refreshToken", newRefreshToken, {
              path: "/",
              maxAge: "2600000",
            });
            if (getCookie("accessToken") == newAccessToken) {
            }
            config.headers.Authorization = `Bearer ${getCookie("accessToken")}`;
          })
          .catch((err) => {
            console.log(err);
          });
      } catch (error) {
        return Promise.reject(error);
      }
      return instance(config);
    }
  }
);

이랬더니 고쳐졌다.

인터셉터를 쓰지 않고 그냥 reissue함수를 사용하면 잘만 돌아가서
절대로 훅에는 문제 없을거라 생각했던 내가 밉다,,,

배운점

1. 커스텀 훅 안에서 커스텀 훅 사용은 자제하자
2. 돌다리도 두들겨 보고 건너자( 절대로 문제없다고 자신하지 말자 제발, 제발, 제발 )

여담

chat-GPT: 코드 자체는 상당히 잘 작성되어 있지만, useReissue 훅을 Axios 인터셉터 내부에서 호출하는 부분이 문제가 될 수 있습니다.

지피티 한데 인정 받았는데,,,, 얘는 답을 알고 있었다.

훈수는 언제나 환영