로컬스토리지,세션스토리지
- 로컬 스토리지와 세션스토리지는 html5에 추가된 저장소이다
- 로컬스토리지와 세션 스토리지의 차이점은 영구성이다.
- 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다.
- 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됨
ex) 자동 로그인 (로컬스토리지) , 일회성 로그인 정보 (세션 스토리지)
로컬 스토리지 : 1. window.localStorage에 위치 ,키 밸루 저장소
2.값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환, 키도 문자열로 변환
세션 스토리지 : 1.window.sessionStorage에 위치 2.컬스토리지와는 다르게 데이터가 영구적으로 보관되지 않음
쿠키 : 웹사이트에 의해 유저의 컴퓨터에 놓여지는 작은 텍스트 파일, 만료 기한이 있는 키-값 저장소, 로컬스토리지와 세션스토리지 나오기 이전에 브라우저 저장소 역할을 했음
최대 4kb의 용량을 가진 매우 작은 양의 데이터 ,사이트에 방문한 페이즈를 저장하거나 유저의 로그인 정보를 저장하는 등 사용 , 문자열만 저장 할 수 있음
- persistent cookies:만료일 있음 , 만료일까지 유저의 디스크에 저장되고 만료일 지나면 삭제, 유저들의 방문할때마다 경험을 커스텀 하기 위해 특정 웹사이트에서 행동을 기록하는 식으로
여러 활동에 사용 될 수 있음 - session cookies: 만료일이 포함되지 않음, 브라우저나 탭이 열려있는 동안에만 저장,
브라우저가 닫히면 영구적으로 삭제 , 은행에서 사용 됨
JWT 사용하는 과정
토큰 : 서버가 기억하는 텍스트 , ID 카드처럼 서버에게 보여줘야함
JWT : 정보를 가지고 있는 토큰 , DB없이 검증 할 수 있음
클라이언트의 필요한 정보를 토큰의 BODY에 저장해 클라이언트가 가지고
있고 그것을 증명서처럼 활용 하는 것
기본 구조 :xxxx. yyyy.zzzz
Header (xxxx) : JWT인 토큰의 유형이나 HMAC SHA256 또는 RSA와 같이 사용되는 해시 알고리즘이 무엇으로 사용했는지 등 정보가 담긴다. Base64Url로 인코딩되어있다.
payload(yyyy): 클라이언트에 대한 정보나, meta Data같은 내용이 들어있고, Base64Url로 인코딩되어있다.
signature(zzzz):header에서 지정한 알고리즘과 secret 키, 서명으로 payload와 header를 담는다.
인증과정 :
- 클라이언트가 로그인을 하면 서버로 부터 ACCESS 토큰을 부여받는다.
- 이후 클라이언트가 모든 API를 요청할때 ACCESS 토큰을 포함시킨다
- 서버는 ACCESS 토큰을 해독해 확인하고, 검증되면 API 기능을 수행
- 기한이 만료되면 ACCESS 토큰을 지워주고, 재로그인
문제점
-
Access 토큰 기한이 만료되면 사용중에 재로그인 하라고 할것이다.
-
수명이 짧으면 만료 될때마다 로그인 해줘야 됨
-
수명이 길면 해커에게 해독되어질 가능성이 있으며, 비밀번호는 저장하지 않는 것이 좋음
-
기한이 만료되면 refresh 토큰으로 새로운 토큰을 받으면 된다.
-
서비스가 커져서 따로 관리를 해야 될때는 JWT가 아닌 세션을 통해서
DB로 관리해야됨
참고: https://yonghyunlee.gitlab.io/node/jwt/
https://www.youtube.com/watch?v=tosLBcAX1vk
