React에서 Route Guard 구현: 인증 및 역할로 경로 보호

React의 Route Guard

React의

Route Guard는 사용자 인증, 역할, 권한 또는 데이터 가용성과 같은 특정 조건이나 기준에 따라 특정 경로에 대한 액세스를 제한하거나 허용하는 메커니즘을 나타냅니다. 이는 비공개 또는 보호된 경로(예: 관리 대시보드, 사용자 프로필 또는 기타 민감한 영역)가 있는 애플리케이션의 일반적인 요구 사항입니다.

경로 가드는 권한이 없는 사용자가 볼 수 없는 경로에 액세스하려고 할 때 다른 페이지로 리디렉션하거나 오류 메시지를 표시하여 제한된 경로에 액세스하는 것을 방지합니다.

React에서는 React Router를 인증 상태 또는 역할 기반 액세스 제어와 같은 사용자 정의 로직과 함께 활용하여 경로 보호를 구현할 수 있습니다.

---

루트 가드 작동 방식

1. 사용자 인증 확인: 사용자가 로그인되어 있는지 확인합니다.
2. 액세스 리디렉션 또는 제한: 사용자가 인증되지 않은 경우 로그인 페이지, 권한 거부 페이지 또는 기타 적절한 보기로 리디렉션합니다.
3. 역할 기반 액세스 제어: 여러 사용자 역할(예: 관리자, 게스트 또는 일반 사용자)이 있는 앱의 경우 사용자 역할을 기반으로 액세스를 제한하세요.

---

React에서 Route Guard 구현 예

기본 인증 가드와 함께 React Router를 사용하여 경로 가드를 구현하는 방법을 살펴보겠습니다. 사용자가 인증되었는지 확인하고 이를 기반으로 조건부로 경로를 렌더링합니다.

---

기본 예: 인증 기반 경로 보호

이 예에서는 /dashboard와 같은 제한된 경로에 대한 액세스를 허용하기 전에 경로 가드를 사용하여 사용자가 인증되었는지 확인합니다.

1단계: Route Guard 구성요소 생성

사용자가 인증되었는지 확인하고 보호된 경로에 대한 액세스를 허용하거나 로그인 페이지로 리디렉션하는 PrivateRoute 구성 요소를 생성하겠습니다.

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

// PrivateRoute component for protecting routes
const PrivateRoute = ({ element, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

export default PrivateRoute;

• PrivateRoute 구성 요소는 요소(보호된 경로 구성 요소), isAuthenticated 부울 및 나머지 경로 소품(...rest)을 사용합니다.
• isAuthenticated가 true이면 보호된 구성 요소(요소)를 렌더링합니다. 그렇지 않은 경우 구성요소입니다.

---

2단계: Route Guard를 사용하여 경로 설정

이제 /dashboard와 같은 특정 경로를 보호하기 위해 PrivateRoute를 사용하는 기본 애플리케이션을 설정해 보겠습니다.

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

// PrivateRoute component for protecting routes
const PrivateRoute = ({ element, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

export default PrivateRoute;

설명:

• 간단한 isAuthenticated 상태를 사용하여 사용자의 로그인 여부를 추적합니다.
• 사용자가 로그인한 경우(즉, isAuthenticated가 true인 경우) /dashboard 경로에 액세스할 수 있습니다. 그렇지 않으면 /login 페이지로 리디렉션됩니다.
• PrivateRoute 구성 요소는 /dashboard 경로를 보호하는 데 사용됩니다.
• 로그인 버튼을 사용하여 isAuthenticated 상태를 전환합니다. 사용자가 버튼을 클릭하면 로그인 또는 로그아웃됩니다.

---

예 2: 사용자 역할 기반 경로 보호

이 예에서는 사용자에게 관리자 역할이 있는 경우에만 /admin 경로에 대한 액세스를 허용하는 경로 가드를 구현합니다.

1단계: 역할 기반 Route Guard 생성

인증 및 역할 기반 액세스를 모두 처리하도록 PrivateRoute 구성 요소를 수정하겠습니다.

import React, { useState } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import PrivateRoute from './PrivateRoute'; // Import the route guard

// Simple page components
const Home = () => <h2>Home Page</h2>;
const Login = () => <h2>Login Page</h2>;
const Dashboard = () => <h2>Dashboard (Private)</h2>;

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false); // Authentication state

  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/dashboard">Dashboard</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        {/* Protected route using PrivateRoute */}
        <PrivateRoute
          path="/dashboard"
          isAuthenticated={isAuthenticated}
          element={<Dashboard />}
        />
      </Routes>

      <div>
        {/* Toggle authentication state */}
        <button onClick={() => setIsAuthenticated(!isAuthenticated)}>
          {isAuthenticated ? "Logout" : "Login"}
        </button>
      </div>
    </BrowserRouter>
  );
};

export default App;

2단계: 역할에 따른 경로 보호

기본 애플리케이션에서는 사용자가 관리자인 경우에만 /admin 경로에 대한 액세스를 허용하는 역할 기반 경로 보호를 설정합니다.

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

// Role-based Route Guard
const RoleBasedRoute = ({ element, isAuthenticated, userRole, requiredRole, ...rest }) => {
  return (
    <Route
      {...rest}
      element={
        isAuthenticated && userRole === requiredRole
          ? element
          : <Navigate to="/login" />
      }
    />
  );
};

export default RoleBasedRoute;

설명:

• RoleBasedRoute 구성 요소는 사용자가 인증되었는지와 해당 역할이 경로에 필요한 역할과 일치하는지 여부를 모두 확인합니다(예: 'admin' 역할을 가진 사용자만 /admin 페이지에 액세스할 수 있음).
• userRole 상태는 사용자가 관리자인지 일반 사용자인지를 결정합니다.
• 버튼을 사용하여 '사용자' 역할과 '관리자' 역할 간에 전환할 수 있습니다.

---

결론

경로 가드는 인증 및 사용자 역할과 같은 조건을 기반으로 애플리케이션의 특정 부분에 대한 액세스를 제어하는 ​​데 필수적인 기능입니다. 승인된 사용자만 특정 경로에 액세스할 수 있도록 하여 앱의 보안과 기능을 향상시키는 데 도움이 됩니다. React Router를 사용하면 조건부 렌더링, 리디렉션을 위한 Navigate 구성 요소, 복잡한 논리를 처리하는 사용자 정의 구성 요소를 사용하여 경로 보호를 쉽게 구현할 수 있습니다.

---

위 내용은 React에서 Route Guard 구현: 인증 및 역할로 경로 보호의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!