Membina perisian tengah dengan Nextjs

Dalam artikel pendek ini, saya akan menulis tentang cara membina perisian tengah dengan nextjs.

Baru-baru ini saya telah membina perkhidmatan hujung belakang yang hebat dengan nextjs, dan saya benar-benar terpesona dengan sejauh mana nextjs telah pergi.

Anda perlu mempunyai pengetahuan asas tentang javascript dan nodejs untuk mengikuti artikel ini.

Untuk bermula, anda perlu

1. Buat projek nextjs dari terminal anda menggunakan arahan di bawah

npx create-next-app@latest

Selepas menjalankan arahan ini, anda akan mendapat beberapa gesaan untuk mengkonfigurasi projek anda, lakukan itu.

Selepas mencipta projek,

2. Pasang kebergantungan yang diperlukan dengan menjalankan pemasangan npm di terminal anda

Kami akan memasang hanya satu perpustakaan pakej untuk pengesahan, iaitu jose, alternatif mungkin jsonwebtoken, tetapi nextjs middleware berjalan pada penyemak imbas, jadi masa jalan tepi tidak melaksanakan sekumpulan API Node.js

3. Mulakan projek anda dalam mod pembangunan menggunakan arahan di bawah
npm run dev

4. Cipta fail middleware.js
Cipta fail middleware.js pada akar projek anda, jika anda menggunakan direktori /src, buat fail di dalam direktori /src

5. Eksport fungsi perisian tengah daripada fail

// /middleware.js

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

6. Ekstrak token daripada pengepala permintaan

// /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. Sahkan token menggunakan 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. Ekstrak data daripada token yang disahkan dan tetapkannya dalam pengepala permintaan

// /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. Panggil fungsi seterusnya() dan hantar pengepala permintaan yang dikemas kini

// /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. Akhir sekali, anda perlu mengeksport objek konfigurasi daripada fail middleware yang mengandungi konfigurasi tentang laluan yang anda ingin lindungi.

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

Saya harap anda mendapati 10 langkah ini membantu, beritahu saya pendapat anda tentang kaedah ini di bahagian komen, dan jangan ragu untuk berkongsi jika cara yang lebih baik untuk mencapai ini juga.

Terima kasih.

Atas ialah kandungan terperinci Membina perisian tengah dengan Nextjs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!