피드로 돌아가기
Dev.toFrontend
원문 읽기
Axios Interceptor 기반의 자동 Token Refresh 및 Auth Context 설계
Day 91 of #100DaysOfCode — DevCollab: Next.js Setup and Authentication
AI 요약
Context
Next.js 기반 프론트엔드 초기 구축 단계에서 인증 상태 관리와 API 통신 효율화 필요성 제기. 컴포넌트마다 반복되는 Token 검증 로직과 수동한 Header 설정으로 인한 코드 중복 및 유지보수 비용 증가 가능성 식별.
Technical Solution
- Centralized Axios Instance 설계를 통한 모든 API 요청의 단일 진입점 구축 및 환경 변수 기반의 Base URL 관리
- Request Interceptor를 활용해 localStorage의 Access Token을 Authorization Header에 자동 주입하는 구조 설계
- Response Interceptor에서 401 Unauthorized 에러 감지 시 Refresh Token을 이용해 Access Token을 갱신하고 실패한 요청을 재시도하는 투명한 인증 메커니즘 구현
- Auth Context와 Custom Hook(useAuth)을 통한 전역 인증 상태 전파로 Prop Drilling 제거 및 상태 접근 최적화
- ProtectedRoute 컴포넌트를 활용한 Client-side Guard 구현 및 로그인 전 페이지 진입 차단 로직 적용
- 서비스 계층(services/) 분리를 통해 Token 저장소 변경(localStorage → httpOnly Cookie) 시 영향 범위를 최소화하는 캡슐화 전략 채택
실천 포인트
- API 통신 시 공통 로직(인증, 에러 핸들링)은 Interceptor로 추상화하여 컴포넌트 비즈니스 로직과 분리할 것 - 인증 상태는 Context API와 Custom Hook으로 래핑하여 컴포넌트의 의존성을 낮추고 가독성을 높일 것 - 인증 필요 페이지는 고차 컴포넌트(HOC)나 Wrapper 컴포넌트로 보호하여 중복 검증 로직을 제거할 것 - 환경 변수 설정 시 .env.local.example 파일을 제공하여 팀원 간의 인프라 설정 동기화를 자동화할 것