세션 로그인 방식
기존 로그인을 구현 할 때는,
브라우저에서 email, password로 로그인 시, 백에서는 Backend세션에 저장 후
특정 세션ID를 클라이언트로 보내주고, 로그인을 해야만 사용 가능한 api를 보낼 때 이와 함께 요청을 하게 되며,
이 요청의 세션ID를 확인하고 유저를 파악하고, 로그인 한 유저인지 아닌지를 판단한 뒤 에러나 응답을 보내는 방식으로 구현했다.
이와 같이 구현 시 단점은 동시 접속자가 많아질 경우 백의 메모리가 부족해지면 서버가 터지는 등의 문제가 발생했다.
그 때문에 서버의 컴퓨터를 계속 scale-up을 해야하는 단점이 있었다.
JWT
현재 국룰로 사용되는 방식이며,
유저의 정보를 담은 객체를 암호화한 토큰을 브라우저에 전달 -> 브라우저 저장소에 저장 후
요청과 함께 이 토큰을 보내면 서버에서 암호를 보호화 후 식별, 접근이 가능하게 하는 방식
jwt 구성은
header: token의 타입, 암호화사용 알고리즘 정보,
payload: 토큰 발행정보(유저정보, 발행 시간, 만료 시간)
signature: 토큰 비밀번호
https://jwt.io/
해당 사이트에서 jwt토큰을 Encoded에 넣어보면 사용자의 정보를 보는 것이 가능하다.
해서 중요 정보는 안에 넣으면 안되지만
signature라는 토큰 비밀 번호덕분에 그 내용을 조작할 수는 없다.
Web Storage(브라우저 저장소)
HTML5부터 지원하는 기능으로, 클라이언트의 브라우저 내에 데이터를 저장하는 기능이다.
key/value로 저장하고 도메인 단위로 접근한다.
Cookie하고 비슷함 ㅇㅇ
영구저장소(LocalStorage), 임시저장소(SessionStorage)로 두가지를 지원해서, 용도에 따라서 사용 하면된다.
저장된 데이터는 클라이언트에만 존재하며, 서버로 전송하지 않아서 트래픽이 줄어듬
문자열이나, 숫자처럼 단순한 데이터 뿐만 아니라 객체도 저장이 가능함
LocalStorage
- 도메인마다 별도 저장소
- 지우기 전에는 브라우저 꺼도 영구적으로 데이터 보관
- 도메인이 같으면, 전역 공유 가능
- Windows 전역 객체 안에 SessionStorage로 저장, 조회
SessionStorage
- 브라우저가 닫히면 삭제, 새로고침은 유지
- 같은 도메인이어도 브라우저가 다르면(다른 브라우저 컨텍스트면), 서로 다른 저장소
- Windows 전역 객체 안에 SessionStorage로 저장, 조회
Web Storage VS Cookie
- 쿠키의 모든 데이터는 Request에 포함되어 요청, 응답 시 트래픽 증가
- 쿠키는 4KB 용량과 브라우저 당 최대 300개, 하나의 도메인에서는 최대 20개만 저장이 가능하지만, Web Storage는 이와같은 제한이 없음
- 쿠키에는 만료 시간의 정보를 저장해야한다. 안하면 SessionCookie가 된다.
하지만, WebStorage는 이와같은 제한이 없으며, 영구적인 데이터 저장이 가능하다.
node국룰 인증 라이브러리인 passport는 nest에서도 제공한다.
설치
> npm install --save @nestjs/passport passport passport-local
> npm install --save-dev @types/passport-local