React Academy · Leçon

Protection des routes basée sur un middleware

Utilisez le middleware Next.js et les rappels d’authentification pour rediriger les utilisateurs non authentifiés au niveau périphérique.

Protection des routes basée sur un middleware est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Qu’est-ce que l’intergiciel Next.js ?

L’intergiciel s’exécute en périphérie avant qu’une requête n’atteigne une route. Il peut effectuer une redirection, une réécriture ou ajouter des en-têtes — ce qui est idéal pour vérifier l’authentification sans charger de composants serveur.

Créer un intergiciel

Créez middleware.ts à la racine du projet. Exportez une fonction middleware et un filtre config.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Motifs de correspondance

Le tableau matcher utilise des motifs de chemin. Utilisez :path* pour n’importe quel sous-chemin, ou excluez des chemins avec une assertion anticipée négative.

export const config = {
  matcher: [
    // Protect all routes except public ones:
    '/((?!login|register|_next|api/auth|favicon.ico).*)',
  ],
};

Intégration de l’intergiciel Auth.js

Auth.js (v5) fournit un export d’intergiciel prêt à l’emploi. Réexportez-le depuis middleware.ts avec un filtre.

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*'],
};

Vérifier un JWT dans l’intergiciel

Vérifiez un jeton JWT dans l’intergiciel à l’aide de la bibliothèque jose (compatible avec la périphérie — sans module crypto de Node.js).

import { jwtVerify } from 'jose';

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  try {
    await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
    return NextResponse.next();
  } catch {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

Intergiciel basé sur les rôles

Lisez le rôle de l’utilisateur dans le jeton et redirigez-le vers une page d’accès non autorisé si son rôle est insuffisant.

const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
  return NextResponse.redirect(new URL('/unauthorized', request.url));
}

Transmettre des données aux gestionnaires de route

Définissez un en-tête de requête dans l’intergiciel pour transmettre les données utilisateur décodées aux composants serveur sans récupérer de nouveau le jeton.

const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;

// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');

Réécrire des URL dans l’intergiciel

Utilisez NextResponse.rewrite() pour servir une page différente pour une URL sans modifier la barre d’adresse du navigateur — ce qui est utile pour les tests A/B ou les indicateurs de fonctionnalité.

const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
  return NextResponse.rewrite(new URL('/home-v2', request.url));
}

Géolocalisation et IP dans l’intergiciel

Accédez aux données de géolocalisation de la requête et à son IP depuis l’objet NextRequest pour effectuer des redirections ou des blocages selon la région.

const country = request.geo?.country ?? 'US';
if (country === 'XX') {
  return NextResponse.redirect(new URL('/region-blocked', request.url));
}

Performances de l’intergiciel

L’intergiciel s’exécute en périphérie pour chaque requête correspondante. Gardez-le léger — évitez les calculs lourds ou les importations volumineuses. Utilisez uniquement des bibliothèques compatibles avec la périphérie.

Combiner les routes authentifiées et publiques

Un schéma courant consiste à protéger tout le contenu, à l’exception d’une liste d’autorisation de chemins publics spécifiques vérifiée avant la logique d’authentification.

const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();

// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));

Vérification rapide

Quelle bibliothèque devez-vous utiliser pour vérifier des JWT dans l’intergiciel Next.js plutôt que le module crypto de Node.js ?

Récapitulatif

Créez middleware.ts à la racine du projet avec une configuration matcher. Vérifiez les jetons d’authentification avec jose, compatible avec la périphérie, redirigez les utilisateurs non authentifiés et transmettez les données décodées aux composants serveur via les en-têtes de réponse. Gardez l’intergiciel rapide et limitez ses dépendances.

Questions Fréquemment Posées

La leçon « Protection des routes basée sur un middleware » est-elle gratuite ?

Oui — le texte complet de « Protection des routes basée sur un middleware » 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 « Protection des routes basée sur un middleware » ?

Utilisez le middleware Next.js et les rappels d’authentification pour rediriger les utilisateurs non authentifiés au niveau périphérique. 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 4 sur 4.

Combien de temps prend la leçon « Protection des routes basée sur un middleware » ?

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

Configurer Auth.js dans l’App Router de Next.js
Gestion des sessions et hook useSession
Fournisseur d’identifiants et connexion personnalisée
Protection des routes basée sur un middleware

← Retour à React Academy