[javascript] 자바스크립트를 이용한 쿠키를 활용한 로그인 유지하기

08 Dec 2023

javascript

웹 애플리케이션을 개발할 때, 사용자가 로그인한 상태를 유지하는 것은 중요합니다. 자바스크립트를 사용하여 쿠키를 활용하여 사용자의 로그인 상태를 유지하는 방법에 대해 알아봅시다.

쿠키란 무엇인가요?

쿠키(Cookie)는 클라이언트의 로컬에 저장되는 작은 데이터 조각으로, 사용자의 상태 정보를 유지하기 위해 사용됩니다. 쿠키는 브라우저를 종료해도 유지되며, 만료 일자를 설정하여 일정 기간 동안 유지될 수 있습니다.

쿠키를 활용하여 로그인 상태 유지하기

가장 간단한 형태의 쿠키 기반 로그인 상태 유지는 사용자가 로그인 할 때 쿠키를 설정하고, 로그아웃 할 때 쿠키를 제거하는 것입니다. 다음은 이와 같은 접근 방식을 사용하는 예제 코드입니다.

// 쿠키에 로그인 정보 설정
function setLoginCookie(username) {
  document.cookie = `loggedin=true; expires=Fri, 31 Dec 9999 23:59:59 GMT;`;
  document.cookie = `username=${username}; expires=Fri, 31 Dec 9999 23:59:59 GMT;`;
}

// 쿠키에서 로그인 정보 가져오기
function getLoginCookie() {
  const cookies = document.cookie.split(';');
  const cookieMap = {};
  cookies.forEach(cookie => {
    const [key, value] = cookie.trim().split('=');
    cookieMap[key] = value;
  });
  return {
    isLoggedIn: cookieMap['loggedin'] === 'true',
    username: cookieMap['username']
  };
}

// 쿠키에서 로그인 정보 제거
function deleteLoginCookie() {
  document.cookie = `loggedin=; expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
  document.cookie = `username=; expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
}

위의 코드에서 setLoginCookie 함수는 사용자 이름을 받아들여 쿠키에 로그인 정보를 설정합니다. getLoginCookie 함수는 쿠키에서 로그인 정보를 읽어옵니다. deleteLoginCookie 함수는 로그아웃 시 쿠키를 제거합니다.

결론

쿠키를 활용하여 로그인 상태를 유지하는 것은 웹 애플리케이션의 사용자 경험을 향상시키는 데 도움이 됩니다. 하지만 보안과 개인정보 보호 측면에서 신중하게 다뤄져야 합니다. 쿠키를 사용할 때에는 보안 취약점에 대해 주의하고, 개인정보 처리 방침에 따라 적절한 방법으로 다뤄져야 합니다.

더 많은 정보를 원하시거나 질문이 있으시면 MDN Web Docs를 참고해보세요.

이를 참고해 주세요. 문제가 있을 시 언제든 문의해 주세요.