2026-02-11

JWT(JSON Web Token)란?

  • 로그인 상태를 증명하는 문자열
  • 서버가 서명한 “신분증”

  • 프론트는 내용을 믿지 말고, 전달만 한다

  • Access Token
    • 짧은 수명
    • API 요청할 때 사용
    • 프론트 메모리(전역상태)에 저장
  • Refresh Token
    • 긴 수명
    • Access 재발급용
    • HttpOnly 쿠키

Authorization 헤더

“Bearer” 빠지면 인증 실패 난다 (면접 단골)

Authorization: Bearer <accessToken>
  • axios 인터셉터에서 자동 처리
  • 모든 보호 API에 포함

토큰 만료(exp) 처리 개념

  • 프론트에서 하면 안 되는 것
    • exp 직접 계산해서 로그인 판단
    • “아직 안 만료됐으니까 괜찮겠지” 판단
  • 정석
    • 서버가 401 주면 → 만료로 간주
    • 프론트는 결과만 보고 대응 
      401 발생
→ refresh 요청
→ 성공: 재시도
→ 실패: 로그아웃

axios 인터셉터 개념

프론트 JWT 관리의 핵심은 인터셉터

  • Request 인터셉터
    • accessToken 자동 주입
  • Response 인터셉터
    • 401 감지
    • refresh 시도
    • 원래 요청 재시도

새로고침과 JWT

문제

  • accessToken은 메모리에 있음
  • 새로고침 → 사라짐 (로그아웃됨)

해결 (표준 패턴)

앱 시작 시
→ /auth/refresh 한 번 호출
→ accessToken 복구
→ 로그인 유지

로그아웃 처리

  1. 서버에 /auth/logout 요청
  2. accessToken 변수 제거
  3. 로그인 상태 초기화
  4. 로그인 페이지 이동

⇒ 프론트가 토큰을 버리는 순간 로그아웃

보안 관련

  • XSS
    • localStorage에 토큰 저장 X
    • 그래서 access는 메모리
  • CSRF
    • refreshToken을 쿠키로 쓰면 영향 있음
    • access를 헤더로 보내서 영향 최소화

조합: Access(헤더) + Refresh(쿠키)

전체 구현 과정 (프론트)

accessToken을 전역 상태(메모리)로 관리하고, 앱 시작 시 refresh로 복구한다. API 요청은 인터셉터에서 토큰을 자동 주입하며, 401 발생 시 refresh 후 원요청을 재시도하고 실패하면 로그아웃한다.

results matching ""

    No results matching ""