[React-BookStore] 비회원 유저의 경우 마이페이지 접근 불가능처리

 

 

비회원 유저의 마이페이지 접근 권한을 위해서 

ProtectedRoute.jsx를 만들었음

 

import React from "react";

import { auth } from "../firebase";

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

const ProtectedRoute = ({ children }) => {

  const user = auth.currentUser; //현재 접속유저

  if (user === null) {

    //유저가 없으면 navigate로 login페이지로 이동

    alert("로그인이 필요한 서비스입니다.");

    return <Navigate to="/user/login" />;

  }

  return children; //자식컴포넌트로 이동

};

export default ProtectedRoute;

 

그리고 App.jsx에 userPage(마이페이지)에 컴포넌트로 씌워줌

const router = createBrowserRouter([

  {

    path: "/",

    element: <HomeLayout />,

    errorElement: <NotFound />,

    children: [

      { index: true, element: <Home /> },

      { path: "search", element: <Search /> },

    ],

  },

  {

    path: "/user",

    element: <UserLayout />,

    errorElement: <NotFound />,

    children: [

      { path: "join", element: <Join />, errorElement: <NotFound /> },

      { path: "login", element: <Login />, errorElement: <NotFound /> },

      {

        //마이페이지는 회원만 사용 가능함

        path: "mypage",

        element: (

          <ProtectedRoute>

            <UserPage />

          </ProtectedRoute>

        ),

        errorElement: <NotFound />,

      },

    ],

  },

]);

 

테스트

 

 

이미 메뉴에서 비회원은 마이페이지 메뉴가 보이지 않는다.

하지만 주소창에서 입력하고 들어갈 경우에는 막지 못하기 때문에 

후 로그인 페이지로 이동한다.