로그인은 됐는데 새로고침하면 풀려요? 세션 유지 구현법

로그인 버튼은 분명 잘 눌렸는데, 새로고침 한 번에 로그아웃 상태로 돌아가 있어요. 혹시 이런 적 없나요? 저도 월 3건 무료로 열어 둔 법령 검색 서비스 플랜엘(plan-l)에 로그인을 붙이면서 똑같이 겪었어요.

원인은 상태가 메모리에만 있어서예요

React든 Vue든 컴포넌트 상태는 메모리에 살아요. 새로고침하면 자바스크립트가 처음부터 다시 실행되니, "로그인했다"는 기억도 같이 사라져요. 서버는 여전히 나를 기억하는데 화면만 모르는 상태인 거죠.

그래서 고칠 곳도 화면 쪽이에요. 직접 만들어 보니 손댈 지점은 딱 세 군데였어요.

앱 시작→세션 확인 요청→성공이면 로그인 화면 복원→실패면 비로그인 화면

1. 토큰은 어디에 둘까

localStorage에 토큰을 넣으면 새로고침은 버티지만, 페이지의 모든 스크립트가 읽을 수 있어서 XSS 공격 한 번에 털릴 위험이 있어요. 브라우저 세션 토큰은 서버가 심어 주는 HttpOnly 쿠키에 두는 편이 안전해요. 프론트 코드가 토큰을 직접 만질 일이 없어지고, 요청에는 쿠키가 자동으로 실려 가요.

2. 앱이 뜨자마자 세션을 물어보기

앱 시작 시점에 "지금 로그인 상태인가요?"를 서버에 1번 물어봐요. 흔히 /me라고 부르는 확인 요청이에요. 적용해 봤더니 인증 상태는 세 가지면 충분했어요. 확인 중, 로그인됨, 비로그인. 이 중 "확인 중"이 빠지면 다음 문제가 생겨요.

3. 확인이 끝나기 전엔 튕기지 않기

새로고침하면 로그인 페이지로 잠깐 튕겼다가 0.5초쯤 뒤에 돌아오는 깜빡임, 이게 제일 거슬려요. 보호 라우트가 "확인 중" 상태를 몰라서 비로그인으로 판단해 버리는 게 원인이에요. 테스트해 보면 확인 중일 때는 가벼운 로딩 화면을 보여 주고, 결과가 나온 뒤에 리다이렉트를 결정하는 것만으로 깜빡임이 사라져요.

• ✓HttpOnly 쿠키 보관
• ✓시작 시 /me 확인 1회
• ✓확인 중 상태로 깜빡임 차단

정리

돌려 보니 실제로 고친 파일은 인증 컨텍스트와 라우트 가드 2개, 작업 시간은 1시간이 안 걸렸어요. 새로고침 로그아웃은 버그라기보다 복원 단계가 빠진 설계에 가까워요. 상태 세 개와 확인 요청 1번, 이것만 기억하면 돼요.