使用 Nextjs 构建中间件

百变鹏仔 3天前 #JavaScript

文章标签中间件

在这篇短文中，我将写关于如何使用 nextjs 构建中间件。

我最近使用 nextjs 构建了一个完整的后端服务，我对 nextjs 的进步感到非常震惊。

您需要具备 javascript 和 nodejs 的基本知识才能阅读本文。

要开始，您需要

1.使用以下命令从终端创建一个 nextjs 项目

npx create-next-app@latest

运行此命令后，您将收到一些配置项目的提示，请执行此操作。

创建项目后，

2.通过在终端中运行 npm install 安装必要的依赖项

我们将只安装一个用于身份验证的包库，即 jose，替代方案可能是 jsonwebtoken，但是 nextjs 中间件在浏览器上运行，因此边缘运行时不会实现一堆 node.js api

3.使用下面的命令以开发模式启动您的项目
npm run dev

4.创建一个 middleware.js 文件
在项目的根目录创建一个 middleware.js 文件，如果您使用的是 /src 目录，请在 /src 目录中创建该文件

5。从文件中导出中间件函数

// /middleware.jsexport const middleware = async (req) =&gt; {   try {   } catch(error){   console.log(error)   }}

6。从请求标头中提取令牌

// /middleware.jsimport { nextresponse } from 'next/server'export const middleware = async (req) =&gt; {   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.jsimport { nextresponse } from 'next/server';import * as jose from 'jose'export const middleware = async (req) =&gt; {   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.jsimport { nextresponse } from 'next/server';import * as jose from 'jose'export const middleware = async (req) =&gt; {   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.jsimport { nextresponse } from 'next/server';import * as jose from 'jose'export const middleware = async (req) =&gt; {   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.jsimport { 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) =&gt; {   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 构建中间件

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？