Protezione delle route basata sul middleware
Utilizzi il middleware di Next.js e le callback di autenticazione per reindirizzare gli utenti non autenticati sull'edge.
Protezione delle route basata sul middleware è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Che cos'è il middleware di Next.js?
Il middleware viene eseguito all'edge prima che una richiesta raggiunga una route. Può effettuare redirect, riscrivere gli URL o aggiungere intestazioni: è ideale per i controlli di autenticazione senza caricare i server component.
Creare il middleware
Crei middleware.ts nella radice del progetto. Esporti una funzione middleware e un matcher 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*'],
};Pattern dei matcher
L'array matcher utilizza pattern per i percorsi. Usi :path* per qualsiasi sottopercorso oppure escluda i percorsi con un negative lookahead.
export const config = {
matcher: [
// Protect all routes except public ones:
'/((?!login|register|_next|api/auth|favicon.ico).*)',
],
};Integrazione del middleware di Auth.js
Auth.js (v5) fornisce un export di middleware già pronto. Lo riesporti da middleware.ts insieme a un matcher.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/settings/:path*'],
};Controllare il JWT nel middleware
Verifichi un token JWT nel middleware utilizzando la libreria jose, compatibile con l'edge e senza il modulo crypto di 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));
}
}Middleware basato sui ruoli
Legga il ruolo dell'utente dal token ed esegua il redirect verso una pagina non autorizzata se il ruolo non è sufficiente.
const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
return NextResponse.redirect(new URL('/unauthorized', request.url));
}Passare dati agli handler delle route
Imposti un'intestazione della richiesta all'interno del middleware per passare i dati decodificati dell'utente ai server component senza recuperare nuovamente il token.
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');Riscrivere gli URL nel middleware
Utilizzi NextResponse.rewrite() per mostrare una pagina diversa per un URL senza modificare la barra degli indirizzi del browser, utile per i test A/B o i feature flag.
const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
return NextResponse.rewrite(new URL('/home-v2', request.url));
}Dati geografici e IP nel middleware
Acceda ai dati geografici della richiesta e all'IP dall'oggetto NextRequest per eseguire redirect o blocchi basati sulla regione.
const country = request.geo?.country ?? 'US';
if (country === 'XX') {
return NextResponse.redirect(new URL('/region-blocked', request.url));
}Prestazioni del middleware
Il middleware viene eseguito all'edge per ogni richiesta corrispondente. Lo mantenga leggero: eviti calcoli pesanti o import di grandi dimensioni. Utilizzi solo librerie compatibili con l'edge.
Combinare route protette e pubbliche
Un pattern comune consiste nel proteggere tutto tranne un elenco specifico di percorsi pubblici, verificato prima della logica di autenticazione.
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));Verifica rapida
Quale libreria dovrebbe utilizzare per verificare i JWT all'interno del middleware di Next.js invece del modulo crypto di Node?
Riepilogo
Crei middleware.ts nella radice del progetto con una configurazione matcher. Controlli i token di autenticazione con jose, compatibile con l'edge, esegua il redirect degli utenti non autenticati e passi i dati decodificati ai server component tramite le intestazioni della risposta. Mantenga il middleware rapido e con poche dipendenze.
Domande Frequenti
La lezione «Protezione delle route basata sul middleware» è gratuita?
Sì — il testo completo di «Protezione delle route basata sul middleware» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Protezione delle route basata sul middleware»?
Utilizzi il middleware di Next.js e le callback di autenticazione per reindirizzare gli utenti non autenticati sull'edge. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Protezione delle route basata sul middleware»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di Auth.js nell'App Router di Next.js
- Gestione delle sessioni e hook useSession
- Credentials Provider e login personalizzato
- Protezione delle route basata sul middleware