로그인 상태 초기화되는 문제 안전하게 해결하기

로그인이 풀리는 원인들

사용자가 갑자기 로그아웃되거나, 설정한 필터가 사라진다는 신고가 오면 여러 원인이 있을 수 있다. 토큰이 만료되었을 수도 있고, localStorage가 삭제되었을 수도 있으며, 세션 쿠키 설정이 잘못되었을 수도 있다.

단순히 "토큰 만료면 다시 로그인하면 되지"라고 생각하면 안 된다. 만약 사용자가 좋은 경험을 기대한다면, 토큰 갱신을 자동으로 해주거나 적어도 "로그인이 풀렸습니다" 메시지를 명확히 보여줘야 한다.

문제 파악하기

먼저 어떤 상황에서 로그아웃되는지 정확히 파악한다.

• 페이지 새로고침 후?
• 특정 시간이 지난 후? (몇 분인가?)
• 특정 기능을 쓸 때?
• 모바일 브라우저에서만? 데스크톱에서만?

각 경우에 브라우저의 개발자 도구 > Application 탭에서 확인한다.

// localStorage 확인
console.log(localStorage.getItem('auth_token'));

// 쿠키 확인
console.log(document.cookie);

// sessionStorage 확인
console.log(sessionStorage.getItem('user_id'));

토큰 만료 처리하기

토큰이 만료되면 API가 401을 반환한다. 이때 자동으로 새 토큰을 받아오거나, 사용자에게 다시 로그인하라고 안내해야 한다.

// axios 인터셉터로 자동 갱신
axiosInstance.interceptors.response.use(
  response => response,
  async error => {
    if (error.response?.status === 401) {
      // 토큰 갱신 시도
      const newToken = await refreshToken();
      if (newToken) {
        // 실패한 요청 재시도
        return axiosInstance(error.config);
      } else {
        // 갱신 실패 → 로그인 페이지로
        window.location.href = '/login';
      }
    }
    return Promise.reject(error);
  }
);

로컬 스토리지 vs 세션 스토리지

로그인 정보를 어디에 저장하는지에 따라 동작이 다르다.

• localStorage: 브라우저를 닫아도 유지 (하루 이상 로그인 유지할 때)
• sessionStorage: 탭을 닫으면 삭제 (현재 세션만)
• 쿠키: HttpOnly 플래그 설정 가능 (JavaScript에서 접근 불가, 보안 향상)

보안상 토큰은 쿠키(HttpOnly)에 저장하는 게 가장 안전하다.

// 백엔드에서 쿠키 설정 (Node.js/Express)
res.cookie('authToken', token, {
  httpOnly: true,
  secure: true,  // HTTPS만
  sameSite: 'Strict',
  maxAge: 7 * 24 * 60 * 60 * 1000  // 7일
});

배포 전 확인 체크리스트

• 토큰 만료 시간이 명확히 설정되어 있는가? (보통 1시간)
• 토큰 갱신 엔드포인트가 작동하는가?
• 만료된 토큰으로 요청했을 때 401이 반환되는가?
• 401 응답 시 사용자에게 적절한 메시지를 보여주는가?
• 로컬과 프로덕션에서 쿠키 설정이 동일한가?
• HTTPS에서만 쿠키가 전달되는가?

이 모든 항목을 확인한 후 배포하면 로그인 상태 관련 버그를 대부분 방지할 수 있다.