React 로그인 상태 관리 및 뒤로가기 이슈

[3unbum]

문제 설명

로그인 후 브라우저 뒤로가기 시 로그인 화면으로 돌아가는 문제가 발생했습니다. 이는 로그인 상태 관리가 부적절하게 구현되어 있었기 때문입니다.

문제 발생 원인

1. Login 컴포넌트의 handleSubmit 함수에서 localStorage에 단순히 'isLoggedIn' 상태만 저장
2. 실제 인증 상태에 대한 적절한 관리 부재
3. 뒤로가기 시 로그인 상태 체크 로직 누락

재현 방법

1. 테스트 계정으로 로그인
2. 로그인 성공 후 메인 페이지로 이동
3. 브라우저 뒤로가기 버튼 클릭
4. 로그인 페이지로 돌아가는 현상 발생

예상 동작

• 로그인 후 뒤로가기를 했을 때 로그인 페이지가 아닌 이전 페이지로 이동하거나 메인 페이지를 유지해야 함
• 브라우저를 종료하면 로그인 상태가 초기화되어야 함

실제 동작

1. 뒤로가기 시 로그인 페이지로 이동됨
2. localStorage 사용으로 인해 브라우저를 종료하고 다시 열어도 로그인 상태가 유지됨

해결 방안

시도한 해결책

1. Private Route Guard 구현 검토

   • 프론트엔드 구조가 복잡해질 수 있어 제외

2. Login 컴포넌트에서 로그인 상태 체크

   • 이미 로그인된 상태일 경우 홈으로 리다이렉트 처리
   • 구현은 성공했으나 브라우저 종료 후에도 로그인 상태가 유지되는 새로운 문제 발생

최종 해결책

• localStorage 대신 sessionStorage 사용
  • 브라우저 종료 시 자동으로 데이터가 삭제되어 로그아웃 처리됨
  • 새 탭이나 새 창에서도 독립적인 세션 관리 가능

관련 코드

// Before (localStorage 사용)
const handleSubmit = () => {
  localStorage.setItem('isLoggedIn', 'true');
}

// After (sessionStorage 사용)
const handleSubmit = () => {
  sessionStorage.setItem('isLoggedIn', 'true');
}

추가 고려사항

1. 보안을 위해 추후 토큰 기반 인증 구현 검토 필요

2. 로그인 상태 전역 관리를 위한 상태관리 라이브러리(Redux, Recoil 등) 도입 고려

3. React Context를 활용한 전역 상태 관리 방안

   // AuthContext.js
   import { createContext, useContext, useState } from 'react';
   
   const AuthContext = createContext(null);
   
   export const AuthProvider = ({ children }) => {
     const [isLoggedIn, setIsLoggedIn] = useState(() => {
       return sessionStorage.getItem('isLoggedIn') === 'true';
     });
   
     const login = () => {
       sessionStorage.setItem('isLoggedIn', 'true');
       setIsLoggedIn(true);
     };
   
     const logout = () => {
       sessionStorage.removeItem('isLoggedIn');
       setIsLoggedIn(false);
     };
   
     return (
       <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
         {children}
       </AuthContext.Provider>
     );
   };
   
   export const useAuth = () => useContext(AuthContext);

   // App.js
   import { AuthProvider } from './AuthContext';
   
   function App() {
     return (
       <AuthProvider>
         {/* 앱 컴포넌트들 */}
       </AuthProvider>
     );
   }

   // Login.js
   import { useAuth } from './AuthContext';
   
   function Login() {
     const { login } = useAuth();
   
     const handleSubmit = () => {
       // 로그인 로직 수행 후
       login();
     };
   }

   이 방식의 장점:

   • 컴포넌트 간 로그인 상태 공유 용이
   • 중앙집중식 상태 관리로 일관성 유지
   • Redux 같은 추가 라이브러리 없이 React 내장 기능만으로 구현 가능
   • sessionStorage와 함께 사용하여 브라우저 세션 관리도 가능