如何以干净的方式在 NextJs 中创建请求中间件
如何以干净的方式在 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**
};
- 中间件是一个接受
处理程序（最终一些选项，见 验证示例 ) - 该函数返回一个闭包
请求和资源参数 - 在闭包的主体内部，我们可以执行任何我们想要的操作，同时可以访问
请求和资源 - 最后，我们返回
处理程序随着请求和资源最终可以使用附加值进行修改（参见 身份验证示例 )
要使用中间件，只需将 处理程序 您要应用它的路线的功能
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 版权协议，转载请附上原文出处链接和本声明
