[개발]JWT 갱신 토큰 관리 방법(7)- 로컬스토리지/쿠키 구현

JWT 갱신 토큰을 클라이언트 측에서 관리하는 일반적인 방법 중 하나는 로컬 스토리지 또는 쿠키에 갱신 토큰을 저장하는 것입니다.

로컬 스토리지를 사용하는 경우, 갱신 토큰은 클라이언트의 브라우저 로컬 스토리지에 저장됩니다. 이렇게 하면, 웹 페이지가 리로드되거나 브라우저가 닫히더라도 토큰이 유지됩니다. 클라이언트는 API 요청을 보낼 때 로컬 스토리지에서 갱신 토큰을 가져와서 요청에 포함시키면 됩니다.

쿠키를 사용하는 경우, 갱신 토큰은 쿠키에 저장됩니다. 쿠키를 사용하면 서버가 클라이언트에게 쿠키를 자동으로 설정하고, 브라우저는 그 후의 모든 요청에 자동으로 쿠키를 포함시킵니다. 쿠키를 사용하는 것은 CSRF(Cross-Site Request Forgery) 공격에 대한 보호를 제공하지만, XSS(Cross-Site Scripting) 공격에 취약할 수 있습니다.

아래의 클라이언트 측 JavaScript 코드는 JWT 갱신 토큰을 로컬 스토리지에 저장하고 사용하는 방법을 보여줍니다.

// 로그인 후 서버로부터 받은 갱신 토큰을 로컬 스토리지에 저장
localStorage.setItem('refreshToken', refreshToken);

// API 요청을 보낼 때 로컬 스토리지에서 갱신 토큰을 가져와서 요청에 포함
const refreshToken = localStorage.getItem('refreshToken');
fetch('/api/refresh', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ refreshToken })
}).then(response => response.json())
.then(data => {
  // 새 액세스 토큰을 받아서 사용
  const newAccessToken = data.accessToken;
});

이 코드는 간단한 예제로, 실제 애플리케이션에서는 추가적인 보안 고려 사항이 필요합니다. 예를 들어, JWT 토큰의 만료를 확인하고 필요한 경우 갱신 요청을 자동으로 보내는 등의 로직이 필요합니다. 또한, 서버 측에서는 갱신 요청을 검증하고 새 액세스 토큰을 발급하는 로직이 필요합니다.