[myCart] 네비게이션 가드(로그인 유저가 아니면 url주소로 접근 불가) 설정

 

이미 로그인 되어있는 유저의 경우 login 및 signup페이지 이동 시 홈페이지로 이동한다. 

 

 

 

import React, { useContext } from "react";

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

import HomePage from "../Home/HomePage";

import ProductsPage from "../Products/ProductsPage";

import SingleProductPage from "../SingleProduct/SingleProductPage";

import SignupPage from "../Authentication/SignupPage";

import LoginPage from "../Authentication/LoginPage";

import CartPage from "../Cart/CartPage";

import MyOrderPage from "../MyOrderPage/MyOrderPage";

import Logout from "../Authentication/Logout";

import ProtectedRoute from "./ProtectedRoute";

import UserContext from "../../contexts/UserContext";

const Routing = () => {

  const user = useContext(UserContext);

  return (

    <Routes>

      <Route path="/" element={<HomePage />} />

      <Route path="/products" element={<ProductsPage />} />

      <Route path="/product/:id" element={<SingleProductPage />} />

      <Route

        path="/signup"

        element={user ? <Navigate to="/" /> : <SignupPage />}

      />

      <Route

        path="/login"

        element={user ? <Navigate to="/" /> : <LoginPage />}

      />

      <Route element={<ProtectedRoute />}>

        <Route path="/cart" element={<CartPage />} />

        <Route path="/myorders" element={<MyOrderPage />} />

        <Route path="/logout" element={<Logout />} />

      </Route>

    </Routes>

  );

};

export default Routing;

 

Routing 에서 useContext로 로그인 된 유저 정보를 받아와서 

 

signup과login에 user가 있을 경우에는 "/" 홈페이지로 , 없을 경우엔 각 페이지로 이동하게 설정한다. 

 

 

그리고 장바구니/내주문/로그아웃의 경우 

고 주소창으로 로그인 되지 않은 유저가 접근 시를 대비해서 

ProtectedRoute jsx를 생성하여 

 

유저가 있을 경우에는 Outlet   즉 원래 요청 페이지를 보여주고 없을 경우에는 로그인 페이지로 이동하게 만든다.

import { useContext } from "react";

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

import UserContext from "../../contexts/UserContext";

const ProtectedRoute = () => {

  const user = useContext(UserContext);

  return user ? <Outlet /> : <Navigate to="/login" />;

};

export default ProtectedRoute;

 

Routing.jsx로 돌아와서 위의 세개의 루트는 ProtectedRoute 컴포넌트로 감싸서 관리한다.

      <Route element={<ProtectedRoute />}>

        <Route path="/cart" element={<CartPage />} />

        <Route path="/myorders" element={<MyOrderPage />} />

        <Route path="/logout" element={<Logout />} />

      </Route>