localStorage에 JWT를 저장해 회원가입, 로그인하기

📌 JWT = 사용자가 로그인에 성공하면 서버에서 발급하는 토큰

네, 정확히 말하면 JWT (JSON Web Token)은 클라이언트 측(예: 브라우저)에서 localStorage나 sessionStorage에 저장하는 것이 일반적입니다. 이렇게 저장된 JWT를 사용하여 서버와 통신할 때 인증된 요청임을 증명합니다.

1. JWT를 localStorage에 저장하는 이유

• JWT는 사용자가 로그인에 성공하면 서버에서 발급하는 토큰입니다.
• 이 토큰을 클라이언트 측에서 저장하고, 인증이 필요한 요청(예: 사용자 정보 조회, 게시물 작성 등)을 보낼 때마다 서버로 전송해야 합니다.
• localStorage에 JWT를 저장하는 이유는:
  • 브라우저를 닫아도 유지되기 때문에 사용자가 로그아웃할 때까지 로그인 상태를 유지할 수 있습니다.
  • 세션 간 지속성을 제공하므로, 사용자가 브라우저를 닫았다가 다시 열었을 때도 로그인 상태를 유지할 수 있습니다.

2. localStorage에 JWT 저장 및 사용 예시

로그인 후 JWT 저장:

사용자가 로그인에 성공하면, 서버는 JWT를 반환합니다. 클라이언트는 이 토큰을 localStorage에 저장합니다.

const handleLogin = async (formData) => {
  try {
    // 서버로 로그인 요청을 보냄
    const response = await login(formData);

    // 서버에서 반환한 JWT 토큰을 localStorage에 저장
    localStorage.setItem("token", response.token);
    
    // 이후 필요한 사용자 정보를 상태에 저장
    setUser(response.user);
  } catch (error) {
    alert("로그인에 실패했습니다.");
  }
};

JWT를 인증 요청에 사용하는 방법:

JWT를 localStorage에 저장한 후, 인증이 필요한 API 요청을 보낼 때마다 이 토큰을 HTTP 요청의 헤더(Headers)에 포함시킵니다.

const getUserProfile = async () => {
  // 저장된 JWT 토큰을 localStorage에서 가져옴
  const token = localStorage.getItem("token");

  const response = await axios.get("https://your-server-url.com/user/profile", {
    headers: {
      Authorization: `Bearer ${token}` // Authorization 헤더에 JWT 토큰을 포함시킴
    }
  });

  return response.data;
};

3. JWT를 localStorage에 저장하는 데 따른 보안 고려사항

1. XSS(크로스 사이트 스크립팅) 공격 위험:

   • localStorage에 저장된 JWT는 자바스크립트 코드로 접근이 가능하기 때문에, XSS 공격을 통해 악성 스크립트가 토큰에 접근할 수 있습니다.
   • XSS 공격을 방지하기 위해, 입력 값 검증과 콘텐츠 보안 정책(CSP)을 적용하여 악성 스크립트가 실행되지 않도록 합니다.

2. 쿠키 사용의 대안:

   • 보안을 더 강화하고 싶다면, HttpOnly 쿠키에 JWT를 저장하는 것도 좋은 방법입니다. HttpOnly 속성이 있는 쿠키는 자바스크립트로 접근할 수 없으므로, XSS 공격에 대한 보호가 강화됩니다.
   • 하지만 쿠키는 CSRF(크로스 사이트 요청 위조) 공격에 취약할 수 있으므로, CSRF 방지 토큰과 같은 추가적인 보호가 필요합니다.

4. localStorage vs sessionStorage vs 쿠키

저장소 타입	설명	특징
localStorage	클라이언트 측 저장소로, 브라우저 세션 간에 데이터가 영구적으로 유지됩니다.	브라우저를 닫아도 유지됩니다. (지속적인 로그인 상태 유지 가능)
sessionStorage	클라이언트 측 저장소로, 브라우저 세션이 끝나면 데이터가 삭제됩니다.	브라우저 탭이나 창을 닫으면 데이터가 사라집니다. (세션 동안만 로그인 상태 유지)
쿠키 (Cookies)	서버와 클라이언트 간에 작은 데이터 조각을 저장하는 방식으로, HttpOnly와 Secure 속성을 사용할 수 있습니다.	HttpOnly 속성을 사용하면 자바스크립트에서 접근할 수 없으므로 보안이 강화되지만, 쿠키는 크기 제한이 있습니다.

결론

• JWT는 localStorage에 저장하여 사용자가 로그아웃할 때까지 로그인 상태를 유지할 수 있습니다.
• 저장된 JWT는 인증이 필요한 요청을 보낼 때마다 헤더에 포함되어 서버로 전송됩니다.
• 보안 문제를 해결하기 위해 XSS 보호와 쿠키 사용을 고려해야 합니다.

이제 JWT와 localStorage의 연관성과 사용 방법에 대해 더 명확하게 이해되셨기를 바랍니다! 추가로 궁금한 점이 있으면 언제든지 질문해 주세요! 😊