0Pricing
React Academy · Leçon

Routes protégées et gardes d’authentification

Redirigez les utilisateurs non authentifiés vers la connexion avec des composants enveloppes ou des gardes fondés sur des chargeurs.

Routes protégées et gardes d’authentification est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Pourquoi protéger les routes ?

Certaines pages (tableau de bord, profil, administration) ne devraient être accessibles qu’aux utilisateurs authentifiés. React Router propose deux approches : les composants enveloppes et les protections fondées sur les chargeurs.

Structure de l’état d’authentification

Commencez par établir un contexte d’authentification que les composants pourront lire pour savoir si l’utilisateur est connecté.

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = async (creds) => { const u = await apiLogin(creds); setUser(u); };
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

Protection avec un composant enveloppe

Créez un composant PrivateRoute qui vérifie l’authentification et redirige vers la page de connexion si l’utilisateur n’est pas authentifié.

import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

// Usage in router:
{ element: <PrivateRoute />, children: [
  { path: '/dashboard', element: <Dashboard /> },
]}

Conserver l’URL de redirection

Enregistrez l’URL demandée afin de pouvoir y renvoyer l’utilisateur après sa connexion. Transmettez-la via state dans le composant Navigate.

function PrivateRoute() {
  const { user } = useAuth();
  const location = useLocation();
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return <Outlet />;
}

// In login handler:
const location = useLocation();
const from = location.state?.from?.pathname || '/';
navigate(from, { replace: true });

Protection fondée sur un chargeur (routeur de données)

Dans l’API du routeur de données, ajoutez une vérification d’authentification au loader de la route. Lancez une redirection si l’utilisateur n’est pas authentifié.

import { redirect } from 'react-router-dom';

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token) throw redirect('/login');
  return token;
}

const router = createBrowserRouter([
  {
    path: '/dashboard',
    loader: requireAuth,
    element: <Dashboard />,
  },
]);

Protections fondées sur les rôles

Étendez la protection pour vérifier les rôles. Redirigez vers une page d’accès non autorisé si l’utilisateur ne possède pas le rôle requis.

function AdminRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (user.role !== 'admin') return <Navigate to="/unauthorized" replace />;
  return <Outlet />;
}

État de chargement pendant la vérification d’authentification

Si l’état d’authentification est chargé de manière asynchrone (par exemple depuis un serveur), affichez un indicateur de chargement pendant la vérification afin d’éviter l’apparition momentanée de la page de connexion.

function PrivateRoute() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

Protéger plusieurs routes à la fois

Regroupez toutes les routes protégées sous une seule enveloppe PrivateRoute afin de ne pas répéter la protection pour chaque route.

const router = createBrowserRouter([
  { path: '/login', element: <Login /> },
  {
    element: <PrivateRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
]);

Gérer l’expiration du jeton

Vérifiez l’expiration du jeton dans la protection ou dans un intercepteur global, puis déconnectez l’utilisateur lorsque le jeton expire en le redirigeant vers la page de connexion.

function isTokenValid(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000 > Date.now();
}

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token || !isTokenValid(token)) throw redirect('/login');
  return token;
}

Flux de renouvellement du jeton

Avant d’effectuer une redirection en cas de réponse 401, tentez de renouveler le jeton. Ne redirigez vers la page de connexion que si le renouvellement échoue également.

async function requireAuth() {
  let token = localStorage.getItem('token');
  if (!token || isExpired(token)) {
    token = await refreshToken();
    if (!token) throw redirect('/login');
    localStorage.setItem('token', token);
  }
  return token;
}

Conserver l’authentification après les rechargements

Stockez le jeton d’authentification dans localStorage ou dans un cookie HttpOnly. Au chargement de l’application, restaurez l’état d’authentification avant d’afficher les routes protégées.

Vérification rapide

Lorsqu’une protection d’authentification fondée sur un chargeur est utilisée dans React Router, que devez-vous lancer pour rediriger un utilisateur non authentifié ?

Récapitulatif

Protégez les routes avec une enveloppe PrivateRoute utilisant <Outlet />, ou avec un chargeur qui lance redirect(). Conservez l’URL demandée dans l’état de navigation, gérez les états de chargement pour éviter les apparitions momentanées et regroupez les routes protégées afin d’éviter les répétitions.

Questions Fréquemment Posées

La leçon « Routes protégées et gardes d’authentification » est-elle gratuite ?

Oui — le texte complet de « Routes protégées et gardes d’authentification » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Routes protégées et gardes d’authentification » ?

Redirigez les utilisateurs non authentifiés vers la connexion avec des composants enveloppes ou des gardes fondés sur des chargeurs. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Routes protégées et gardes d’authentification » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Routes imbriquées et mises en page Outlet
  2. Chargeurs et actions (API du routeur de données)
  3. Routes protégées et gardes d’authentification
  4. Gérer l’état dans les paramètres de recherche de l’URL
← Retour à React Academy