🔒 Handle automatic logout on token expiration

[jun-0411]

📝 작업 내용

• 22시간이 지나면 자동으로 로그아웃 되게 설정했습니다. 로그인할 때, 로그인 시간을 zustand에 저장하고,, 이후 그 시간과 api 요청이 일어나는 시간을 비교하여 22시간이 지나면 자동으로 로그아웃 됩니다. 다음 3가지 방식으로 검사를 수행합니다.
  • API Interceptor 검사
  • 브라우저 탭 복귀 시점 감지
  • 타이머 기반 자동 감지
• 브라우저 탭 복귀 시점 감지와 타이머 기반 자동 감지 모두 자바스크립트 엔진과 브라우저의 기본 제공 기능(Web API)을 활용해 Event-Driven 방식으로 작동하여 성능적인 악영향은 거의 없을 것이라고 합니다.
• 추후 백엔드에서 refreshToken을 도입하면 자동 로그아웃 부분을 refreshToken을 요청하게 수정하면 될 것 같습니다.

📸 스크린샷 (선택)

🚀 리뷰 요구사항 (선택)

• 로그아웃 안내 모달이 나타나고 로그인 페이지로 이동하게 만들었는데, 모달 문구는 대충 만들었습니다. 혹시 더 좋은 의견 있으신가요...?

[young-52]

토큰 유효기간 관련

• 토큰 유효기간이 24시간인 이유가 궁금합니다!
• 제미나이에 따르면, JWT 토큰을 복호화해서 유효기간 만료 여부를 판별하는 방법을 추천하네요. 이것도 고려해볼 만할까요…?

세션 만료 모달 관련

로그아웃 안내 모달이 나타나고 로그인 페이지로 이동하게 만들었는데, 모달 문구는 대충 만들었습니다. 혹시 더 좋은 의견 있으신가요...?

• 아래 안내문구들을 생각해 보았는데, 어떠신가요?
  • 보안을 위해 자동으로 로그아웃되었습니다.
  • 로그인 유지 시간이 만료되어 자동으로 로그아웃되었습니다.
• 아래 버튼에 있는 '확인'이 의미하는 바가 불명확해서… '홈으로', '다시 로그인하기' 등의 문구가 보다 직관적인 것 같습니다.

[jun-0411]

토큰 유효기간 관련

토큰 유효기간이 24시간인 이유가 궁금합니다!

백엔드에서 유효기간이 24시간으로 설정되어 있어서, 여유있게 2시간 정도 전으로 설정했습니다.
근데 제미나이에 따르면, 보통 5분 전이나 1분 전으로 설정한다고 합니다.

그래서 5분 전에 만료 되는 것으로 로직을 수정했습니다.

제미나이에 따르면, JWT 토큰을 복호화해서 유효기간 만료 여부를 판별하는 방법을 추천하네요. 이것도 고려해볼 만할까요…?

현업에서 많이 사용한다고 하네요. 로직을 jwt 토큰을 복호화하고, 그 유효시간 종료 5분 전부터 만료가 되게 바꿨습니다!

세션 만료 모달 관련

로그아웃 안내 모달이 나타나고 로그인 페이지로 이동하게 만들었는데, 모달 문구는 대충 만들었습니다. 혹시 더 좋은 의견 있으신가요...?

로그인 유지 시간이 만료되어 자동으로 로그아웃되었습니다. + 다시 로그인하기로 수정했습니다!

[young-52]

좋습니다!