Nextjs로 미들웨어 구축

이 짧은 글에서는 nextjs로 미들웨어를 구축하는 방법에 대해 쓰겠습니다.

저는 최근 nextjs로 완전한 백엔드 서비스를 구축했는데, nextjs가 얼마나 발전했는지 보고 정말 놀랐습니다.

이 글을 따라가려면 javascript와 nodejs에 대한 기본 지식이 필요합니다.

시작하려면

1. 아래 명령을 사용하여 터미널에서 nextjs 프로젝트를 생성하세요

npx create-next-app@latest

이 명령을 실행하면 프로젝트를 구성하라는 메시지가 표시됩니다.

프로젝트를 생성한 후

2. 터미널에서 npm install을 실행하여 필요한 종속성을 설치하세요

인증을 위해 하나의 패키지 라이브러리인 jose만 설치할 예정입니다. 대안은 jsonwebtoken일 수도 있습니다. 그러나 nextjs 미들웨어는 브라우저에서 실행되므로 Edge 런타임은 여러 가지를 구현하지 않습니다. Node.js API

3. 아래 명령을 사용하여 개발 모드에서 프로젝트를 시작하세요
npm 실행 개발

4. middleware.js 파일 생성
프로젝트 루트에 middleware.js 파일을 생성하세요. /src 디렉터리를 사용하는 경우 /src 디렉터리 내에 파일을 생성하세요

5. 파일에서 미들웨어 기능 내보내기

// /middleware.js

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

6. 요청 헤더에서 토큰 추출

// /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. 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. 검증된 토큰에서 데이터를 추출하여 요청 헤더에 설정

// /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. next() 함수를 호출하고 업데이트된 요청 헤더를 전달합니다

// /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. 마지막으로 보호하려는 경로에 대한 구성이 포함된 미들웨어 파일에서 구성 개체를 내보내야 합니다.

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

이 10단계가 도움이 되기를 바랍니다. 댓글 섹션에서 이 방법에 대한 여러분의 생각을 알려주고, 이를 달성하기 위한 더 좋은 방법이 있으면 자유롭게 공유해 주세요.

감사합니다.

위 내용은 Nextjs로 미들웨어 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!