Storage와 Token

아는 만큼 적는다

---

Storage

• storage = 저장소
• 종류는 크게 쿠키, 웹 스토리지(로컬∙세션, html5부터 지원)가 있다

쿠키(Cookies)

document.cookie = "name=value; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

• 모든 브라우저 지원
• 만료 기간이 있는 저장소
  쿠키의 만료 기간(Expires 또는 Max-Age)을 설정하여 유효 기간을 정할 수 있음
  만료 기간을 설정하면 해당 일자까지 유지되며,
  만료 기간을 설정하지 않으면 브라우저 세션(브라우저를 닫을 때까지) 동안만 유지됨
• 서버가 클라이언트에게 전송하는 작은 데이터 파일
  (이름, 값, 만료 일자, 도메인 정보, 만료 일자 등으로 구성)
• 데이터가 매번 서버에 전송됨
• 작은 텍스트 파일로 저장 용량 작음(최대 4KB)
• 보안에 취약함
• 사용 예시 : 다시 보지 않기 팝업 창

웹 스토리지(Web storage)

localStorage.setItem("key", "value");

• 웹스토리지는 클라이언트에 저장만 할 뿐 서버에 전송되진 않음
• 키-값 형태로 데이터 저장
• 웹 스토리지는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있음
• 지속성에 따라 로컬, 세션 사용이 나뉨
  • 로컬 스토리지(Local Storage)
    • 브라우저 자체에 영구적으로 데이터를 저장하고 브라우저를 종료해도 데이터가 유지됨
    • 최대 5MB까지 저장 가능
    • 사용 예시 : 자동 로그인
  • 세션 스토리지(Session Storage)
    • 윈도우 탭 단위로 생성
    • 윈도우 탭을 닫으면 데이터도 사라짐
    • 사용 예시 : 입력 폼 정보, 비로그인 장바구니

Token

Access 토큰

• 사용자 인증에 사용되는 토큰으로, 일반적으로 짧은 유효 기간을 갖음
• 사용자의 로그인 상태를 서버에 저장하지 않고, 클라이언트 측에서 보관
  보통 쿠키 또는 로컬 스토리지에 저장
• Access 토큰의 유효 기간이 만료되면, Refresh 토큰을 사용하여 새로운 Access 토큰을 발급받음

Refresh 토큰

• 일반적으로 Access 토큰보다 더 긴 유효 기간을 갖음
  주로 웹 애플리케이션의 로그인 상태를 지속적으로 유지하기 위해 사용
• 서버는 Refresh 토큰을 저장하고 Access 토큰의 유효 기간이 만료되면, 클라이언트는 Refresh 토큰을 서버로 전송하여 새로운 Access 토큰을 발급받음
  이를 통해 유저는 자동으로 로그인 상태를 유지할 수 있고, 서버는 보안적으로 토큰을 관리할 수 있음

Access 토큰과 Refresh 토큰을 사용하여 로그인 상태를 유지하는 간단한 플로우

1. 로그인
   • 사용자가 로그인 정보(아이디와 비밀번호)를 제출하여 서버로 보냄
   • 서버는 사용자 정보를 검증하고 유효한 경우 Access 토큰과 Refresh 토큰을 발급하여 클라이언트에게 전달

2. Access 토큰
   • Access 토큰은 사용자가 로그인 상태를 유지하는데 사용됨
   • Access 토큰은 일반적으로 짧은 유효 기간(예: 몇 분에서 몇 시간)을 갖고 있음
   • 클라이언트(웹 앱 또는 모바일 앱)는 Access 토큰을 쿠키 또는 로컬 스토리지에 저장

3. Refresh 토큰
   • Refresh 토큰은 Access 토큰의 유효 기간이 만료된 경우, 새로운 Access 토큰을 발급받는데 사용됨
   • 클라이언트는 Access 토큰이 만료되면 Refresh 토큰을 사용하여 서버에 새로운 Access 토큰을 요청함
   • 서버는 Refresh 토큰을 검증하고, 유효한 경우 새로운 Access 토큰을 발급하여 클라이언트에게 전달

4. 로그아웃
   • 사용자가 로그아웃을 요청하면, 클라이언트는 Access 토큰과 Refresh 토큰을 모두 삭제하여 로그인 상태를 해제
   • 로그아웃 시 클라이언트는 서버에도 로그아웃 요청을 보내서 서버 측에서도 세션을 해제하는 것이 좋음

Refresh 토큰과 Access 토큰을 사용하여 로그인 상태를 유지하고,
Access 토큰의 유효 기간이 만료되었을 때 새로운 Access 토큰을 발급받는 방식으로 사용자 로그인 상태를 관리한다.