Axios Interceptors

 

 

 

1. Access Token (액세스 토큰) - 로컬 스토리지에 저장

• 역할: Access Token은 사용자가 인증된 상태임을 증명하며, 서버와의 대부분의 요청에서 사용됩니다. 이 토큰은 짧은 유효 기간을 가지며, 만료되면 새로운 Access Token을 발급받아야 합니다.
• 저장 위치: 로컬 스토리지(Local Storage).
  • 이유: 로컬 스토리지에 저장하면 클라이언트 애플리케이션이 쉽게 접근할 수 있으며, 페이지를 새로고침해도 유지됩니다.
  • 보안 고려: 로컬 스토리지에 저장된 토큰은 XSS(크로스 사이트 스크립팅) 공격에 노출될 수 있으므로, 로컬 스토리지 사용 시 애플리케이션에서 XSS 공격 방지에 주의를 기울여야 합니다.

2. Refresh Token (리프레시 토큰) - 쿠키에 저장

• 역할: Refresh Token은 Access Token이 만료된 경우, 새로운 Access Token을 발급받기 위해 사용됩니다. 이 토큰은 유효 기간이 길며, 서버에서 더 안전하게 관리됩니다.
• 저장 위치: HTTPOnly 쿠키.
  • 이유: HTTPOnly 속성을 가진 쿠키에 저장하면 JavaScript로 접근할 수 없으므로, XSS 공격으로부터 안전합니다. 쿠키는 브라우저가 서버에 자동으로 전송하므로 요청에 대한 인증이 간편해집니다.
  • 보안 고려: Refresh Token은 중요한 인증 정보를 담고 있으므로, 쿠키는 HTTPOnly 속성을 사용하고, 가능한 경우 Secure 속성도 설정하여 HTTPS를 통해서만 전송되도록 해야 합니다.

3. 사용자 ID (User ID) - Vuex Store에 저장

• 역할: 사용자 ID는 클라이언트 측에서 사용자와 관련된 UI를 렌더링하거나, 특정 사용자에 대한 로직을 처리할 때 사용됩니다. Access Token에서 추출한 사용자 ID를 Vuex Store에 저장하여 애플리케이션 내에서 쉽게 접근할 수 있습니다.
• 저장 위치: Vuex Store.
  • 이유: Vuex Store는 애플리케이션 상태를 관리하기 위한 전역 저장소로, 사용자 ID를 저장하여 컴포넌트 간에 쉽게 공유할 수 있습니다. Vuex에 저장된 정보는 메모리에만 존재하므로 브라우저가 닫히면 사라집니다.
  • 보안 고려: Vuex Store는 클라이언트 측에서만 사용되므로, 민감한 정보를 포함하지 않는 것이 좋습니다. 사용자 ID 정도는 클라이언트 측에 저장해도 큰 문제가 없습니다.

요약

• Access Token은 로컬 스토리지에 저장하여 각 요청 시 서버로 전송합니다.
• Refresh Token은 HTTPOnly 쿠키에 저장하여 보안을 강화합니다.
• 사용자 ID는 Access Token에서 추출하여 Vuex Store에 저장하고, 애플리케이션 상태 관리를 위해 사용합니다.

이 구조는 보안과 편의성을 모두 고려한 방식이며, 웹 애플리케이션에서 일반적으로 사용되는 패턴입니다. 이렇게 하면 민감한 정보를 안전하게 관리하면서, 애플리케이션의 상태를 효율적으로 제어할 수 있습니다.