[React / Private Route] 사용자 인증 인가 접근 처리

import React, { useContext } from "react";
import { UserObjContext } from "../context/UserObjContext";
import { Navigate, Outlet, Routes } from "react-router-dom";

export default function PrivateRoute({ component: Component, ...rest }) {
  const { authData } = useContext(UserObjContext);
  // 로그인 상태를 확인하는 로직
  const isAuthenticated = localStorage.getItem("userId") !== null;
  console.log("isAuthenticated : ", isAuthenticated);

  return (
    <>
      isAuthenticated ? (
      <Routes {...rest} element={<Outlet />} />
      ) : (
      <Navigate to="/login" state={{ from: rest.location }} replace />
      );
    </>
  );
}

 

function App() {
  return (
    <>
      <UserContextProvider>
        <BrowserRouter>
          <Routes>
            {/* 중첩 라우팅 : 레이아웃 필요 컴포넌트들 */}
            <Route path="/" element={<Layout />}>
              <Route index element={<BoardTables />} />
              <Route path=":id" element={<BoardTables />} />
              <Route path="/detail/:boardId" element={<BoardDetail />} />
              {/*로그인한 사용자만 접근 가능하도록 처리*/}
              <Route element={<PrivateRoute />}>
                <Route path="/write" element={<BoardWrite />} />
              </Route>
            </Route>
            <Route path="/join" element={<JoinForm />} />
            <Route path="/login" element={<LoginForm />} />
          </Routes>
        </BrowserRouter>
      </UserContextProvider>
    </>
  );
}

export default App;