Implémentation de Route Guards dans React : protéger vos routes avec l'authentification et les rôles

Route Guards dans React

Les

Route Guards dans React font référence au mécanisme qui restreint ou autorise l'accès à certaines routes en fonction de conditions ou de critères spécifiques, tels que l'authentification des utilisateurs, les rôles, les autorisations ou même la disponibilité des données. Il s'agit d'une exigence courante dans les applications avec des routes privées ou protégées (par exemple, tableaux de bord d'administration, profils d'utilisateur ou autres zones sensibles).

Les gardes d'itinéraire empêchent les utilisateurs non autorisés d'accéder à des itinéraires restreints en les redirigeant vers une autre page ou en affichant un message d'erreur lorsqu'ils tentent d'accéder à un itinéraire qu'ils ne sont pas autorisés à consulter.

Dans React, des gardes de route peuvent être implémentés en utilisant React Router en combinaison avec une logique personnalisée, telle que des états d'authentification ou un contrôle d'accès basé sur les rôles.

---

Comment fonctionnent les gardes de route

1. Vérifier l'authentification de l'utilisateur : Déterminez si l'utilisateur est connecté.
2. Redirection ou restriction d'accès : si l'utilisateur n'est pas autorisé, redirigez-le vers une page de connexion, une page d'autorisation refusée ou toute autre vue appropriée.
3. Contrôle d'accès basé sur le rôle : pour les applications avec plusieurs rôles d'utilisateur (par exemple, administrateur, invité ou utilisateur régulier), limitez l'accès en fonction du rôle de l'utilisateur.

---

Exemple d'implémentation de Route Guards dans React

Voyons comment implémenter des gardes de route à l'aide de React Router avec un garde d'authentification de base. Nous vérifierons si l'utilisateur est authentifié et restituerons conditionnellement les itinéraires en fonction de cela.

---

Exemple de base : protection des itinéraires basée sur l'authentification

Dans cet exemple, nous utiliserons un garde de route pour vérifier si l'utilisateur est authentifié avant d'autoriser l'accès à un itinéraire restreint comme /dashboard.

Étape 1 : Créer le composant Route Guard

Nous allons créer un composant PrivateRoute qui vérifie si un utilisateur est authentifié et autorise l'accès à la route protégée ou le redirige vers la page de connexion.

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;

• Le composant PrivateRoute prend l'élément (qui est le composant de route protégé), le booléen isAuthenticated et le reste des accessoires de route (...rest).
• Si isAuthenticated est vrai, il restitue le composant (élément) protégé. Dans le cas contraire, il redirige l'utilisateur vers la page de connexion à l'aide du bouton composant.

---

Étape 2 : Configurer des itinéraires avec des gardes de route

Maintenant, configurons l'application principale dans laquelle nous utilisons PrivateRoute pour protéger certaines routes comme /dashboard.

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;

Explication :

• Nous utilisons un simple état isAuthenticated pour savoir si l'utilisateur est connecté ou non.
• Si l'utilisateur est connecté (c'est-à-dire que isAuthenticated est vrai), il peut accéder à la route /dashboard. Sinon, ils sont redirigés vers la page /login.
• Le composant PrivateRoute est utilisé pour garder la route /dashboard.
• Nous basculons l'état isAuthenticated à l'aide du bouton de connexion. Si l'utilisateur clique sur le bouton, il est soit connecté, soit déconnecté.

---

Exemple 2 : gardes de route basés sur les rôles des utilisateurs

Dans cet exemple, nous implémenterons un garde de route qui autorise uniquement l'accès à la route /admin si l'utilisateur a un rôle d'administrateur.

Étape 1 : Créer un garde-route basé sur les rôles

Nous modifierons le composant PrivateRoute pour gérer à la fois l'authentification et l'accès basé sur les rôles.

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;

Étape 2 : Protéger les itinéraires en fonction du rôle

Dans l'application principale, nous mettrons en place un garde de route basé sur les rôles qui autorise l'accès à la route /admin uniquement si l'utilisateur est un administrateur.

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;

Explication :

• Le composant RoleBasedRoute vérifie à la fois si l'utilisateur est authentifié et si son rôle correspond au rôle requis pour la route (par exemple, seuls les utilisateurs avec le rôle « admin » peuvent accéder à la page /admin).
• L'état userRole détermine si l'utilisateur est un administrateur ou un utilisateur régulier.
• Vous pouvez basculer entre les rôles « utilisateur » et « administrateur » à l'aide du bouton.

---

Conclusion

Les gardes d'itinéraire sont une fonctionnalité essentielle pour contrôler l'accès à des parties spécifiques de votre application en fonction de conditions telles que l'authentification et les rôles des utilisateurs. Ils contribuent à améliorer la sécurité et les fonctionnalités de votre application en garantissant que seuls les utilisateurs autorisés peuvent accéder à certains itinéraires. React Router facilite la mise en œuvre de gardes de route en utilisant le rendu conditionnel, le composant Navigate pour la redirection et des composants personnalisés pour gérer une logique complexe.

---

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!