React 및 React Router DOM을 사용하여 보호된 경로를 만드는 방법

React를 사용하여 웹 애플리케이션을 구축할 때 특정 경로에 대한 액세스를 제한하고 인증된 사용자에게만 액세스를 허용해야 하는 경우가 많습니다. 이 기사에서는 React, React-router-dom 및 Outlet 구성 요소를 사용하여 보호된 경로를 생성하는 방법을 설명하고 localStorage에 저장된 값을 기반으로 사용자가 관리자인지 확인하는 방법을 보여줍니다.

보호 라우팅이란 무엇인가요?

보호된 경로는 특정 조건(예: 인증되었거나 관리자 권한과 같은 특정 권한을 가진 사용자)만 액세스할 수 있는 페이지를 의미합니다. 이러한 조건이 충족되지 않으면 사용자는 로그인 페이지와 같은 다른 페이지로 리디렉션됩니다.

전제조건

시작하기 전에 다음 사항을 확인하세요.

• 프로젝트에 React가 구성되었습니다.
• React-router-dom 설치:

<code class="language-bash">npm install react-router-dom</code>

예: 관리자 확인을 통한 라우팅 보호

이 예에서는 localStorage의 값을 확인하여 사용자가 관리자로 인증되었는지 확인합니다. 관리자가 아닌 경우 로그인 페이지로 리디렉션하세요.

• 라우팅 구성

먼저 애플리케이션의 기본 경로를 구성합니다.

<code class="language-javascript">import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
import ProtectedRoute from "./ProtectedRoute";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route element={<ProtectedRoute />} path="/dashboard/*">
          <Route index element={<Dashboard />} /> {/*  添加index路由处理/dashboard */}
        </Route>
      </Routes>
    </Router>
  );
}

export default App;</code>

• ProtectedRoute 구성요소 생성

이 구성 요소는 보호된 경로를 렌더링하기 전에 사용자가 관리자로 인증되었는지 확인합니다. 그렇지 않은 경우 로그인 페이지로 리디렉션하세요.

<code class="language-javascript">import React from "react";
import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute = () => {
  // 从localStorage中检查用户是否为管理员
  const isAdmin = localStorage.getItem("role") === "admin";

  return isAdmin ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoute;</code>

코드 설명:

localStorage.getItem("role"): localStorage에 저장된 사용자 역할을 가져옵니다. 역할이 "admin"인 경우 보호된 경로의 콘텐츠를 나타내는 Outlet 구성 요소가 렌더링됩니다. 그렇지 않은 경우 Navigate 구성 요소를 사용하여 사용자를 루트 경로(/)로 리디렉션합니다.

• 로그인 페이지 만들기(Login) 이 페이지는 기본 로그인 프로세스를 시뮬레이션하고 localStorage에 사용자 역할을 저장합니다.

<code class="language-javascript">import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 模拟登录并保存用户角色
    localStorage.setItem("role", "admin");
    navigate("/dashboard");
  };

  return (
    <div>
      {/* 登录表单 */}
      <button onClick={handleLogin}>登录</button>
    </div>
  );
}

export default Login;</code>

• 대시보드 페이지 만들기

대시보드 페이지는 보호된 경로이므로 관리자 역할을 가진 사용자만 접근할 수 있습니다.

<code class="language-javascript">import React from "react";

function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      <p>这是受保护的页面内容。</p>
    </div>
  );
}

export default Dashboard;</code>

예시 프로세스

사용자 액세스 신청:

로그인하지 않은 경우에는 로그인 페이지(/)가 보입니다. 관리자로 로그인하면 역할이 localStorage에 저장되고 대시보드(/dashboard)로 리디렉션됩니다. 대시보드에는 보호된 콘텐츠(통계 및 구성)가 표시됩니다.

사용자가 관리자 권한 없이 대시보드에 직접 액세스하려고 하면 자동으로 로그인 페이지로 리디렉션됩니다.

요약

보호된 라우팅은 사용자 및 권한을 처리하는 애플리케이션에 매우 중요합니다. React Router DOM, Outlet 구성 요소 및 브라우저 저장소(예: localStorage)를 사용하여 기본 액세스 제한 시스템을 구현할 수 있습니다. 이 접근 방식은 소규모 애플리케이션이나 학습 프로젝트에 적합하지만 대규모 프로젝트에서는 더 강력한 인증 솔루션이 권장됩니다.

궁금하신 점은 댓글로 남겨주세요!

위 내용은 React 및 React Router DOM을 사용하여 보호된 경로를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!