React Academy · leksjon

Rutebeskyttelse basert på middleware

Bruk Next.js-middleware og auth-callbacks til å omdirigere uautentiserte brukere ved edge-laget.

Leksjon 4 av 413 trinn

Rutebeskyttelse basert på middleware er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva er Next.js Middleware?

Middleware kjører på edge-nivået før en forespørsel når en rute. Den kan omdirigere, skrive om eller legge til headere – ideelt for autentiseringssjekker uten å laste inn serverkomponenter.

Opprette middleware

Opprett middleware.ts i prosjektroten. Eksporter en middleware-funksjon og 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ønstre

matcher-matrisen bruker banemønstre. Bruk :path* for alle underbaner, eller ekskluder baner med et negativt lookahead-uttrykk.

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) tilbyr en ferdig middleware-eksport. Eksporter den på nytt fra middleware.ts med en matcher.

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

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

Kontrollere JWT i middleware

Bekreft et JWT-token i middleware ved hjelp av biblioteket jose (kompatibelt med edge – 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));
  }
}

Rollebasert middleware

Les brukerrollen fra tokenet, og omdiriger til en side for uautorisert tilgang hvis rollen ikke gir tilstrekkelige rettigheter.

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

Sende data til rutehåndterere

Angi en request-header i middleware for å sende dekodede brukerdata til serverkomponenter uten å hente tokenet på nytt.

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');

Skrive om URL-er i middleware

Bruk NextResponse.rewrite() for å vise en annen side for en URL uten å endre adresselinjen i nettleseren – nyttig for A/B-tester eller funksjonsflagg.

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

Geo og IP i middleware

Få tilgang til geografiske data og IP-adressen for forespørselen fra NextRequest-objektet for regionale omdirigeringer eller blokkering.

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

Middleware-ytelse

Middleware kjører på edge-nivået for hver samsvarende forespørsel. Hold den lett – unngå tunge beregninger eller store importer. Bruk bare biblioteker som er kompatible med edge.

Kombinere autentiserte og offentlige ruter

Et vanlig mønster er å beskytte alt bortsett fra en spesifikk tillatelsesliste med offentlige baner, som kontrolleres før autentiseringslogikken.

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));

Hurtigsjekk

Hvilket bibliotek bør du bruke til å bekrefte JWT-er i Next.js-middleware i stedet for Node sin crypto-modul?

Besvar den i den interaktive leksjonen

Oppsummering

Opprett middleware.ts i prosjektroten med en matcher-konfigurasjon. Kontroller autentiseringstokener med edge-kompatible jose, omdiriger uautentiserte brukere, og send dekodede data til serverkomponenter via responsheadere. Hold middleware rask og avhengighetene få.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Rutebeskyttelse basert på middleware» gratis?

Ja – hele teksten i «Rutebeskyttelse basert på middleware» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Rutebeskyttelse basert på middleware»?

Bruk Next.js-middleware og auth-callbacks til å omdirigere uautentiserte brukere ved edge-laget. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Rutebeskyttelse basert på middleware»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Sette opp Auth.js i Next.js App Router
Sesjonsadministrasjon og useSession-hooken
Credentials Provider og egendefinert innlogging
Rutebeskyttelse basert på middleware

← Tilbake til React Academy