[React] 로그인 상태에 따라 라우팅 접근 제한하기

들어가며

서비스를 만들다 보면 로그인한 사용자만 접근할 수 있는 페이지가 필요합니다.

예를 들어 마이페이지, 결제 페이지, 관리자 페이지 같은 화면입니다.

로그인하지 않은 사용자가 이런 페이지에 접근하면 로그인 페이지로 이동시키는 처리가 필요합니다.

---

PrivateRoute 만들기

React Router에서는 조건에 따라 Navigate를 반환해 다른 경로로 이동시킬 수 있습니다.

import { Navigate } from "react-router-dom";

interface PrivateRouteProps {
  children: React.ReactNode;
}

const PrivateRoute = ({ children }: PrivateRouteProps) => {
  const accessToken = localStorage.getItem("accessToken");

  if (!accessToken) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
};

export default PrivateRoute;

토큰이 없으면 /login으로 이동하고, 토큰이 있으면 children을 그대로 렌더링합니다.

---

라우터에 적용하기

import { BrowserRouter, Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage";
import LoginPage from "./pages/LoginPage";
import MyPage from "./pages/MyPage";
import PrivateRoute from "./PrivateRoute";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route
          path="/mypage"
          element={
            <PrivateRoute>
              <MyPage />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

이제 /mypage는 로그인 상태일 때만 접근할 수 있습니다.

---

쿠키를 사용하는 경우

토큰을 쿠키에 저장하고 있다면 쿠키를 읽는 함수로 로그인 여부를 판단할 수 있습니다.

import { Navigate } from "react-router-dom";
import { getCookie } from "./cookie";

const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
  const accessToken = getCookie("access_token");

  return accessToken ? <>{children}</> : <Navigate to="/login" replace />;
};

export default PrivateRoute;

핵심은 토큰 저장 위치가 localStorage인지 cookie인지가 아니라, 접근 가능 여부를 판단하는 조건을 한곳에 모으는 것입니다.

---

주의할 점

프론트엔드 라우팅 접근 제한은 사용자 경험을 위한 처리입니다.

보안의 최종 판단은 반드시 서버에서도 해야 합니다.

프론트엔드에서 페이지를 숨기더라도 API 요청 자체를 서버가 검증하지 않으면 안전하지 않습니다.

따라서 중요한 데이터는 서버에서 토큰을 검증한 뒤 내려주어야 합니다.

---

마무리

React Router에서 로그인 여부에 따라 페이지 접근을 제한하려면 PrivateRoute 패턴을 사용할 수 있습니다.

토큰이 있으면 페이지를 보여주고, 없으면 Navigate로 로그인 페이지로 이동시키면 됩니다.

다만 프론트엔드 제한은 UX 보조 장치이고, 실제 보안 검증은 서버에서 반드시 함께 처리해야 합니다.