[Web] jwt 작동 원리

2022. 11. 8.·🎨 프론트엔드 공부/기타

작동 원리

1. 클라이언트에서 유저가 credentials(아이디, 비밀번호) 로 서비스에 로그인

2. 서버는 서명된 JWT를 생성하고 response에 넣어 반환

3. 클라이언트에서 서버에 추가적인 요청을 보낼 때, JWT를 HTTP header에 첨부

4. 서버는 클라이언트에서 온 JWT를 검증하고 데이터 반

 

로그인 성공 -> JWT 반환

- 인증(authentication) 과정에서 유저가 로그인에 성공하면, JWT가 반환된다

- 이때, 토큰은 보안 문제를 방지하기 위한 세심한 주의가 필요하다

 

토큰 관련 주의사항

- 토큰은 가능한 짧게 보관하는 것이 좋다 (탈취당하는 것을 막기 위해)

- 토큰을 브라우저 저장소(로컬 스토리지 or 세션 스토리지 등) 에 저장하면 안된다

 

토큰 형태

- 유저가 보호되는 경로 (protected route) 또는 리소스에 접근하려고 할 때마다 JWT를 보내야 한다.

- JWT는 header의 Authorization에 위치

- 형태 : Authorization: Bearer <token>

 

토큰이 Authorization header로 보내지면, 쿠키를 사용하지 않기 때문에, CORS 에러에서 자유롭다

'🎨 프론트엔드 공부/기타' 카테고리의 다른 글
  • ESLint & Prettier for React & TypeScript
  • Vite - 매우 빠른 React 개발 환경
  • [Web] jwt 소개
  • 02 - 리졸버 (resolver)
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (516)
      • 🎨 프론트엔드 공부 (253)
        • JS & TS (92)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
[Web] jwt 작동 원리
상단으로

티스토리툴바