인증이 필요한 보호 페이지 - ProtectedRoute, DashboardPage

 

로그인 후에만 접근 가능한 보호 페이지이다. 

사용자가 로그인 상태일 때만 접근이 가능하고 로그인이 되어있지 않으면 강제로 로그인페이지로 이동시킨다.

또, localStorage를 사용해 새로고침을 해도 로그인 상태를 유지하게 한다.

 

 

| 컴포넌트 만들기

 

frontend/src/components/ProtectedRoute.js

import React from 'react';
import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const token = localStorage.getItem('token');
  return token ? children : <Navigate to="/login" />;
};

export default ProtectedRoute;

 

/ children : <ProtectedRoute>로 감싼 내부 컴포넌트를 의미한다.

/ token이 없으면 로그인 페이지로 리디렉션 (<Navigate to="/login" />) 한다.

 

 

 

| DashboardPage 페이지 만들기

 

frontend/src/pages/DashboardPage.js

import React from 'react';

const DashboardPage = () => {
  const user = JSON.parse(localStorage.getItem('user'));

  return (
    <div>
      <h2>대시보드</h2>
      <p>환영합니다, {user?.name}님!</p>
    </div>
  );
};

export default DashboardPage;

 

 

 

| 라우터에서 보호 라우트 적용

 

frontend/src/App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import RegisterPage from './pages/RegisterPage';
import LoginPage from './pages/LoginPage';
import DashboardPage from './pages/DashboardPage';
import ProtectedRoute from './components/ProtectedRoute';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/register" element={<RegisterPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute>
              <DashboardPage />
            </ProtectedRoute>
          }
        />
      </Routes>
    </Router>
  );
}

export default App;

 

 

앞으로 인증된 사용자만 접근할 수 있는 페이지들은 이렇게 <ProtectedRoute>로 감싸서 사용하면 된다.