如何以干净的方式在 NextJs 中创建请求中间件

中间件是每个 API 的一个重要方面，它们在 NextJs 项目中也很有用，但官方文档没有教你如何实现它们，幸好你找到了这篇我将教你如何添加请求中间件的文章到您的 NextJs 应用程序！

NextJs 12.2 版本带来了新的概念 中间件 .这是一个不错的概念，您应该检查一下，但是 这不是我们要在本指南中讨论的内容。

如何制作你的第一个中间件

拿起你的 NextJs 项目并添加一个名为 withHello.ts .把它放在任何你想要的地方，除了保留 /页 目录;与 NextJs 框架中的其他内容不同，我们将使用的文件路径和名称没有任何功能价值。

正如您可能从文件名中猜到的那样，我们将使用 打字稿 还要解决打字部分。通过删除类型注释，您可以使用纯 JavaScript 轻松复制所有内容

这是我们的中间件代码 console.log("Hello World") 在每个请求上（别担心，我们也会探索一些真实的用例，这只是为了解释流程）。

 导出常量 **与你好** =  
 （处理程序：NextApiHandler）=> **// 1**  
 (req: NextApiRequest, res: NextApiResponse) => { **// 2**  
 console.log("Hello World!");  
    **返回处理程序（req，res）；** **// 4**  
 };

1. 中间件是一个接受 处理程序 （最终一些 选项 ，见 验证示例 )
2. 该函数返回一个闭包 请求 和 资源 参数
3. 在闭包的主体内部，我们可以执行任何我们想要的操作，同时可以访问 请求 和 资源
4. 最后，我们返回 处理程序 随着 请求 和 资源 最终可以使用附加值进行修改（参见 身份验证示例 )

要使用中间件，只需将 处理程序 您要应用它的路线的功能

 const handler = async (req: NextApiRequestWithAuth, res: NextApiResponse) => {  
 ...  
 } 导出默认值 **withHello(处理程序)**

这是中间件系统如何工作的基本解释，如果您希望看到我们所学的一些真实示例，请继续阅读

如何制作认证中间件

中间件最常见的用例之一是在特定路由上执行身份验证，以保护其免受未经身份验证或未经授权的用户的攻击。

这是使用 JWT 验证制作基本身份验证中间件的方法

 导出类型 CustomNextApiHandler  
 TReq 扩展 NextApiRequest = NextApiRequest，  
 TRes 扩展 NextApiResponse = NextApiResponse  
 > = (req: TReq, res: TRes) => 未知 |承诺<unknown>; 导出类型 NextApiRequestWithAuth = NextApiRequest & {  
 用户ID：字符串；  
 }; 导出常量 **withAuth** =  
 (  
 处理程序：CustomNextApiHandler<NextApiRequestWithAuth>  
 ) =>  
 (req: NextApiRequestWithAuth, res: NextApiResponse) => {  
 常量 { 授权 } = req.headers; 如果（！授权）{  
 返回 res.status(403).json({ message: "Unauthorized" });  
 } 别的 {  
 const token = authorization.split(" ")[1]; jwt.verify(token, process.env.JWT_SECRET!, (err, payload) => {  
 如果（错误 || ！有效负载）{  
 返回 res.status(403).json({ message: "Unauthorized" });  
 }  
        **req.userId = (payload as {uid: string}).uid;**  
 返回处理程序（req，res）；  
 });  
 }  
 };

用法与第一个示例相同。正如你所看到的，我们正在注入一个自定义的中间件 用户身份 撑进 请求 可以在处理程序内部访问

 const handler = async (req: **NextApiRequestWithAuth** , res: NextApiResponse) => {  
 返回 res.status(200).json({ message: "Hello" + **req.userId** });  
 } 导出默认值 **withAuth（处理程序）** ;

如何制作验证中间件

中间件的另一个用例是验证输入数据，在下一个示例中，我们将了解如何做到这一点，同时学习如何将自定义选项传递给我们的中间件。

在这个例子中，我们使用 是的 作为我们的模式验证库，但您可以使用您最熟悉的任何库来获得相同的结果

 类型 **WithValidationOptions** = {  
 bodySchema?: 是的.AnyObjectSchema;  
 }; 导出常量 **带有验证** =  
 （处理程序：NextApiHandler， **选项：WithValidationOptions** ) =>  
 async (req: NextApiRequest, res: NextApiResponse) => {  
 尝试 {  
 等待 options.bodySchema?。 **验证（req.body）** ;  
 } 捕捉（错误）{  
 如果（错误实例验证错误）{  
 返回 res.status(400).json({ message: error.errors[0] });  
 }  
 }  
 返回 **处理程序（请求，资源）** ;  
 };

要使用它，只需像我们之前所做的那样包装处理程序，作为第二个参数，您可以传递选项。在这种特殊情况下，通过验证模式！

 ...  
 导出默认值 **带有验证** （处理程序， **{  
 bodySchema：是的。形状（{  
 refreshToken: 是的.string().required(),  
 }),  
 }** );

感谢您阅读本文，希望您觉得这篇文章有用，如果是，请考虑为它鼓掌，关注我以获取更多内容，或在评论中提出任何问题。再见！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39468/57042611