🚫 로그인 상태에 따른 접근 제한 구현 (+ 빈 페이지 설정)

로그인 상태에 따라 접근 제한 기능을 구현하고자 했다.

X 로그인 되지 않은 상태에서 접근 가능한 페이지

: 시작 페이지, 로그인 페이지, 로딩 페이지, 빈 페이지

O 로그인 된 상태에서 접근 가능한 페이지

: 나머지 모든 페이지

+ 지정되지 않은 route에 접근하는 경우에는 따로 디자인한 empty page가 뜨도록 설정

1. 로그인 상태 확인

로그인 시에 localstorage에 access token을 저장하도록 설정해두었기 때문에 만약 localstorage에 토큰이 있다면 로그인이 되어 있는 것이고 없다면 로그인이 되어 있지 않은 것이다. 따라서 토큰 저장 여부를 통해 로그인이 되어있는지 확인해준다.

2. 로그인 상태에 따른 route 설정

로그인이 되어 있을 경우 Outlet을 이용해 지정한 라우트들을 렌더링 해주고, 로그인이 되어 있지 않을 경우 로그인을 하도록 로그인 페이지로 이동 시킨다.

참고 | Outlet이란?

react-router-dom의 Outlet은 React Router v6에서 도입된 기능이다. 이전 버전의 React Router에서는 Route 컴포넌트를 사용하여 라우팅을 관리했지만, v6에서는 더 유연하고 중첩된 라우팅 구조를 위해 Outlet이라는 새로운 개념이 도입되었다.
Outlet은 부모 라우트의 자식 컴포넌트 내에서 렌더링되는 컴포넌트를 표시하는 데 사용된다. 기본적으로 중첩된 라우팅을 다루는 데 유용한 도구이다. 부모 라우트가 자식 라우트를 갖는 경우, Outlet은 그 자식 라우트들의 결과를 렌더링하는 역할을 한다.

3. 빈 페이지 설정

어떤 route에도 해당하지 않는 주소로 이동했을 시에는 따로 디자인한 empty page를 보여주도록 Routes의 마지막에 <Route path="*" element={<Empty />} /> 를 추가해준다.

PrivateRoute.js

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

const isLogin = !!localStorage.getItem("bagtoken");

const PrivateRoute = () => {
  return isLogin ? <Outlet /> : <Navigate to="/login" />;
};

export default PrivateRoute;

App.js

import { Routes, Route } from "react-router-dom";
import GoogleLogin from "./pages/GoogleLoginPage";
import Nickname from "./pages/NicknamePage";
import ChatListPage from "./pages/ChatListPage";
import ChatRoomPage from "./pages/ChatRoomPage";
import Loading from "./pages/LoadingPage";
import DetailPage from "./pages/DetailPage";
import CreateSalesPage from "./pages/CreateSalesPage";
import ModifySalesPage from "./pages/ModifySalesPage";
import ItemListPage from "./pages/ItemListPage";
import FavoritesPage from "./pages/FavoritesPage";
import MyPage from "./pages/MyPage";
import Start from "./pages/Start";
import Purchase from "./pages/Purchase";
import Empty from "./pages/EmptyPage";

import PrivateRoute from "./components/Route/PrivateRoute";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Start />} />
      <Route path="/login" element={<GoogleLogin />} />
      <Route path="/loading" element={<Loading />} />
      {/* 로그인 해야 접근 가능한 페이지 */}
      <Route element={<PrivateRoute />}>
        <Route path="/nickname" element={<Nickname />} />
        <Route path="/home" element={<ItemListPage />} />
        <Route path="/favorites" element={<FavoritesPage />} />
        <Route path="/chats" element={<ChatListPage />} />
        <Route path="/chats/:roomId" element={<ChatRoomPage />} />
        <Route path="/detail/:postId" element={<DetailPage />} />
        <Route path="/create" element={<CreateSalesPage />} />
        <Route path="/modify/:postId" element={<ModifySalesPage />} />
        <Route path="/mypage" element={<MyPage />} />
        <Route path="/deal" element={<Purchase />} />
        <Route path="/" element={<Start />} />
      </Route>
      {/* 빈 페이지 */}
      <Route path="*" element={<Empty />} />
    </Routes>
  );
}

export default App;