React Router에서 accessToken 없을 경우 리디렉션 처리하기

React Router에서 accessToken 없을 경우 리디렉션 처리하기

React 앱에서 특정 페이지에 접근하기 전에 사용자가 인증되었는지 확인하는 것은 매우 중요한 부분입니다. 이를 위해 React Router와 PrivateRoute를 활용하여, 인증되지 않은 사용자가 특정 페이지에 접근하려 할 때 홈 페이지(/)로 리디렉션하도록 구현할 수 있습니다.

1. PrivateRoute 컴포넌트 구현

먼저, 인증되지 않은 사용자가 접근할 수 없도록 PrivateRoute라는 컴포넌트를 만들겠습니다. 이 컴포넌트는 로컬스토리지에 저장된 accessToken을 확인하고, 없으면 / 페이지로 리디렉션하며, 있으면 자식 컴포넌트를 렌더링합니다.

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  // 로컬스토리지에서 accessToken 확인
  const accessToken = localStorage.getItem('accessToken');

  // accessToken이 없으면 홈(/) 페이지로 리디렉션
  if (!accessToken) {
    return <Navigate to="/" replace />;
  }

  // accessToken이 있으면 자식 요소 (즉, 해당 Route) 렌더링
  return <Outlet />;
};

export default PrivateRoute;

설명:

• accessToken: 로컬스토리지에서 accessToken을 확인합니다. 이 값이 없으면 인증되지 않은 상태이므로 리디렉션을 합니다.
• Navigate: accessToken이 없을 경우 /로 리디렉션합니다.
• <Outlet />: accessToken이 있을 경우, 자식 컴포넌트를 렌더링하여 실제 라우트를 표시합니다.

2. App.jsx 수정

이제 PrivateRoute를 사용하여 인증이 필요한 페이지들에 접근할 때 accessToken을 확인하도록 합니다. 이를 위해 PrivateRoute를 Routes에 래핑하여 보호된 경로들을 감쌉니다.

import { Routes, Route } from 'react-router-dom';
import Faq from './components/Faq';
import Answer from './components/Answer';
import MapView from './components/MapView';
import MainPage from './components/MainPage';
import ReservationDetails from './components/ReservationDetails';
import NoticeDetail from './components/NoticeDetail';
import Reservation from './components/Reservation';
import MeetingRoomInfo from './components/MeetingRoomInfo';
import PrivateRoute from './components/PrivateRoute';  // PrivateRoute 추가

const App = () => {
  return (
    <Routes>
      {/* 비공개 경로를 위한 PrivateRoute 추가 */}
      <Route element={<PrivateRoute />}>
        <Route path="/faq" element={<Faq />} />
        <Route path="/notice" element={<Answer />} />
        <Route path="/map" element={<MapView />} />
        <Route path="/mainpage" element={<MainPage />} />
        <Route path="/reservation-details" element={<ReservationDetails />} />
        <Route path="/notice/:id" element={<NoticeDetail />} />
        <Route path="/reservation" element={<Reservation />} />
        <Route path="/meetingroominfo" element={<MeetingRoomInfo />} />
      </Route>

      {/* 로그인 페이지 등의 공개 경로 */}
      <Route path="/" element={<Home />} />
    </Routes>
  );
};

export default App;

설명:

• PrivateRoute는 인증되지 않은 사용자가 보호된 경로에 접근하려 할 때 자동으로 /로 리디렉션됩니다.
• Routes 안에 보호된 경로들(/faq, /notice 등)을 PrivateRoute로 감싸서, 해당 경로들은 반드시 accessToken이 있어야만 접근할 수 있게 합니다.
• 홈 페이지(/)는 인증되지 않은 사용자도 접근할 수 있도록 공개되어 있습니다.

3. 결론

이렇게 구현하면, React Router에서 인증이 필요한 경로에 접근할 때, accessToken이 없으면 홈 페이지로 리디렉션되도록 할 수 있습니다. 이 방식은 로그인 후 인증된 사용자가 특정 페이지에 접근하도록 보장하는데 유용합니다.

추가적으로, 인증 로직을 구현하여 로그인/회원가입 페이지를 추가하거나, 리디렉션 후 로그인 페이지로 유도하는 등의 확장도 가능합니다.