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>這是受保護(hù)的頁(yè)面內(nèi)容。</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!