[클론코딩] 마켓컬리

hoya.a·2022년 4월 17일
0

항해99

목록 보기
16/24

새로운 주차에는 주제가 클론코딩이였다. 주된 기능으로는 로그인,회원가입, 메인페이지, 장바구니 정도가 있었는데 저번주차에 실력이 많이 부족해 같은 팀원의 배려로 개인공부에 더 집중할 수 있었다. 그걸 바탕으로 이번에 맡게된 로그인, 회원가입 기능을 열심히 구현중이다.

현재 css는 어느정도 끝낸 상태이고 열심히 공부한 리덕스를 입힐 차례다. 그전에 필요한 지식을 정리해볼게요

1. 토큰의 기본 흐름

클라이언트의 저장된 토큰은 게시글쓰기, 보기 등등 활동을 하면 서버에 토큰과 같이 요청을 보낸다. 그러면 서버는 토큰을 확인하고 유저정보와 일치하면 권한을 준다.

2. 토큰기반 인증 방법

방법에는 두가지가 있다.
OAuth 2.0 과 JWT가 있는데 내가 사용할 방법은 JWT니까 JWT에 대해 정리함

JWT(Json Web Token)

  • 변조여부 판단하는 전자서명이 포함된 토큰

생김새 : [header].[payload].[signater]

header : 토큰타입 암호화방식
payload : 토큰에 담을 정보가 key:value 쌍으로 들어간다.
signater : 서명정보

header & payload : 내용정보가 암호화되서 들어간다.

  • 동작방식 : 토큰기반 동작방식이다.
  1. 사용자가 로그인시도를 하면
  2. 서버는 secret key 를 가지고
  3. access_token을 발급해서 사용자에 전달한다.
  4. 클라이언트는 API용청 할 때 Authorization Header(HTTP 통신을 할 때 header에 들어가는 것) 라는곳에 JWT를 담아서 보낸다.
  5. 서버는 JWT 안에 서명을 확인하고 payload에서 정보를 확인후에 API 응답을 한다.

3. 웹 저장소

서버에서 토큰을 받으면 저장할 곳이 필요!

클라이언트에도 저장소가 있다.

  • 토큰도 저장 하지만 정보저장에 많이 쓴다. ex)장바구니

클라이언트 저장소 종류

1.쿠키 : 클라이언트 로컬에 저장되는 key:value 형태 저장소

2.세션 스토리지

  • key:value 형태
  • 브라우저를 닫으면 제거됨
  • 자동 로그인, 장바구니 같은 곳에 사용 못함

3.로컬 스토리지

  • 브라우저를 닫아도 삭제가 되지 않는다.
  • 삭제를 해주어야 사라진다.
profile
TIL 정리

0개의 댓글