Comment créer des routes protégées avec React et React Router DOM

Lors de la création d'applications Web à l'aide de React, nous devons souvent restreindre l'accès à certaines routes et autoriser l'accès uniquement aux utilisateurs authentifiés. Cet article expliquera comment créer une route protégée à l'aide de React, React-Router-dom et du composant Outlet, et montrera comment vérifier si l'utilisateur est un administrateur en fonction de la valeur stockée dans localStorage.

Qu'est-ce que le routage protégé ?

Les itinéraires protégés font référence à des pages accessibles uniquement aux utilisateurs qui remplissent des conditions spécifiques (telles qu'être authentifiés ou disposer d'autorisations spécifiques, telles que les autorisations d'administrateur). Si ces conditions ne sont pas remplies, l'utilisateur sera redirigé vers une autre page, telle qu'une page de connexion.

Prérequis

Avant de commencer, assurez-vous :

• React a été configuré dans le projet.
• React-router-dom installé :

npm install react-router-dom

Exemple : routage protégé avec vérification de l'administrateur

Cet exemple vérifiera que l'utilisateur est authentifié en tant qu'administrateur en vérifiant la valeur dans localStorage. S'il n'est pas administrateur, redirigez-le vers la page de connexion.

• Configuration du routage

Tout d’abord, configurez l’itinéraire principal de l’application.

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;

• Créer un composant ProtectedRoute

Ce composant vérifie que l'utilisateur est authentifié en tant qu'administrateur avant de restituer la route protégée. Sinon, redirigez-le vers la page de connexion.

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;

Explication du code :

localStorage.getItem("role") : Obtenez le rôle d'utilisateur stocké dans localStorage. Si le rôle est « admin », le composant Outlet est rendu, qui représente le contenu de la route protégée. Sinon, utilisez le composant Navigate pour rediriger l'utilisateur vers le chemin racine (/).

• Créer une page de connexion (Connexion) Cette page simule le processus de connexion de base et stocke le rôle de l'utilisateur dans 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;

• Créer une page de tableau de bord

La page du tableau de bord est une route protégée et n'est accessible qu'aux utilisateurs ayant le rôle d'administrateur.

import React from "react";

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

export default Dashboard;

Exemple de processus

Application d'accès utilisateur :

Si vous n'êtes pas connecté, vous verrez la page de connexion (/). Après vous être connecté en tant qu'administrateur, le rôle sera stocké dans localStorage et redirigé vers le tableau de bord (/dashboard). Dans le Tableau de bord, le contenu protégé (statistiques et configuration) est affiché.

Si un utilisateur tente d'accéder directement au tableau de bord sans droits d'administrateur, il sera automatiquement redirigé vers la page de connexion.

Résumé

Le routage protégé est essentiel pour les applications qui gèrent les utilisateurs et les autorisations. En utilisant le DOM de React Router, le composant Outlet et le stockage du navigateur (tel que localStorage), nous pouvons implémenter un système de restriction d'accès de base. Cette approche est idéale pour les petites applications ou les projets d'apprentissage, mais dans les projets plus importants, une solution d'authentification plus forte est recommandée.

Si vous avez des questions, n'hésitez pas à laisser un message dans la zone commentaire ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!