Feat: #123 RT 만료 시 후처리 구현

GU-99 · Sep 14, 2024 · c886f4c · c886f4c
1 parent 8c447e7
commit c886f4c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 36 deletions.
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -1,13 +1,29 @@
-import { Link, NavLink } from 'react-router-dom';
+import { Link, NavLink, useNavigate } from 'react-router-dom';
 import logo from '@assets/logo.svg';
 import { FaUserCircle } from 'react-icons/fa';
 import { FiHome } from 'react-icons/fi';
 import { useStore } from '@stores/useStore';
-import useLogout from '@hooks/useLogout';
+import { logout } from '@services/authService';
+import useToast from '@hooks/useToast';
 
 export default function Header() {
-  const { userInfo: userInfoData } = useStore();
-  const { handleLogout } = useLogout();
+  const { userInfo: userInfoData, onLogout, clearUserInfo } = useStore();
+  const navigate = useNavigate();
+  const { toastSuccess } = useToast();
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      onLogout();
+      clearUserInfo();
+      navigate('/signin', { replace: true });
+      setTimeout(() => {
+        toastSuccess('로그아웃이 완료되었습니다.');
+      }, 100);
+    } catch (error) {
+      console.error('로그아웃 도중 에러가 발생했습니다.');
+    }
+  };
 
   return (
     <header className="flex h-header items-center justify-between bg-main px-15">

diff --git a/src/hooks/useLogout.ts b/src/hooks/useLogout.ts
diff --git a/src/pages/user/SignInPage.tsx b/src/pages/user/SignInPage.tsx
@@ -7,7 +7,6 @@ import ValidationInput from '@components/common/ValidationInput';
 import FooterLinks from '@components/user/auth-form/FooterLinks';
 import { USER_AUTH_VALIDATION_RULES } from '@constants/formValidationRules';
 import useToast from '@hooks/useToast';
-import useLogout from '@hooks/useLogout';
 import AuthFormLayout from '@layouts/AuthFormLayout';
 import { getUserInfo, login } from '@services/authService';
 import { useStore } from '@stores/useStore';
@@ -16,7 +15,6 @@ import type { UserSignInForm } from '@/types/UserType';
 export default function SignInPage() {
   const { onLogin, setUserInfo } = useStore();
   const { toastError } = useToast();
-  const { handleLogout } = useLogout();
 
   const navigate = useNavigate();
 
@@ -67,7 +65,6 @@ export default function SignInPage() {
     } catch (error) {
       const axiosError = error as Error;
       toastError(axiosError.message);
-      handleLogout();
     }
   };
 

diff --git a/src/services/authService.ts b/src/services/authService.ts
@@ -49,7 +49,7 @@ export async function getUserInfo(axiosConfig: AxiosRequestConfig = {}) {
  * @returns {Promise<AxiosResponse>}
  */
 export async function logout(axiosConfig: AxiosRequestConfig = {}) {
-  return authAxios.post('user/logout', null, axiosConfig);
+  return defaultAxios.post('user/logout', null, { ...axiosConfig, withCredentials: true });
 }
 
 /**

diff --git a/src/services/axiosProvider.ts b/src/services/axiosProvider.ts
@@ -48,7 +48,7 @@ authAxios.interceptors.response.use(
     // 액세스 토큰 만료 시 처리
     if (error.response?.status === 401) {
       const { toastError } = useToast();
-      const { onLogout, setAccessToken } = useStore.getState();
+      const { onLogout, setAccessToken, clearUserInfo } = useStore.getState();
 
       // 에러 객체의 설정 객체 추출
       const originalRequest = error.config;
@@ -68,7 +68,11 @@ authAxios.interceptors.response.use(
       } catch (refreshError) {
         // 리프레시 토큰 에러 시 처리
         toastError('로그인 정보가 만료되었습니다. 다시 로그인 해주세요.');
-        onLogout();
+        setTimeout(() => {
+          onLogout();
+          clearUserInfo();
+          window.location.replace('/signin');
+        }, 2000);
         return Promise.reject(refreshError);
       }
     }