Merge pull request #161 from prgrms-web-devcourse-final-project/fix/157-reissue-token

[feat] 토큰 재발급 로직 추가

Author: yoo-nji

dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.uiau2f3o4b"
+    "revision": "0.2ufi9jpmuo"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/apis/auth.ts

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { axiosInstance } from './axios';
 import { useAuthStore } from '@/store/authStore';
 
@@ -19,37 +20,21 @@ export const login = async (loginId: string, password: string) => {
 // 로그아웃
 export const postLogout = async () => {
   const { data } = await axiosInstance.post('/auth/logout');
-  // useAuthStore.getState().logout(); // 전역 상태 초기화
-  // window.location.href = '/'; // 랜딩 페이지로 이동
   return data;
 };
 
 // 토큰 재발급
 export const reissueToken = async () => {
-  const { data } = await axiosInstance.post('/auth/token');
-  console.log('토큰 재발급:', data);
-
-  if (data.data === null) return; // AT 토큰이 아직 유효하면 리턴
+  const { data } = await axios.post('/api/auth/token', {
+    withCredentials: true,
+  });
 
   const accessToken = data.data.accessToken; // 새로운 AT
-  const code = data.code; // 200: 성공, 400: 실패
+  const code = data.code; // 200: 성공
 
   if (code === 200) {
     useAuthStore.getState().setAccessToken(accessToken); // 토큰 전역 상태 저장
     console.log('토큰 재발급 성공:', accessToken);
   }
-
-  if (code === 400) {
-    // useAuthStore.getState().logout(); // 전역 상태 초기화
-    console.log('토큰 재발급 실패:', data);
-    // window.location.href = '/'; // 랜딩 페이지로 이동
-  }
-
-  // 유효하지 않은 토큰
-  if (code === 401) {
-    // useAuthStore.getState().logout(); // 전역 상태 초기화
-    console.log('유효하지 않은 토큰:', data);
-    // window.location.href = '/'; // 랜딩 페이지로 이동
-  }
   return data;
 };

src/apis/axios.ts

@@ -15,7 +15,7 @@ axiosInstance.interceptors.request.use(
     // 토큰이 있으면 요청 헤더에 추가
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
-      console.log('요청 헤더에 Authorization 추가됨:', config.headers);
+      // console.log('요청 헤더에 Authorization 추가됨:', config.headers);
     }
     return config;
   },
@@ -26,31 +26,29 @@ axiosInstance.interceptors.request.use(
 );
 
 // 응답 인터셉터
-// axiosInstance.interceptors.response.use(
-//   (response) => response,
-//   async (error) => {
-//     console.log('응답 인터셉터');
-//     // 응답 에러 처리
-//     const originalRequest = error.config; // 실패한 요청 정보 저장
-//     console.log('요청 실패:', originalRequest);
-//     if (!originalRequest) return Promise.reject(error); // 요청 정보 자체가 아예 없을 경우 종료
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    // 응답 에러 처리
+    const originalRequest = error.config; // 실패한 요청 정보 저장
 
-//     // AT 토큰 만료 시
-//     if (error.response.status === 403 && !originalRequest._retry) {
-//       originalRequest._retry = true; // 재시도 방지
+    // AT 토큰 만료 시
+    if (error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true; // 재시도 방지
 
-//       console.log('토큰 만료', originalRequest);
-//       try {
-//         await reissueToken(); // 토큰 재발급 요청
-//         return axiosInstance(originalRequest); // 원래 요청 다시 시도
-//       } catch (error) {
-//         console.error('AT 토큰 재발급 실패:', error);
-//         return Promise.reject(error);
-//       }
-//     }
-//     return Promise.reject(error);
-//   },
-// );
+      try {
+        await reissueToken(); // 토큰 재발급 요청
+        return axiosInstance(originalRequest); // 원래 요청 다시 시도
+      } catch (error) {
+        useAuthStore.persist.clearStorage();
+        console.error('AT 토큰 재발급 실패:', error);
+
+        return Promise.reject(error);
+      }
+    }
+    return Promise.reject(error);
+  },
+);
 
 // .env에 추가하기
 // VITE_API_URL=http://43.203.98.65:8080