From eb30abefccb54d65b7a266e38b0ca5db68b035b5 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Thu, 19 Sep 2024 13:10:29 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20Axios=20config=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/axiosConfig.ts | 82 ++++++++++-----------------------
 frontend/src/pages/Home.tsx     | 13 +-----
 2 files changed, 26 insertions(+), 69 deletions(-)

diff --git a/frontend/src/api/axiosConfig.ts b/frontend/src/api/axiosConfig.ts
index 8110a0a..e90194d 100644
--- a/frontend/src/api/axiosConfig.ts
+++ b/frontend/src/api/axiosConfig.ts
@@ -1,32 +1,17 @@
 import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import useAuthStore from '@/stores/useAuthStore';
-import { RefreshTokenResponse, ErrorResponse } from '../types';
+import { RefreshTokenResponse } from '../types';
 
+const REFRESH_URL = '/auth/reissue';
 const api = axios.create({
-  baseURL: `${import.meta.env.VITE_API_URL}/api`,
+  baseURL: `${import.meta.env.VITE_API_URL}`,
   withCredentials: true,
 });
 
-const refreshApi = axios.create({
-  baseURL: `${import.meta.env.VITE_API_URL}/api`,
-  withCredentials: true,
-});
-
-let isRefreshing = false;
-let refreshSubscribers: Array<(token: string) => void> = [];
-
-const subscribeTokenRefresh = (cb: (token: string) => void) => {
-  refreshSubscribers.push(cb);
-};
-
-const onRefreshed = (token: string) => {
-  refreshSubscribers.forEach((cb) => cb(token));
-  refreshSubscribers = [];
-};
-
 api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
   const accessToken = useAuthStore.getState().accessToken;
-  if (accessToken && config.headers) {
+
+  if (accessToken) {
     config.headers.Authorization = `Bearer ${accessToken}`;
   }
   return config;
@@ -34,44 +19,27 @@ api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
 
 api.interceptors.response.use(
   (response: AxiosResponse) => response,
-  (error: AxiosError<ErrorResponse>) => {
-    const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
-
-    if (error.response?.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
-
-      if (isRefreshing) {
-        return new Promise<void>((resolve) => {
-          subscribeTokenRefresh((token: string) => {
-            originalRequest.headers.Authorization = `Bearer ${token}`;
-            resolve(api(originalRequest));
-          });
-        });
-      }
-
-      isRefreshing = true;
-
-      return refreshApi
-        .post<RefreshTokenResponse>('/auth/reissue', null, { withCredentials: true })
-        .then(({ data }) => {
-          const newAccessToken = data.accessToken;
-          useAuthStore.getState().setLoggedIn(true, newAccessToken);
-          onRefreshed(newAccessToken);
-
-          originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
-          return api(originalRequest);
-        })
-        .catch(() => {
-          useAuthStore.getState().clearAuth();
-          console.log('리이슈 실패');
-          window.location.href = '/';
-          return Promise.reject(error);
-        })
-        .finally(() => {
-          isRefreshing = false;
-        });
+  (error: AxiosError) => {
+    if (error.response?.status !== 401 || error.request.responseURL?.includes(REFRESH_URL)) {
+      return Promise.reject(error);
     }
-    return Promise.reject(error);
+
+    return api
+      .post<RefreshTokenResponse>(REFRESH_URL)
+      .then(({ data }) => {
+        console.log(data);
+        const { accessToken } = data;
+        useAuthStore.getState().setLoggedIn(true, accessToken);
+        if (error.config) {
+          return api(error.config);
+        }
+        return Promise.reject(error);
+      })
+      .catch((error) => {
+        useAuthStore.getState().clearAuth();
+        window.location.href = '/';
+        return Promise.reject(error);
+      });
   }
 );
 
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index a59fe75..27f56fb 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -18,7 +18,7 @@ export default function Home() {
     });
   }
   const handleGoogleSignIn = () => {
-    window.location.href = `${BASE_URL}/api/login/oauth2/authorization/google`;
+    window.location.href = `${BASE_URL}/login/oauth2/authorization/google`;
   };
 
   return (
@@ -43,17 +43,6 @@ export default function Home() {
       </div>
 
       {!isLoggedIn ? (
-        // <Link
-        //   to={`${BASE_URL}/api/login/oauth2/authorization/google`}
-        //   // onClick={handleGoogleSignIn}
-        //   className="mb-4 transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-300 active:opacity-80"
-        // >
-        //   <img
-        //     src={GoogleLogo}
-        //     alt="Sign in with Google"
-        //     className="h-auto w-full"
-        //   />
-        // </Link>
         <button
           onClick={handleGoogleSignIn}
           className="mb-4 transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-300 active:opacity-80"