[마이머니앱] 네비게이션 가드

네비게이션 가드란?

​

네비게이션 가드(navigation guard)란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 말합니다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다
https://blog.naver.com/drv983/223182320993

네비게이션션 가드 : 인증된 유저와 안된유저에 따라서 페이지 요청시 막기

 

 

 

 

---

 

 

App.jsx

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

import "./App.css";

import Home from "./pages/home/Home";

import Login from "./pages/login/Login";

import Signup from "./pages/signup/Signup";

import Navbar from "./Components/Navbar";

import { useAuthContext } from "./hooks/useAuthContext";

function App() {

  //파이어 베이스 인증확인을 한 후 앱을 사용가능

  const { authIsReady, user } = useAuthContext();

  return (

    <>

      <div className="App">

        {authIsReady && (

          <BrowserRouter>

            <Navbar />

            <Routes>

              <Route

                path="/"

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

              />

              <Route path="/login" element={!user ? <Login /> : <Home />} />

              <Route path="/signup" element={!user ? <Signup /> : <Home />} />

            </Routes>

          </BrowserRouter>

        )}

      </div>

    </>

  );

}

export default App;

 

home 페이지를 요청했을 시 user 정보가 있으면 Home 아니면 login페이지 이동 

login 페이지를 요청했을 시  user정보가 없으면 loign user 정보가 있으면 home

signup 페이지를 요청했을 시 user정보가 없으면 singup페이지 user 정보가 있으면 home

 

 

 

 

로그인 안했을 경우 home으로 가도 login 페이지로 이동한다. 

 

로그인 후 회원가입 페이지로 이동해봐도 home 페이지가 나옴