🌍 토큰 관리 방법

1. web storage

브라우저를 통해 데이터를 저장한다.
DB에 저장되는 데이터와 달리 삭제되어도 상관 없는 소량의 데이터를 저장할 때 사용한다.
사용자에게 데이터 저장을 부담한다. 사용자의 하드웨어에 의존하는 소프트웨어 탄생 (용량은 5MB정도)
local storage와 session storage로 나뉜다.

1-1. local storage

웹 브라우저가 종료되어도 끝까지 남아있는다.
영구적인 스토리지이고, 다른 탭에서도 공유된다는 특징을 갖고 있다.
웹 도메인당 1개씩 상정되며, session storage와 다르게 새창을 띄워도 도메인만 같으면 동일한 데이터를 공유한다. 단, 다른 도메인의 local storage에는 접근이 불가하다.
ex) 비회원 로직, access token

1-2. session storage

브라우저가 종료되면 쉽게 사라진다.
새창 새탭의 단위로 스토리지 생성, 같은 탭이라도 도메인이 다르면 또다른 세션 스토리지를 생성한다.
일회성 스토리지이다.
만료 시간이 지나면 날아간다, 웹페이지 세션이 끝나면 데이터는 삭제된다.
탭마다 데이터를 공유하지 않고 격리되어 저장한다.

1-3. 사용 방법

setItem(key, value) → key, value를 쌍으로 저장
getItem(key) → 해당 key 조회
removeItem(key) → 해당 key 삭제
clear() → 모든 데이터 삭제
length → 키, 값 쌍의 개수

2. 쿠키 🍪

1. 브라우저에 저장된 key-value 형식의 문자열 파일  
2. 따로 설정해주지 않아도 서버와의 데이터 교환이 가능하다 
3. https, secure 옵션을 통해서 https 환경에서만 교환이 가능하거나, 외부에서 접근이 불가능 하도록 설정이 가능하다
4. 브라우저가 닫히면 삭제된다, but 유효기간을 명시하면 닫혀도 삭제되지 않는다. 
ex) refresh token, session-id, 자동로그인, 팝업창 3일간 보지않기

3. state(비추)

보안이 별로 중요하지 않거나, 화면을 끄면 로그인이 종료되는 경우
ex) 로그인이 완료되었을 대 실행해야하는 로직이 있고, 그 로직이 ui를 변경시켜야 한다면?
1. 새로고침, 페이지 이동 → 페이지 깜빡임이 존재
2. 전역상태로 가지고 있는 것 → 새로고침을 하는 게 아니고, 전역상태로 state를 관리함으로써 ui변경. ui는 state가 아니다, session storage, local stage 모두 state가 아니다. 그냥 value일 뿐이다.

JSON Token의 장점

• 서버 쪽의 데이터를 주고 받을 수 있다.
• 거의 모든 곳에 토큰 생성이 가능하고, 서버에서 토큰을 확인할 필요가 없다.
• 그러나, 시크릿 키 하나가 어긋나도 고장이 난다.
• 별도의 저장소에 정보를 저장해둘 필요가 없다.

BACK -> FRONT

1. res.body → res의 body 값으로 전달 
2. res.header
3. cookies로 전달

FRONT -> BACK

1. res.body 
2. cookies 
→ axios 인스턴스 생성시 withCredential = true
이렇게 넣어주면 서버 간의 토큰에서 키를 서로 교환 가능하도록 해준다. 
3. res.header
→ axios interceptor 
→ axios 인스턴스 생성시 default value로 넣어줄 수 있다.