Construire un middleware avec Nextjs

Dans ce court article, j'écrirai sur la façon de créer un middleware avec nextjs.

J'ai récemment construit un service backend complet avec nextjs, et j'ai été vraiment époustouflé par le chemin parcouru par nextjs.

Vous devez avoir des connaissances de base en javascript et nodejs pour suivre cet article.

Pour commencer, vous devez

1. Créez un projet nextjs depuis votre terminal en utilisant la commande ci-dessous

npx create-next-app@latest

Après avoir exécuté cette commande, vous serez invité à configurer votre projet, faites-le.

Après avoir créé le projet,

2. Installez les dépendances nécessaires en exécutant npm install dans votre terminal

Nous allons installer une seule bibliothèque de packages pour l'authentification, qui est Jose, une alternative aurait pu être jsonwebtoken, mais le middleware nextjs s'exécute sur le navigateur, donc le runtime Edge n'implémente pas un tas de API Node.js

3. Démarrez votre projet en mode développement à l'aide de la commande ci-dessous
npm exécuter dev

4. Créez un fichier middleware.js
Créez un fichier middleware.js à la racine de votre projet, si vous utilisez le répertoire /src, créez le fichier dans le répertoire /src

5. Exporter une fonction middleware depuis le fichier

// /middleware.js

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

6. Extraire le jeton de l'en-tête de la demande

// /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. Vérifiez le jeton en utilisant José

// /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. Extrayez les données du jeton vérifié et définissez-les dans l'en-tête de la demande

// /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. Appelez la fonction next() et transmettez l'en-tête de requête mis à jour

// /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. Enfin, vous devez exporter un objet de configuration à partir du fichier middleware qui contient les configurations des routes que vous souhaitez protéger.

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

J'espère que ces 10 étapes vous seront utiles, dites-moi ce que vous pensez de cette méthode dans la section commentaires et n'hésitez pas à partager si vous disposez également d'une meilleure façon d'y parvenir.

Merci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!