Routskydd med middleware
Använd Next.js-middleware och auth-callbacks för att omdirigera oautentiserade användare vid edge.
Routskydd med middleware är en gratis lektion i React Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.
Vad är Next.js Middleware?
Middleware körs på edge-nivån innan en begäran når en route. Den kan omdirigera, skriva om eller lägga till headers — perfekt för autentiseringskontroller utan att läsa in serverkomponenter.
Skapa middleware
Skapa middleware.ts i projektroten. Exportera en middleware-funktion och en config-matcher.
// 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*'],
};Matcher-mönster
Arrayen matcher använder sökvägsmönster. Använd :path* för valfri undersökväg eller exkludera sökvägar med ett negativt lookahead-uttryck.
export const config = {
matcher: [
// Protect all routes except public ones:
'/((?!login|register|_next|api/auth|favicon.ico).*)',
],
};Integrering av Auth.js Middleware
Auth.js (v5) tillhandahåller en färdig middleware-export. Exportera den vidare från middleware.ts tillsammans med en matcher.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/settings/:path*'],
};Kontrollera JWT i middleware
Verifiera en JWT-token i middleware med biblioteket jose (edge-kompatibelt — ingen Node.js crypto-modul).
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));
}
}Rollbaserad middleware
Läs användarens roll från token och omdirigera till en obehörighetssida om rollen inte ger tillräckliga behörigheter.
const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
return NextResponse.redirect(new URL('/unauthorized', request.url));
}Skicka data till route handlers
Ange en request-header i middleware för att skicka avkodade användardata till serverkomponenter utan att hämta token igen.
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');Skriva om URL:er i middleware
Använd NextResponse.rewrite() för att visa en annan sida för en URL utan att ändra adressfältet i webbläsaren — användbart för A/B-tester eller feature flags.
const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
return NextResponse.rewrite(new URL('/home-v2', request.url));
}Geodata och IP i middleware
Hämta geografiska data och IP-adress från NextRequest-objektet för regionbaserade omdirigeringar eller blockeringar.
const country = request.geo?.country ?? 'US';
if (country === 'XX') {
return NextResponse.redirect(new URL('/region-blocked', request.url));
}Middleware-prestanda
Middleware körs på edge-nivån för varje matchande begäran. Håll den lättviktig — undvik tunga beräkningar och stora importer. Använd endast edge-kompatibla bibliotek.
Kombinera autentiserade och offentliga routes
Ett vanligt mönster är att skydda allt utom en specifik lista över offentliga sökvägar, som kontrolleras innan autentiseringslogiken körs.
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));Snabbkontroll
Vilket bibliotek bör du använda för att verifiera JWT:er i Next.js middleware i stället för Node:s crypto-modul?
Sammanfattning
Skapa middleware.ts i projektroten med en matcher-konfiguration. Kontrollera autentiseringstoken med edge-kompatibla jose, omdirigera oautentiserade användare och skicka avkodade data till serverkomponenter via response-headers. Håll middleware snabb och beroendesnål.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Routskydd med middleware” gratis?
Ja – hela texten till ”Routskydd med middleware” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Routskydd med middleware”?
Använd Next.js-middleware och auth-callbacks för att omdirigera oautentiserade användare vid edge. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Routskydd med middleware”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera Auth.js i Next.js App Router
- Sessionshantering och useSession-hooken
- Credentials Provider och anpassad inloggning
- Routskydd med middleware