Route protégée

Une route protégée (ou private route) est une page ou une section d’une application React dont l’accès est conditionné par une vérification d’authentification.

L’objectif est de garantir qu’un utilisateur non connecté ne puisse pas visualiser certaines zones sensibles de l’application, comme son profil, son tableau de bord ou une interface d’administration .

Fonctionnement :

Une route est qualifiée de « protégée » lorsqu’elle est enveloppée dans un mécanisme de contrôle qui suit une logique simple et efficace :

Vérification :

Avant d’afficher le contenu, le système vérifie si l’utilisateur est authentifié (par exemple, en lisant un token JWT stocké ou un état global) .

Rendu conditionnel :

Si l’utilisateur est connecté : Le composant de la page est rendu et affiché normalement.

Si l’utilisateur n’est pas connecté : L’accès est refusé. L’utilisateur est immédiatement redirigé vers une page publique, le plus souvent la page de connexion (/login) .

À retenir : Une route protégée n’est pas un type de route spécifique, mais un comportement que l’on applique à une route pour la sécuriser. La plupart des frameworks de routage pour React (React Router, Expo Router) permettent de mettre en place ce mécanisme de façon déclarative.

Comment protéger une route dans React ?

Il existe plusieurs manières de mettre en place une protection. Voici les deux approches les plus répandues et maintenables.

Approche 1 : Le composant « Wrapper » (Recommandée pour la plupart des cas)

Cette méthode consiste à créer un composant « conteneur » (comme RequireAuth ou ProtectedRoute) qui va envelopper les routes à sécuriser. Ce composant va vérifier l’état d’authentification et, si l’utilisateur n’est pas connecté, utiliser le composant de React Router pour le rediriger.

Cette approche est particulièrement efficace avec le pattern des routes imbriquées (nested routes), en utilisant le composant.

Le composant RequireAuth agit alors comme un layout de sécurité : il vérifie l’authentification une fois, et toutes les routes qui sont ses enfants héritent automatiquement de cette protection.

Exemple de code (avec React Router) :

jsx

import { Navigate, Outlet, useLocation } from "react-router-dom";
import { useAuth } from "./hooks/useAuth";

// Un composant qui agit comme un garde pour les routes
function RequireAuth() {
const { user } = useAuth(); // On récupère l'état de connexion
const location = useLocation(); // Pour rediriger l'utilisateur vers la page qu'il voulait visiter après sa connexion

if (!user) {
// Si l'utilisateur n'est pas connecté, on le redirige vers /login
// On garde en mémoire l'endroit d'où il venait
return ;
}

// Si l'utilisateur est connecté, on affiche la route enfant (le )
return ;
}

// Dans la configuration du routeur
const router = createBrowserRouter([
{
// Toutes les routes sous le layout RequireAuth sont protégées
element: ,
children: [
{ path: "/dashboard", element: },
{ path: "/profile", element: },
],
},
{ path: "/login", element: },
{ path: "/", element: },
]);

Approche 2 : Le « Loader » (Approche plus avancée)

Avec les versions récentes de React Router (v6.4+), il est également possible de protéger une route au niveau de son chargeur de données (loader) . Cette méthode est plus « bas niveau » et intercepte la requête avant même que le composant ne soit chargé. Si l’utilisateur n’est pas connecté, le loader peut déclencher une redirection côté serveur ou côté client (via un objet redirect) .

Elle est généralement privilégiée quand on souhaite une vérification avant le rendu pour éviter d’afficher un flash de contenu non protégé et pour une meilleure intégration avec les mécanismes de données.