브라우저의 저장소
Cookie(저장소)
1. 브라우저가 껐다 켜도 남아있음
2. 서버는 클라이언트의 모든 요청(API)에 대하여
cookie를 첨부하여 브라우저(사용자)로 전송한다.★★
3. 클라이언트의 쿠키 정보는 "항상" 서버에 전송됨★★
4. 추가옵션설정-쿠키의 만료시간, httpOnly, secure(https에서만 쿠키작동)
5. 쿠키는 "쿠키저장소"에 저장됨
localSorage
1.key-value 형태로 저장
2.로컬 환경에 데이터 저장
3.도메인 단위로 구분되며 활용 - http://localhost:5000/login , http://localhost:5000/user, http://localhost:5000/category
4. 브라우저, 탭을 종료해도 데이터가 남아 있음
sessionStorage
1.key-value 형태로 저장
2.로컬 환경에 데이터 저장
3.세선 단위로 구분되며 활용
4. 브라우저, 탭을 종료하면 영구 삭제
세션
사용자가 브라우저를 통해 웹 페이지에 접속한 시점부터,
해당 웹 페이지 접속을 종료하는 시점까지를 의미하는 단위
--------------------------------------------------------------------------------------------------
서버에서 보낸 accessToken은 클라이언트의 const, let 과 같은 변수에 저장된다.
따라서 Request Header의 Authorization(키)에 "Bearer + 토큰"을 넣어서 서버(벡엔드)에 accessToken을 보낼 수 있다.
서버는 클라이언트의 모든 요청(API)에 대하여 cookie를 첨부하여 브라우저(사용자)로 전송한다.
따라서 서버에서 보낸 refreshToken은 브라우저의 쿠키저장소에 저장된다.
AccessToken과 RefreshToken을 함께 사용하는 로직
1. 사용자가 로그인 정보를 입력하면(로그인API) 그 정보를 DB에서 조회한 후에 해당 사용자가 존재하면
//서버에서 refreshToken(=JWT)를 만들어서 브라우저에 쿠기에 담아서 보내주기
this.authService.setRefreshToken({ user, res: context.req.res });
//일치하는 유저가 있으면?! accessToken(=JWT)을 만들어서 브라우저에 전달하기
return this.authService.getAccessToken({ user });
2. 인가(Authorization)를 얻기 위해 벡엔드 서버측에 AccessToken전달
→인가 실패시 벡엔드 서버에서 브라우저에게 에러를 전송
3. 에러를 받은 브라우저는 벡엔드서버에 restoreAccessToken API를 요청함
4. refreshToken이 인가되면, 새로운 AccessToken을 벡엔드 서버에서 생성에서 브라우저 측에게 전달
1. 로그인 API 요청시 AccessToekn과 RefreshToken(만료기간 ↑) 발급
request정보, response정보, Http Header, Http Body 등에 관한 정보가 context() 함수에 모여있다.
따라서 context() 함수를 사용하면 request정보, response정보 등에 관한 정보를 얻을 수 있다.
참고로 request정보, response정보 안에 Http Header, HttpBody 등이 들어가 있다.
→context.res
또한 벡엔드 서버는 refreshToken을 Response Header에 쿠키(Cookie)를 넣어서 클라이언트 측으로 전송한다.
//Set-Cookie: "서버"에서 "클라이언트"로 쿠키 전달(응답)
//Response Header에 Set-Cookie을 담고
//Set-Cookie에 refreshToken을 담아서 전달(응답)
res.setHeader('Set-Cookie', `refreshToken=${refreshToken}`);
AccessToken이 만료된 경우 refreshToken인증을 통한 AccessToken 재발급
쿠키-보충설명
클라이언트(브라우저): 서버에 HTTP 요청 메시지를 보내고, 응답을 대기
서버: 클라이언트의 "HTTP 요청 메시지"에 대한 "HTTP 응답 메시지"를 만들어서 전송
쿠키의 필요성
HTTP는 무상태(Stateless) 프로토콜이다.
클라이언트와 서버가 요청과 응답을 주고 받으면 연결이 끊어진다.
클라이언트가 다시 요청하면 서버는 이전 요청을 기억하지 못한다.
클라리언트와 서버는 서로 상태를 유지하지 않는다.
쿠키를 사용하지 않는 경우
"홍길동"이 로그인한 후 welcome페이지를 요청하면 항상 "손님" 안녕하세요라는 메세지를 서버에서 전달
쿠키 헤더
Set-Cookie: 서버에서 클라이언트에게 쿠키 전달(응답)
Cookie: 클라이언트가 서버에서 받은 쿠키를 "쿠키 저장소"에 저장하고, Http요청시 서버로 전달
'고농축 백엔드' 카테고리의 다른 글
고농축 벡엔드 14 - 구글 인증 후 구글에서 받은 데이터를 DB에 저장 (0) | 2023.02.16 |
---|---|
고농축 벡엔드 13 - Google 로그인 (0) | 2023.02.14 |
고농축 벡엔드 11 - AccessToken과 Header의 Authorization// fetchUser() (0) | 2023.02.13 |
고농축 백엔드 docker-bind★★ (0) | 2023.01.31 |
고농축 벡엔드 10 - TypeScript (0) | 2023.01.30 |