인프런 커뮤니티 질문&답변

안녕하세요! 용준님!

해당 요구사항을 만족하기 위해서는 백엔드 API의 변경이 필요할 것 같습니다!

아래 설명을 참고해 보세요!
로그인 구현시 브라우저에 저장하기 위해 크게 4가지 정도의 저장소를 소개 드렸던 것 같아요!

1. 로컬스토리지

2. 세션스토리지

3. 쿠키

4. 변수

여기서, 브라우저를 종료하고 다시 접속하더라도 정보를 유지할 수 있는 저장소는 로컬스토리지, 쿠키 정도가 될 것 같아요!(단, 쿠키는 만료일자가 설정되어 있는 경우에 한해서 입니다)

해당 수업에서 제공하는 refreshToken은 보안 목적상 자바스크립트로 건드릴 수 없도록 httpOnly로 만들어 졌어요!
따라서, refreshToken을 꺼내어 로컬스토리지에 다시 담는 것은 어렵습니다.
또한, refreshToken을 꺼내어 만료일자를 설정하여 다시 쿠키에 재저장 하는 것도 어렵습니다.

결론적으로는, 해당 보안 수준을 유지하며 브라우저 종료시에도 쿠키를 유지하기 위해서는 쿠키의 만료일자를 설정하여 브라우저에 전송하도록 백엔드 API의 변경이 필요할 것 같네요!

안녕하세요, 인프런 AI 인턴이에요.

브라우저를 종료하면 쿠키가 휘발되어 refreshToken이 사라지는 것은 맞습니다. 쿠키는 일반적으로 클라이언트(브라우저)에 저장되며, 브라우저가 종료될 때 함께 삭제되기 때문에 쿠키에 refreshToken을 저장하면 브라우저 재접속 시 로그인 상태 유지를 구현할 수 없습니다.

로그인 상태 유지를 위해서는 refreshToken을 서버에 저장하거나 다른 저장소를 이용해야 합니다. 그 중 일반적으로 사용되는 방법은 다음과 같습니다.

1. 세션 저장소: 서버에 refreshToken을 저장하는 가장 일반적인 방법입니다. 클라이언트가 로그인을 요청하면 서버에서 refreshToken을 발급하고 세션 저장소에 저장합니다. 클라이언트에게는 세션 ID를 전달하고, 이 세션 ID를 통해 서버에서 저장한 refreshToken을 가져올 수 있습니다. 클라이언트가 재접속할 때마다 세션 ID를 이용해 로그인 상태를 확인할 수 있습니다.

2. 로컬 스토리지/세션 스토리지: 클라이언트 측에 로그인 상태를 저장하는 방법입니다. 브라우저의 로컬 스토리지(localStorage)나 세션 스토리지(sessionStorage)에 refreshToken을 저장하고, 재접속 시 해당 스토리지에서 refreshToken을 가져와 로그인 상태를 확인합니다.

3. JWT(Json Web Token): 로그인 시 서버에서 발급된 JWT를 클라이언트에게 전달하고, 클라이언트는 이를 로컬 스토리지에 저장합니다. 클라이언트가 재접속할 때마다 JWT를 이용해 로그인 상태를 확인합니다.

이러한 방법들 중 선택하여 구현하면 브라우저 재접속 시 로그인 상태를 유지할 수 있습니다. 선택한 방법에 따라 클라이언트와 서버 사이의 통신 방법과 알고리즘 등이 달라질 수 있으니 자세한 구현 방법은 선택한 방법에 관련된 자료를 참고해주세요.

더 궁금한 점이 있으시면 언제든지 질문해주세요. 좋은 하루 되세요!