Private Router 란?

Private Router는 사용자가 인증(로그인)이 되어 있을 때에만 특정 페이지에 접근할 수 있게 하는 기능 제공

• 인증되지 않은 상용자가 인증이 필요한 페이지로 접근하려고하면 징정된 페이지로 리다이렉트 돼서 사용자가 인증을 받지 못하면 접근하지 못하도록 막아준다.

구현

아래의 코드처럼 <Route element={<PrivateRoute />}>
안에 인증이되야만 접근하게 하고싶은 페이지를 모아서 넣어놓는다.

import Home from "@/pages/Home";
import Mypage from "@/pages/Mypage";
import NoticeBoard from "@/pages/NoticeBoard";
import Profill from "@/pages/Profill";
import WritePage from "@/pages/WritePage";

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<PrivateRoute />}>
          <Route path="mypage" element={<Mypage />} />
          <Route path="profill" element={<Profill />} />
          <Route path="writepage" element={<WritePage />} />
        </Route>
        <Route path="/" element={<Home />} />
        <Route path="noticeboard" element={<NoticeBoard />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

그 후에 Private Router 를 만들어서 인증이 됬다면 Outlet 으로 하위경로에 있는 요소를 랜더링하게 한다.

import { useAuthenticate } from "@/api/useAuthenticate";

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

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