fix: refreshToken active
All checks were successful
Deploy blog-frontend / build-and-deploy (push) Successful in 1m45s

This commit is contained in:
ParkWonYeop
2025-12-27 17:29:41 +09:00
parent d5e9e22dbc
commit 00616ed514
2 changed files with 36 additions and 28 deletions

View File

@@ -9,7 +9,7 @@ export const http = axios.create({
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
withCredentials: true, // 쿠키(RefreshToken) 전송을 위해 필수 withCredentials: true, // 쿠키 전송 허용 (필요 시)
}); });
// 1. 요청 인터셉터: 헤더에 AccessToken 주입 // 1. 요청 인터셉터: 헤더에 AccessToken 주입
@@ -40,14 +40,14 @@ const processQueue = (error: any, token: string | null = null) => {
failedQueue = []; failedQueue = [];
}; };
// 2. 응답 인터셉터: 401 또는 403 발생 시 토큰 갱신 // 2. 응답 인터셉터: 401 발생 시 토큰 갱신 (RTR 적용)
http.interceptors.response.use( http.interceptors.response.use(
(response) => response, (response) => response,
async (error) => { async (error) => {
const originalRequest = error.config; const originalRequest = error.config;
const status = error.response?.status; // 응답 상태 코드 확인 const status = error.response?.status;
// 401(Unauthorized) 또는 403(Forbidden) 에러이고, 아직 재시도하지 않은 요청인 경우 // 401(Unauthorized) 에러이고, 아직 재시도하지 않은 요청인 경우
if ((status === 401 || status === 403) && !originalRequest._retry) { if ((status === 401 || status === 403) && !originalRequest._retry) {
// 이미 갱신 중이라면 큐에 넣고 대기 // 이미 갱신 중이라면 큐에 넣고 대기
if (isRefreshing) { if (isRefreshing) {
@@ -55,7 +55,6 @@ http.interceptors.response.use(
failedQueue.push({ resolve, reject }); failedQueue.push({ resolve, reject });
}) })
.then((token) => { .then((token) => {
// 대기하던 요청들도 새 토큰으로 헤더 교체 후 재시도
if (originalRequest.headers) { if (originalRequest.headers) {
originalRequest.headers['Authorization'] = `Bearer ${token}`; originalRequest.headers['Authorization'] = `Bearer ${token}`;
} }
@@ -64,47 +63,56 @@ http.interceptors.response.use(
.catch((err) => Promise.reject(err)); .catch((err) => Promise.reject(err));
} }
originalRequest._retry = true; // 재시도 플래그 설정 (무한 루프 방지) originalRequest._retry = true;
isRefreshing = true; isRefreshing = true;
try { try {
const { refreshToken, login, logout } = useAuthStore.getState(); const { accessToken, refreshToken, login, logout } = useAuthStore.getState();
// RefreshToken이 없으면 갱신 시도 없이 바로 로그아웃 // AccessToken이나 RefreshToken이 없으면 갱신 불가능 -> 로그아웃
if (!refreshToken) { if (!accessToken || !refreshToken) {
throw new Error('No refresh token available'); throw new Error('Tokens are missing for reissue');
} }
// 🛠️ 토큰 갱신 요청 // 🛠️ 토큰 갱신 요청 (Backend: POST /api/auth/reissue)
// 중요: refresh 요청도 쿠키/CORS 처리를 위해 withCredentials: true 추가 // 백엔드 ReissueRequest 구조: { accessToken, refreshToken }
const { data } = await axios.post( const { data } = await axios.post(
`${BASE_URL}/api/auth/refresh`, `${BASE_URL}/api/auth/reissue`,
{ refreshToken }, {
{ withCredentials: true } accessToken,
refreshToken
},
{
headers: { 'Content-Type': 'application/json' },
withCredentials: true
}
); );
// 새 토큰 저장 // RTR(Refresh Token Rotation) 적용:
// 백엔드에서 AccessToken 뿐만 아니라 새로운 RefreshToken도 줍니다.
const newAccessToken = data.data.accessToken; const newAccessToken = data.data.accessToken;
const newRefreshToken = data.data.refreshToken || refreshToken; const newRefreshToken = data.data.refreshToken;
login(newAccessToken, newRefreshToken); // 스토어 업데이트 // Zustand 스토어에 새 토큰 쌍 업데이트
login(newAccessToken, newRefreshToken);
// 큐에 대기 중이던 요청들 처리 (새 토큰 전달) // 큐에 대기 중이던 요청들 처리
processQueue(null, newAccessToken); processQueue(null, newAccessToken);
// 실패했던 원래 요청 재시도 (헤더 안전하게 교체) // 실패했던 원래 요청 재시도
if (originalRequest.headers) { if (originalRequest.headers) {
originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`; originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
} }
return http(originalRequest); return http(originalRequest);
} catch (refreshError) { } catch (refreshError) {
// 갱신 실패 로그아웃 및 큐 정 // 갱신 실패 (RefreshToken 만료/위변조 등) -> 로그아웃
processQueue(refreshError, null); processQueue(refreshError, null);
useAuthStore.getState().logout(); useAuthStore.getState().logout();
// 브라우저 환경에서만 로그인 페이지로 이동 // 브라우저 환경인 경우 로그인 페이지로 리다이렉트
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
// alert('세션이 만료되었습니다. 다시 로그인해주세요.');
window.location.href = '/login'; window.location.href = '/login';
} }
return Promise.reject(refreshError); return Promise.reject(refreshError);

View File

@@ -6,8 +6,8 @@ import Sidebar from '@/components/layout/Sidebar';
import TopHeader from '@/components/layout/TopHeader'; // 👈 import 추가 import TopHeader from '@/components/layout/TopHeader'; // 👈 import 추가
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Dev Park Blog', title: 'WYPark Blog',
description: '개발 기록 블로그', description: '개발 블로그',
}; };
export default function RootLayout({ export default function RootLayout({