[리액트] 페이지 접근제한(PrivateRoute)

리액트를 이용하여 프론트를 제작할 때 우리는 로그인한 상태에서만 보여주고 싶은 페이지가 있을 것이다.

이때 PrivateRoute를 통해 문제를 해결할 수 있다.

App

import "./App.css";
import MainPage from "./Router/MainPage.jsx";
import MessengerPage from "./Router/Messenger.jsx";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import PrivateRoute from "./Router/PrivateRoute.jsx";

function App() {
 const access = localStorage.getItem("Token");
 return (
  <Router>
   <Routes>
    <Route path="/" element={<MainPage />}></Route>
    <Route path="/MessengerPage" element={<PrivateRoute authenticated={access} component={<MessengerPage />} />}></Route>
   </Routes>
  </Router>
 );
}

export default App;

access의 정보는 서버로 부터 받은 jwt가 담당한다.

로그인을 하면 localStorage에 Token 정보를 저장하는데, 만약 이 토큰 정보가 없다면 access 상수는 null이 된다.

 

/MessengerPage를 들어갈때, PrivateRoute를 거치게 되는데 access와 MessengerPage컴포넌트를 PrivateRoute에게 전달한다.

 

PrivateRoute

// src/Router/PrivateRoute.jsx
import React from "react";
import {Navigate} from "react-router-dom";

const PrivateRoute = ({authenticated, component: Component}) => {
  return (
    authenticated ? Component : <Navigate to="/"/>
  );
}

export default PrivateRoute;

 

 App으로부터 autheticated와 component를 넘겨받아 삼항연산자를 통해 authenticated가 있다면 전달받은 Component로 그게 아니라면 루트페이지("/")로 이동한다.