“”엑시오스 인터셉터에 도전해보자
엑시오스 인터셉터를 왜?
이거 안하면 취업 못할거 같았다
JWT인증을 만들어 보는 중에 토큰이 만료되었을 때,
에러를 핸들링 하는걸 깔끔하게 만들어 보고 싶었다.
문제의 원인
내 일주일 날려먹은 놈
typescript
const { reissue } = useReissue();
const res = await reissue();이놈을 customAxios.ts안에 넣어버린게 문제였다,,,
훅 안에서 훅을 호출하다보니 어딘까 꼬여버린 것 같은 문제가 발생했다.
+++ 나중에 찾아보니 리액트 훅의 라이프사이클관련 문제였다.
해결
“”그래서 어떻게 해결했냐?
정말 정말 간단하다.
훅으로 토큰을 재발급 하는 함수를 따로 만들지 말고
리스폰스 핸들러 안에서 엑시오스로 요청을 보내게 고쳤다.
typescript
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함수를 사용하면 잘만 돌아가서
절대로 훅에는 문제 없을거라 생각했던 내가 밉다,,,
배운점
- 커스텀 훅 안에서 커스텀 훅 사용은 자제하자
- 돌다리도 두들겨 보고 건너자( 절대로 문제없다고 자신하지 말자 제발, 제발, 제발 )
여담
“”chat-GPT: 코드 자체는 상당히 잘 작성되어 있지만, useReissue 훅을 Axios 인터셉터 내부에서 호출하는 부분이 문제가 될 수 있습니다.
지피티 한데 인정 받았는데,,,, 얘는 답을 알고 있었다.
