Heim > Web-Frontend > js-Tutorial > Erstellen einer Middleware mit Nextjs

Erstellen einer Middleware mit Nextjs

PHPz
Freigeben: 2024-08-13 07:00:02
Original
1118 Leute haben es durchsucht

Building a middleware with 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
Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage