Erstellen einer Middleware mit Nextjs

In diesem kurzen Artikel werde ich darüber schreiben, wie man mit nextjs eine Middleware erstellt.

Ich habe kürzlich mit nextjs einen umfassenden Backend-Dienst aufgebaut und war wirklich überwältigt davon, wie weit nextjs schon fortgeschritten ist.

Sie benötigen Grundkenntnisse in Javascript und NodeJS, um diesem Artikel folgen zu können.

Um zu beginnen, müssen Sie

1. Erstellen Sie ein nextjs-Projekt von Ihrem Terminal aus mit dem folgenden Befehl

npx create-next-app@latest

Nachdem Sie diesen Befehl ausgeführt haben, werden Sie aufgefordert, Ihr Projekt zu konfigurieren. Tun Sie dies.

Nachdem Sie das Projekt erstellt haben,

2. Installieren Sie die erforderlichen Abhängigkeiten, indem Sie npm install in Ihrem Terminal ausführen

Wir werden nur eine Paketbibliothek für die Authentifizierung installieren, nämlich Jose, eine Alternative hätte jsonwebtoken sein können, aber die Middleware von nextjs wird im Browser ausgeführt, sodass die Edge-Laufzeitumgebung viele davon nicht implementiert Node.js-APIs

3. Starten Sie Ihr Projekt im Entwicklungsmodus mit dem folgenden Befehl
npm run dev

4. Erstellen Sie eine middleware.js-Datei
Erstellen Sie eine middleware.js-Datei im Stammverzeichnis Ihres Projekts. Wenn Sie das Verzeichnis /src verwenden, erstellen Sie die Datei im Verzeichnis /src

5. Exportieren Sie eine Middleware-Funktion aus der Datei

// /middleware.js

export const middleware = async (req) => {
   try {
   } catch(error){
   console.log(error)
   }
}

6. Token aus Anforderungsheader extrahieren

// /middleware.js

import { NextResponse } from 'next/server'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
   } catch(error){
   console.log(error)
   }
}

7. Überprüfen Sie das Token mit jose

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

// your encoded data will be inside the payload object.

   } catch(error){
   console.log(error)
   }
}

8. Extrahieren Sie Daten aus dem verifizierten Token und legen Sie sie im Anforderungsheader fest

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)
   } catch(error){
   console.log(error)
   }
}

9. Rufen Sie die Funktion next() auf und übergeben Sie den aktualisierten Anforderungsheader

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)

    return NextResponse.next({
               request: {
                headers: requestHeaders
               } 
    })
   } catch(error){
   console.log(error)
   }
}

10. Schließlich müssen Sie ein Konfigurationsobjekt aus der Middleware-Datei exportieren, das Konfigurationen zu den Routen enthält, die Sie schützen möchten.

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const config = {
  matcher:[
   // contain list of routes you want to protect, e.g /api/users/:path*
]
}

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)

    return NextResponse.next({
               request: {
                headers: requestHeaders
               } 
    })
   } catch(error){
   console.log(error)
   }
}

Ich hoffe, dass Sie diese 10 Schritte hilfreich finden. Lassen Sie mich im Kommentarbereich wissen, was Sie über diese Methode denken, und teilen Sie uns gerne mit, ob es auch einen besseren Weg gibt, dies zu erreichen.

Vielen Dank.

Das obige ist der detaillierte Inhalt vonErstellen einer Middleware mit Nextjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!