Middleware ja käyttöoikeuksien hallinta
Suojatkaa reitit ja API-päätepisteet Next.js Middleware -toiminnon avulla valtuutusta ja uudelleenohjausta varten.
Middleware ja käyttöoikeuksien hallinta on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -täyden pinon verkkosovellukset-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.
Pyyntöjen sieppaaminen Middleware-toiminnolla
Tervetuloa oppitunnille 3! Tässä oppitunnissa tutustumme Next.js Middleware -toimintoon. Ajatelkaa middleware-toimintoa sovelluksen portinvartijana.
Sen avulla voitte suorittaa koodia ennen pyynnön valmistumista sekä tarkastella, muokata tai jopa uudelleenohjata pyyntöjä tiettyjen ehtojen perusteella. Tämä on erittäin hyödyllistä käyttöoikeuksien hallinnassa!
Ensimmäisen Middleware-toiminnon luominen
Middleware-toiminnon luomiseksi lisäätte projektinne juureen tai src-hakemistoon yksinkertaisesti middleware.ts- (tai .js-)tiedoston.
Tiedoston on vietävä oletuksena funktio, joka ottaa parametrikseen NextRequest-olion ja palauttaa NextResponse-olion. Luodaan perustason toiminto:
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
console.log('Middleware is running!');
// Continue to the requested page
return NextResponse.next();
}Perusuudelleenohjaus käyttöoikeuksien hallintaan
Middleware-toiminnon yleinen käyttötapaus on reittien suojaaminen. Voitte esimerkiksi ohjata kirjautumattomat käyttäjät pois hallintapaneelin sivulta.
Tässä simuloimme 'auth_token'-evästeen tarkistamista. Jos eväste puuttuu, ohjaamme käyttäjän etusivulle.
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const isAuthenticated = request.cookies.has('auth_token');
const { pathname } = request.nextUrl;
// If not authenticated and trying to access /dashboard
if (!isAuthenticated && pathname.startsWith('/dashboard')) {
console.log('User not authenticated, redirecting...');
return NextResponse.redirect(new URL('/', request.url));
}
return NextResponse.next();
}Middleware-toiminnon laajuuden määrittäminen `matcher`-määrityksellä
Oletusarvoisesti middleware suoritetaan jokaisen pyynnön yhteydessä. Tämä ei ole aina tehokasta. Voitte määrittää, millä poluilla middleware suoritetaan, käyttämällä config.matcher-ominaisuutta.
matcher on merkkijonojen taulukko, joka määrittää polkukuvioita. Se on tehokkaampi ja suositeltavampi tapa kuin middleware-funktion sisäinen ehtologiikka polkujen suodattamiseen.
`matcher`-määrityksen käyttäminen tietyillä poluilla
Päivitetään middleware suorittumaan vain poluilla, jotka alkavat merkkijonolla /dashboard tai /profile. Näin middleware toimii tehokkaammin, koska sitä ei suoriteta tarpeettomilla reiteillä.
/dashboard/:path*vastaa polkua/dashboardja sen alaisia polkuja, kuten/dashboard/settings./profile/:path*vastaa polkua/profileja sen alaisia polkuja.
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const isAuthenticated = request.cookies.has('auth_token');
if (!isAuthenticated) {
console.log('Not authenticated, redirecting to home.');
return NextResponse.redirect(new URL('/', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
};Pyyntöjen otsakkeiden lukeminen ja muokkaaminen
Middleware voi myös lukea ja muokata pyyntöjen otsakkeita. Tämä on hyödyllistä, kun tietoja välitetään sivuille tai API-reiteille tai kun lisätään suojausotsakkeita.
NextRequest-olio tarjoaa menetelmiä otsakkeiden, evästeiden ja URL-osoitteen käsittelyyn.
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers);
const userAgent = requestHeaders.get('user-agent');
console.log('User-Agent:', userAgent);
// Add a custom header
requestHeaders.set('x-custom-header', 'Hello from Middleware');
// Return a new response with modified headers
return NextResponse.next({
request: { headers: requestHeaders },
});
}API-reittien suojaaminen Middleware-toiminnolla
Middleware koskee sovelluksen kaikkia reittejä, myös API-reittejä (esimerkiksi /api/users). Tämä on tehokas ominaisuus API-todentamisen ja -valtuutuksen toteuttamiseen.
Voitte tarkistaa API-avaimet, JWT:t tai istuntotunnisteet pyynnön otsakkeista tai evästeistä ennen API-päätepisteiden käytön sallimista.
Valtuutus ja todentaminen
On tärkeää erottaa toisistaan todentaminen (AuthN) ja valtuutus (AuthZ):
- Todentaminen: varmistaa, kuka käyttäjä on (esimerkiksi tarkistamalla hänen kirjautumistietonsa).
- Valtuutus: määrittää, mitä todennettu käyttäjä saa tehdä (esimerkiksi käyttää ylläpitosivuja tai poistaa sisältöä).
Middleware voi valvoa molempia tarkistamalla, onko käyttäjä kirjautunut sisään (AuthN) ja onko hänellä tarvittavat roolit tai oikeudet (AuthZ), ennen kuin reitin käyttö sallitaan.
Edistynyt valtuutusesimerkki
Yhdistetään käsitteet edistyneemmässä tilanteessa: tarkistetaan 'admin'-rooli. Simuloimme käyttäjäroolin lukemista evästeestä ja muiden kuin ylläpitäjien uudelleenohjaamista pois /admin-polulta.
Tämä havainnollistaa, miten middleware toimii käyttöoikeuslogiikan keskitettynä hallintapisteenä.
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const userRole = request.cookies.get('user_role')?.value;
const { pathname } = request.nextUrl;
// If trying to access /admin routes
if (pathname.startsWith('/admin')) {
// Check if user has 'admin' role
if (userRole !== 'admin') {
console.log('Access denied: User is not an admin, redirecting.');
return NextResponse.redirect(new URL('/unauthorized', request.url));
}
}
return NextResponse.next();
}
export const config = {
matcher: ['/admin/:path*'],
};Middleware-toiminnon täsmäytyshaaste
Tarkastelkaa seuraavaa config.matcher-määritystä. Mitkä näistä poluista middleware käsittelee?
export const config = {
matcher: ['/dashboard/:path*', '/settings'],
};Kertaus: Middleware hallinnan välineenä
Olette oppineet, miten Next.js Middleware toimii tehokkaana saapuvien pyyntöjen sieppaajana.
- Se määritellään
middleware.ts-tiedostossa. - Se voi uudelleenohjata käyttäjiä, muokata pyyntöjä ja vastauksia sekä lisätä otsakkeita.
config.matcheron olennainen määritettäessä, mitä reittejä middleware-toiminnon tulee suojata.- Se on tärkeä sekä todentamis- että valtuutuslogiikan toteuttamisessa koko sovelluksessa, myös API-reiteillä.
Middleware antaa teille tarkkarajaisen hallinnan käyttöoikeuksiin ja toimintaan!
Opi TypeScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”Middleware ja käyttöoikeuksien hallinta” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “Middleware ja käyttöoikeuksien hallinta”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Middleware ja käyttöoikeuksien hallinta”?
Suojatkaa reitit ja API-päätepisteet Next.js Middleware -toiminnon avulla valtuutusta ja uudelleenohjausta varten. Harjoittelet Next.js 15 -täyden pinon verkkosovellukset-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Next.js 15 -täyden pinon verkkosovellukset-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -täyden pinon verkkosovellukset-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Middleware ja käyttöoikeuksien hallinta”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -täyden pinon verkkosovellukset-oppitunnilla?
Kyllä. Jokainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- NextAuth.js:n käyttöönotto
- Istuntojen hallinta ja JWT:t
- Middleware ja käyttöoikeuksien hallinta
- Roolipohjainen käyttöoikeuksien hallinta (RBAC)