Ochrona tras oparta na middleware
Używanie middleware Next.js i callbacków uwierzytelniania do przekierowywania nieuwierzytelnionych użytkowników na brzegu sieci.
Ochrona tras oparta na middleware to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Czym jest middleware Next.js?
Middleware działa na brzegu sieci przed dotarciem żądania do trasy. Może przekierowywać, przepisywać adresy URL lub dodawać nagłówki — idealnie nadaje się do sprawdzania uwierzytelnienia bez ładowania komponentów serwerowych.
Tworzenie middleware
Należy utworzyć middleware.ts w katalogu głównym projektu. Należy wyeksportować funkcję middleware oraz matcher konfiguracji 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*'],
};Wzorce dopasowania
Tablica matcher używa wzorców ścieżek. Należy użyć :path* dla dowolnej podścieżki albo wykluczać ścieżki za pomocą negative lookahead.
export const config = {
matcher: [
// Protect all routes except public ones:
'/((?!login|register|_next|api/auth|favicon.ico).*)',
],
};Integracja middleware z Auth.js
Auth.js (v5) udostępnia gotowy eksport middleware. Należy wyeksportować go ponownie z middleware.ts wraz z matcherem.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/settings/:path*'],
};Sprawdzanie JWT w middleware
Token JWT należy weryfikować w middleware za pomocą biblioteki jose zgodnej ze środowiskiem edge — bez modułu crypto 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 oparte na rolach
Należy odczytać rolę użytkownika z tokenu i przekierować go na stronę informującą o braku uprawnień, jeśli rola jest niewystarczająca.
const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
return NextResponse.redirect(new URL('/unauthorized', request.url));
}Przekazywanie danych do handlerów tras
W middleware należy ustawić nagłówek żądania, aby przekazać zdekodowane dane użytkownika do komponentów serwerowych bez ponownego pobierania tokenu.
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');Przepisywanie adresów URL w middleware
Należy użyć NextResponse.rewrite(), aby wyświetlić inną stronę dla danego adresu URL bez zmiany zawartości paska adresu przeglądarki — jest to przydatne podczas testów A/B lub korzystania z flag funkcji.
const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
return NextResponse.rewrite(new URL('/home-v2', request.url));
}Dane geograficzne i adres IP w middleware
Z obiektu NextRequest można pobierać dane geograficzne żądania i adres IP, aby przekierowywać użytkowników lub ich blokować na podstawie regionu.
const country = request.geo?.country ?? 'US';
if (country === 'XX') {
return NextResponse.redirect(new URL('/region-blocked', request.url));
}Wydajność middleware
Middleware działa na brzegu sieci dla każdego dopasowanego żądania. Należy zadbać o jego lekkość — unikać kosztownych obliczeń i dużych importów. Należy używać wyłącznie bibliotek zgodnych ze środowiskiem edge.
Łączenie tras chronionych i publicznych
Popularny wzorzec polega na ochronie wszystkiego poza określoną listą dozwolonych publicznych ścieżek, sprawdzaną przed logiką uwierzytelniania.
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));Szybkie sprawdzenie
Jakiej biblioteki należy użyć do weryfikowania tokenów JWT wewnątrz middleware Next.js zamiast modułu crypto Node.js?
Podsumowanie
Należy utworzyć middleware.ts w katalogu głównym projektu wraz z konfiguracją matcher. Tokeny uwierzytelniania należy sprawdzać za pomocą zgodnej ze środowiskiem edge biblioteki jose, przekierowywać nieuwierzytelnionych użytkowników i przekazywać zdekodowane dane do komponentów serwerowych za pomocą nagłówków odpowiedzi. Middleware powinno działać szybko i mieć niewiele zależności.
Często zadawane pytania
Czy lekcja „Ochrona tras oparta na middleware” jest bezpłatna?
Tak — pełny tekst „Ochrona tras oparta na middleware” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Ochrona tras oparta na middleware”?
Używanie middleware Next.js i callbacków uwierzytelniania do przekierowywania nieuwierzytelnionych użytkowników na brzegu sieci. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Ochrona tras oparta na middleware”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja Auth.js w Next.js App Router
- Zarządzanie sesją i hook useSession
- Dostawca Credentials i niestandardowe logowanie
- Ochrona tras oparta na middleware