✨feat:토큰리프레시 테스트 1차 (#580)

Author: minjoon97

src/api/apis/index.tsx

@@ -1,3 +1,5 @@
+import { updateLoginInfo } from '@/store/queries/update-login-info/updateLoginInfo';
+import { useLoginStore } from '@/store/stores/login/loginStore';
 import axios from 'axios';
 
 const axiosInstance = axios.create({
@@ -8,6 +10,27 @@ const axiosInstance = axios.create({
   }
 });
 
+// 토큰 갱신 중임을 나타내는 변수
+let isRefreshing = false;
+
+// refreshSubscribers의 콜백 함수 타입 정의
+type RefreshSubscriber = (token: string) => void;
+
+// 토큰 갱신 대기중인 요청들을 저장하는 배열
+let refreshSubscribers: RefreshSubscriber[] = [];
+
+// 토큰 갱신 후 대기중인 요청들을 처리하는 함수
+const onRefreshed = (newToken: string): void => {
+  refreshSubscribers.forEach((callback) => callback(newToken));
+  refreshSubscribers = [];
+};
+
+// 토큰 갱신을 기다리는 함수
+const addRefreshSubscriber = (callback: RefreshSubscriber): void => {
+  refreshSubscribers.push(callback);
+};
+
+// 요청 인터셉터
 axiosInstance.interceptors.request.use(
   (config) => {
     const token = localStorage.getItem('token');
@@ -27,7 +50,63 @@ axiosInstance.interceptors.response.use(
     const res = response.data;
     return res;
   },
-  (error) => {
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 토큰이 만료되었고, 재시도하지 않은 요청인 경우
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      if (!isRefreshing) {
+        isRefreshing = true;
+
+        try {
+          // 토큰 갱신 요청
+          const oldToken = localStorage.getItem('token');
+
+          console.log('oldToken:', oldToken);
+
+          const refreshResponse = await axios.post<{ data: string }>(
+            `${import.meta.env.VITE_APP_BASE_URL}/api/auth/token/refresh`,
+            { access_token: oldToken?.replace('Bearer ', '') },
+            { withCredentials: true }
+          );
+
+          const newToken = `${refreshResponse.data.data}`;
+          localStorage.setItem('token', newToken);
+
+          console.log('newToken:', newToken);
+
+          updateLoginInfo(newToken);
+
+          isRefreshing = false;
+          onRefreshed(newToken);
+
+          console.log('newToken으로 갱신완료');
+
+          // 원래 요청 재시도
+          originalRequest.headers.Authorization = newToken;
+          return axiosInstance(originalRequest);
+        } catch (refreshError) {
+          console.log('newToken으로 갱신실패');
+
+          isRefreshing = false;
+          localStorage.removeItem('token');
+          useLoginStore.getState().clearLoginInfo();
+          window.location.href = '/login';
+          return Promise.reject(refreshError);
+        }
+      } else {
+        // 토큰 갱신 중인 경우, 새로운 토큰을 받을 때까지 대기
+        return new Promise((resolve) => {
+          addRefreshSubscriber((newToken: string) => {
+            originalRequest.headers.Authorization = newToken;
+            resolve(axiosInstance(originalRequest));
+          });
+        });
+      }
+    }
+
     return Promise.reject(error);
   }
 );

src/pages/success-page/index.tsx

@@ -1,81 +1,53 @@
-import axiosInstance from '@/api/apis';
-import { useLoginStore } from '@/store/stores/login/loginStore';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
+import axiosInstance from '@/api/apis';
+import { useLoginStore } from '@/store/stores/login/loginStore';
+import { updateLoginInfo } from '@/store/queries/update-login-info/updateLoginInfo';
 
 const SuccessPage = () => {
   const token = localStorage.getItem('token');
-
   const loginType = useLoginStore((state) => state.loginType);
-  const setLoginInfo = useLoginStore((state) => state.setLoginInfo);
-  const clearLoginInfo = useLoginStore((state) => state.clearLoginInfo);
-
   const navigate = useNavigate();
 
-  //단기토큰 받는거로 바뀌면, 해당 단기토큰으로 ACCESS토큰 받아오는 useEffect하나 더 필요 (쿠키에서 꺼내서 보내는거로)
-  //로그인 로직에서는 local에 저장하는 것 삭제하고, 여기서 ACCESS받아서 local에 저장하도록 해야함.
-
-  ///////////////////////////////
-  //토큰을 해석해서 zustand에 저장
-  ///////////////////////////////
+  // 토큰 처리 및 로그인 정보 저장
   useEffect(() => {
-    const getLoginInfo = () => {
-      try {
-        if (!token) {
-          clearLoginInfo();
-          return;
-        }
-
-        // Bearer 제거
-        const actualToken = token.replace('Bearer ', '');
-
-        // JWT 디코딩 (payload 부분)
-        const payload = JSON.parse(atob(actualToken.split('.')[1]));
-
-        const USER_ID = payload.userId;
-        const ROLE_ID = payload.roleId;
-        const ROLE = payload.role;
-
-        if (ROLE === 'ROLE_CENTER' || ROLE === 'ROLE_VOLUNTEER') {
-          setLoginInfo(USER_ID, ROLE_ID, ROLE);
-        }
-      } catch (error) {
-        console.error('토큰 디코딩 실패:', error);
-      }
-    };
-
-    getLoginInfo();
-  }, [token, setLoginInfo]);
+    if (token) {
+      updateLoginInfo(token);
+    }
+  }, [token]);
 
-  ////////////////////////////
-  //상세정보입력 여부 가져와서 리디렉션 위치 판별
-  ////////////////////////////
+  // 상세정보 입력 여부 확인 및 리다이렉션
   useEffect(() => {
     const checkBasicInfo = async () => {
       try {
         const response = await axiosInstance.get('api/user/check/basic-info');
         const hasBasicInfo = response.data;
 
-        console.log('hasBasicInfo', hasBasicInfo);
-
         if (hasBasicInfo) {
           navigate('/main');
         } else {
-          if (loginType === 'ROLE_CENTER') {
-            navigate('/center-detail');
-          } else if (loginType === 'ROLE_VOLUNTEER') {
-            navigate('/volunteer-detail');
+          switch (loginType) {
+            case 'ROLE_CENTER':
+              navigate('/center-detail');
+              break;
+            case 'ROLE_VOLUNTEER':
+              navigate('/volunteer-detail');
+              break;
+            default:
+              break;
           }
         }
       } catch (error) {
         console.error('상세정보 확인 실패:', error);
+        // 에러 발생 시 로그인 페이지로 리다이렉션 추가
+        navigate('/login');
       }
     };
 
     if (loginType) {
       checkBasicInfo();
     }
-  }, [loginType]);
+  }, [loginType, navigate]);
 
   return <></>;
 };

src/store/queries/update-login-info/updateLoginInfo.ts

@@ -0,0 +1,24 @@
+import { useLoginStore } from '@/store/stores/login/loginStore';
+
+export const updateLoginInfo = (token: string) => {
+  try {
+    if (!token) {
+      useLoginStore.getState().clearLoginInfo();
+      return;
+    }
+
+    const actualToken = token.replace('Bearer ', '');
+    const payload = JSON.parse(atob(actualToken.split('.')[1]));
+
+    const USER_ID = payload.userId;
+    const ROLE_ID = payload.roleId;
+    const ROLE = payload.role;
+
+    if (ROLE === 'ROLE_CENTER' || ROLE === 'ROLE_VOLUNTEER') {
+      useLoginStore.getState().setLoginInfo(USER_ID, ROLE_ID, ROLE);
+    }
+  } catch (error) {
+    console.error('토큰 디코딩 실패:', error);
+    return null;
+  }
+};