React 앱에서 Axios 인터셉터를 사용한 간편한 토큰 갱신

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보 React 개발자 및 프론트엔드 개발자
• 인증/인가 로직 구현에 어려움을 겪는 개발자
• 보안과 사용자 경험을 동시에 고려해야 하는 프로젝트 담당자
• 난이도: 초보자 중심 (Axios 인터셉터 기본 사용법 포함)

핵심 요약

• Axios 인터셉터를 사용해 401 에러 발생 시 자동 토큰 갱신 가능
• token rotation 기법으로 refresh token의 유효 기간을 제한해 보안 강화
• localStorage, sessionStorage, HttpOnly Cookie의 장단점 비교 및 안전한 선택 권장

섹션별 세부 요약

1. **토큰 갱신(TOKEN ROTATION) 기법**

• refresh token 사용 시마다 새로운 refresh token 발급
• 기존 refresh token이 유출 시 한 번만 사용 가능해 보안 강화
• 토큰 유효 기간 제한으로 인해 토큰 도용 위험 최소화

2. **Axios 인터셉터 구현**

• api.interceptors.response.use()로 401 에러 감지
• getTokens() 함수로 localStorage에서 토큰 불러오기
• setTokens() 함수로 갱신된 토큰 저장
• config.headers.Authorization에 새로운 access token 적용

3. **토큰 갱신 흐름**

• 사용자가 요청 시 access token 포함
• 401 에러 발생 시 refresh token으로 access token 재발급
• 성공 시 원래 요청 재시도, 실패 시 로그아웃 처리
• 사용자 인식 없이 자동 토큰 갱신

4. **토큰 저장 옵션 비교**

• localStorage
• 장점: 간단한 사용, 브라우저 재시작 시도 유지
• 단점: XSS 공격 취약
• sessionStorage
• 장점: 탭 닫기 시 자동 삭제 (보다 안전)
• 단점: XSS 공격 대비 약한 점 유지
• HttpOnly Cookie
• 장점: XSS 공격 대비 강한 보안, 자동으로 요청에 포함
• 단점: CSRF 보호 필요, 백엔드 설정 복잡

결론

• 보안 강화를 위해 HttpOnly Cookie 사용 권장 (CSRF 토큰 추가 필요)
• Axios 인터셉터 구현 시 response interceptor 활용
• 401 에러 처리 로직에 _retry 플래그 추가해 무한 재시도 방지
• 토큰 저장 방식 선택 시 보안/편의성 균형 고려 필수