1. 세션 vs 토큰
1) 세션 id를 이용하는 방식 (세션 기반 인증 시스템)
유저가 로그인할 때 서버는 세션을 생성한 후, 그 세션의 id를 클라이언트에 보내준다.
클라이언트는 이 id를 브라우저에 저장해두었다가 인증이 필요한 데이터를 가져올 때 서버에 id값을 같이 보내면
서버는 그 id를 통해 세션 데이터베이스에서 이 세션이 유효한지 확인하는 방식으로 인증한다.
2) JWT를 이용하는 방식 (토큰 기반 인증 시스템)
유저가 로그인할 때 서버가 인증 정보를 보내주는데 (사진 참고), 암호화나 시그니처 추가가 가능한 데이터 패키지 안에 인증 정보를 담아서 보내준다. (세션보다 정보가 많음) 이 패키지가 JWT(JSON Web Token) 이다.
여기서 담기는 정보 중 accessToken과 refreshTokㅌen이 이후의 유저 인증에 사용된다. 이 정보들을 클라이언트에 저장해둔다.
이 accessToken을 받은 서버는 그 토큰이 유효한지 확인하는 방식으로 인증한다.
2. 로그인 절차 JWT이용
클라이언트에서 보관하는 암호화된 인증정보이며 세션처럼 서버에서 사용자 인증 정보를 보관할 필요가 없기 때문에 서버의 부담을 줄여준다. 서버 Scale out 이 용이하다.
웹에서 인증 수단으로 사용되는 토큰은 주로 JWT를 이용한다.
- JWT에는 accessToken과 refreshToken이 존재하며 유저인증에 사용된다. 실질적인 인증 정보는 accessToken에 있지만, 일정 시간이 지나면 만료되는 구조를 갖는다.
- refreshToken과 accessToken은 클라이언트에 저장되는데, accessToken은 일정 시간 뒤에는 만료되기 때문에 refreshToken을 이용해 로그인을 지속적으로 유지할 수 있다.
- 즉 refreshToken을 서버에 보내면 그때마다 새로운 accessToken을 발급해 돌려주는 구조이다.
Reference:
[React] Cookie + JWT + axios 이용하여 JWT 인증하기.
오늘은 React로 axios와 cookie를 활용하여 JWT를 구현해보자. 순서는 아래의 이미지와 같다. 1. 로그인 요청 2. AccessToken 응답 3. AccessToken을 Cookie에 저장 4. API 요청 보낼 때 Header에 AccessToken을 담아서 보
pinomaker.com
https://5xjin.github.io/blog/react_jwt_router/
[React17]React에서 JWT 인증 구현하기
React에서 JWT를 이용하여 로그인, 로그아웃 기능 구현하기
5xJIN.github.io
'Computer Programming > CS' 카테고리의 다른 글
| CPU와 메모리 그리고 M1, M2 chip (0) | 2023.07.07 |
|---|---|
| 'www.google.com'을 브라우저 주소창에 입력하면 일어나는 일 (웹의 동작 방식) (0) | 2023.07.03 |
| 페이지 렌더링 방식 : SSR vs CSR vs SSG [+Next.js] (3) | 2023.06.23 |
| 자바스크립트의 클로저 동작 방식 (렉시컬환경과 렉시컬 스코프) (0) | 2023.06.21 |
| [DB] SQL 과 NoSQL의 차이 (MySQL vs MongoDB) (0) | 2023.05.10 |
