如何使用 React 和 React Router DOM 创建受保护的路由

在使用React构建Web应用时，我们经常需要限制对某些路由的访问，只允许已认证的用户访问。本文将讲解如何使用React、react-router-dom和Outlet组件创建受保护的路由，并演示如何基于localStorage中存储的值验证用户是否为管理员。

什么是受保护路由？

受保护路由是指只有满足特定条件（例如已认证或拥有特定权限，比如管理员权限）的用户才能访问的页面。如果不满足这些条件，用户将被重定向到其他页面，例如登录页面。

先决条件

开始之前，请确保：

• 已在项目中配置React。
• 已安装react-router-dom：

npm install react-router-dom

示例：带有管理员验证的受保护路由

此示例将通过检查localStorage中的值来验证用户是否已认证为管理员。如果不是管理员，则将其重定向到登录页面。

• 路由配置

首先，配置应用程序的主要路由。

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;

• 创建ProtectedRoute组件

此组件在渲染受保护路由之前验证用户是否已认证为管理员。如果不是，则将其重定向到登录页面。

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;

代码解释：

localStorage.getItem("role"): 获取存储在localStorage中的用户角色。 如果角色是“admin”，则渲染Outlet组件，它代表受保护路由的内容。 如果不是，则使用Navigate组件将用户重定向到根路径（/）。

• 创建登录页面(Login) 此页面模拟基本的登录过程，并将用户角色存储在localStorage中。

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;

• 创建Dashboard页面

Dashboard页面是受保护的路由，只有具有管理员角色的用户才能访问。

import React from "react";

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

export default Dashboard;

示例流程

用户访问应用程序：

如果未登录，则会看到登录页面(/)。 登录为管理员后，角色将存储在localStorage中，并重定向到Dashboard(/dashboard)。 在Dashboard中，显示受保护的内容（统计信息和配置）。

如果用户尝试直接访问Dashboard而没有管理员权限，则会自动重定向到登录页面。

总结

受保护的路由对于处理用户和权限的应用程序至关重要。使用React Router DOM、Outlet组件和浏览器存储（如localStorage），我们可以实现一个基本的访问限制系统。这种方法非常适合小型应用程序或学习项目，但在大型项目中，建议使用更强大的身份验证解决方案。

有任何问题，请在评论区留言! ?

以上是如何使用 React 和 React Router DOM 创建受保护的路由的详细内容。更多信息请关注PHP中文网其他相关文章！