fix: soomsilClient.response.interceptor 무한 루프 문제

src/apis/index.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
 
-import { refreshToken } from '@/home/apis/postRefreshToken';
+import { postRefreshToken } from '@/home/apis/postRefreshToken';
 import { AuthErrorData } from '@/home/types/Auth.type';
 import { api } from '@/service/TokenService';
 
@@ -26,26 +26,30 @@ soomsilClient.interceptors.request.use((config) => {
   return config;
 });
 
-const onFulfilled = (response: AxiosResponse) => response;
-
-const onRejected = async (error: AxiosError) => {
-  const originalConfig = error.config;
-  const data = error.response?.data as AuthErrorData;
-
-  if (originalConfig && error.response?.status === 401 && data?.error === 'Auth-002') {
-    try {
-      await refreshToken();
-      return soomsilClient.request({
-        ...originalConfig,
-        headers: {
-          Authorization: `Bearer ${api.getAccessToken()}`,
-        },
-      });
-    } catch (error) {
-      return Promise.reject(error);
+soomsilClient.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: AxiosError) => {
+    const originalConfig = error.config;
+    const data = error.response?.data as AuthErrorData;
+
+    if (originalConfig && error.response?.status === 401 && data?.error === 'Auth-002') {
+      try {
+        const { accessToken, accessTokenExpiredIn, refreshToken, refreshTokenExpiredIn } =
+          await postRefreshToken();
+
+        api.setAccessToken(accessToken, accessTokenExpiredIn);
+        api.setRefreshToken(refreshToken, refreshTokenExpiredIn);
+
+        return soomsilClient.request({
+          ...originalConfig,
+        });
+      } catch (error) {
+        api.logout();
+        sessionStorage.removeItem('user');
+        window.location.reload();
+        return Promise.reject(error);
+      }
     }
+    return Promise.reject(error);
   }
-  return Promise.reject(error);
-};
-
-soomsilClient.interceptors.response.use(onFulfilled, onRejected);
+);

src/home/apis/postRefreshToken.ts

@@ -1,21 +1,12 @@
-import { AxiosError } from 'axios';
-
 import { authClient } from '@/apis';
 import { api } from '@/service/TokenService';
 
-import { AuthErrorData, PostAuthResponse } from '../types/Auth.type';
-
-export const refreshToken = async (): Promise<PostAuthResponse> => {
-  try {
-    const { data } = await authClient.post('/auth/refresh', {
-      refreshToken: api.getRefreshToken(),
-    });
+import { PostAuthSignInData } from '../types/Auth.type';
 
-    api.setAccessToken(data.accessToken, data.accessTokenExpiredIn);
-    api.setRefreshToken(data.refreshToken, data.refreshTokenExpiredIn);
+export const postRefreshToken = async (): Promise<PostAuthSignInData> => {
+  const { data } = await authClient.post('/auth/refresh', {
+    refreshToken: api.getRefreshToken(),
+  });
 
-    return data;
-  } catch (error: unknown) {
-    return { error: error as AxiosError<AuthErrorData> };
-  }
+  return data;
 };