반응형
JWT 인증에서 Access Token 자동 갱신 구현 (Axios 기반)
JWT 기반 인증을 사용할 때 Access Token은 일반적으로 짧은 만료 시간을 가집니다. 이는 보안을 강화하기 위한 전략이지만, 토큰이 만료될 때마다 사용자가 다시 로그인해야 한다면 UX는 매우 나빠지겠죠. 이를 해결하기 위해 Refresh Token을 이용한 자동 갱신 방식이 널리 사용됩니다.
이 글에서는 프론트엔드에서 Access Token이 만료되었을 때, 자동으로 /auth/refresh 엔드포인트를 호출해 토큰을 갱신하고 요청을 재시도하는 구현 방법을 설명합니다.
✅ 사용 기술: Axios + JWT + HttpOnly 쿠키 기반 인증
🎯 구현 목표
- API 요청 도중 Access Token이 만료되면 자동으로 /auth/refresh 호출
- 새 Access Token을 발급받고, 기존 실패한 요청을 재시도
- Refresh Token은 HttpOnly 쿠키에 저장되어 자동 포함됨
- Refresh 실패 시 로그아웃 처리
🔧 Axios 인스턴스 생성 및 인터셉터 설정
import axios from 'axios';
const api = axios.create({
baseURL: 'https://your-api.com',
withCredentials: true, // 쿠키 포함 필수 설정
});
let isRefreshing = false;
let failedQueue: any[] = [];
const processQueue = (error: any, token: string | null = null) => {
failedQueue.forEach(prom => {
if (error) prom.reject(error);
else prom.resolve(token);
});
failedQueue = [];
};
api.interceptors.response.use(
res => res,
async err => {
const originalRequest = err.config;
if (err.response?.status === 401 && !originalRequest._retry) {
if (isRefreshing) {
return new Promise((resolve, reject) => {
failedQueue.push({ resolve, reject });
}).then(() => api(originalRequest));
}
originalRequest._retry = true;
isRefreshing = true;
try {
await api.post('/auth/refresh'); // Refresh Token은 쿠키에 자동 포함됨
processQueue(null);
return api(originalRequest); // 실패한 요청 재시도
} catch (refreshError) {
processQueue(refreshError, null);
window.location.href = '/login'; // 리프레시 실패 시 로그아웃 처리
return Promise.reject(refreshError);
} finally {
isRefreshing = false;
}
}
return Promise.reject(err);
}
);
export default api;🔁 흐름 정리
- 유저가 API 요청을 보냄
- 서버가 Access Token 만료로 401 Unauthorized 응답
- Axios 인터셉터가 이를 감지하고 /auth/refresh 호출
- Refresh Token은 HttpOnly 쿠키에 자동 포함됨
- 새 Access Token이 발급되면 원래 요청을 재시도
- Refresh 실패 시 로그인 페이지로 이동
✅ 보안 고려 사항
항목설명
| withCredentials: true | 쿠키를 요청에 포함하려면 반드시 설정 |
| HttpOnly 쿠키 | JS에서 토큰 접근 불가 → XSS 방어 |
| SameSite=Strict 또는 Lax | CSRF 방어용 쿠키 설정 |
| Refresh Token 저장 위치 | 반드시 쿠키 (localStorage 금지) |
| Refresh 실패 시 처리 | 로그아웃 처리 or 알림 후 로그인 페이지 이동 |
🧠 마무리
Axios 인터셉터를 활용하면 토큰 갱신 로직을 모든 요청에 일관되게 적용할 수 있어, 보안과 UX 모두를 만족시키는 인증 흐름을 만들 수 있습니다.
'컴퓨터 > JWT' 카테고리의 다른 글
| 쿠키(Cookie) 옵션 완벽 정리 (0) | 2025.05.19 |
|---|
