当前位置: 首页 > news >正文

H3初识——入门介绍之常用中间件

简介

H3 是 Nuxt 3 和 Nitro 的核心 HTTP 框架,提供了极简且高效的中间件机制。中间件(Middleware)是指在请求到达最终处理函数(Handler)之前,依次执行的一系列函数。它们可以用于处理认证、日志、错误处理、请求解析等通用逻辑。

特点

  • 极简 API:中间件的编写和使用非常简单,易于上手。
  • 高性能:基于现代 Node.js 特性,性能优异。
  • 灵活组合:支持多个中间件串联,按顺序依次执行。
  • 类型安全:TypeScript 支持良好,开发体验佳。
  • 与 Nuxt/Nitro 深度集成:可无缝用于 Nuxt 3、Nitro 项目。

示例

基础示例

定义中间件

// middleware/logger.js
export default (req, res, next) => {console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);next();
};

在 H3 应用中注册:

import { H3 } from "h3";
import logger from "./middleware/logger";const app = new H3();app.use(logger);app.use("/hello", (req, res) => {res.end("Hello World");
});serve(app, { port: 3000 });

条件使用:可以根据路径、方法等条件灵活应用

app.use("/api", apiMiddleware);
app.use("/admin", adminAuthMiddleware);

常见应用场景

  • 认证与权限校验
  • 日志记录
  • 请求体解析
  • 错误统一处理
  • CORS 处理

参考链接

  • H3 官方中文文档

中间件

响应时间

app.use(async (event, next) => {const start = Date.now();await next();const end = Date.now();console.log(`Response time: ${end - start}ms`);
});

统一响应头

app.use((event, next) => {event.res.headers.set("Content-Type", "application/json; charset=utf-8");return next();
});

访问统计

app.use(async (event, next) => {const url = event.req.url;const statsFile = "logs/stats.json";let stats = {};try {stats = JSON.parse(await readFile(statsFile, "utf-8"));} catch {}stats[url] = (stats[url] || 0) + 1;await writeFile(statsFile, JSON.stringify(stats, null, 2));return next();
});

跨域(CORS)

app.use((event, next) => {event.res.headers.set("Content-Type", "application/json; charset=utf-8");event.res.headers.set("Access-Control-Allow-Origin", "*");event.res.headers.set("Access-Control-Allow-Methods","GET,POST,PUT,DELETE,OPTIONS");event.res.headers.set("Access-Control-Allow-Headers","Content-Type,Authorization");// 预检请求直接返回if (event.req.method === "OPTIONS") {return "";}return next();
});

禁止某些 UA 访问

app.use((event, next) => {const ua = event.req.headers.get("user-agent") || "";if (ua.includes("curl") || ua.includes("python")) {event.res.statusCode = 403;return { code: 403, message: "禁止访问" };}return next();
});

禁用指定 IP 访问

const blacklist = ["1.2.3.4", "5.6.7.8"];
app.use((event, next) => {const ip =event.req.headers.get("x-forwarded-for") || event.req.socket.remoteAddress;if (blacklist.includes(ip)) {event.res.statusCode = 403;return { code: 403, message: "IP被禁止访问" };}return next();
});

国际化(i18n)

const messages = {zh: { welcome: "欢迎" },en: { welcome: "Welcome" },
};
app.use((event, next) => {const lang = event.req.headers.get("accept-language")?.split(",")[0].toLowerCase().startsWith("zh")? "zh": "en";event.t = (key) => messages[lang][key] || key;return next();
});
// 用法:handler里 return { msg: event.t("welcome") }

接口缓存

const cache = new Map();
app.use(async (event, next) => {if (event.req.method === "GET") {const key = event.req.url;if (cache.has(key)) {return cache.get(key);}const result = await next();cache.set(key, result);setTimeout(() => cache.delete(key), 10 * 1000); // 缓存10秒return result;}return next();
});

 H3初识——入门介绍之中间件 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯

http://www.dtcms.com/a/270385.html

相关文章:

  • 11款常用C++在线编译与运行平台推荐与对比
  • ffmpeg 中config 文件一些理解
  • Flutter基础(前端教程②-卡片列表)
  • study_WebView介绍
  • MYSQL进阶知识
  • 在keil中使用stlink下载程序报错Invalid ROM Table
  • Day07_C语言IO进程线程(重难点)
  • TensorFlow 和PyTorch的全方位对比和选择建议
  • Latex几种常用的花体
  • [2-02-02].第04节:环境搭建 - Linux搭建ES集群环境
  • [RPA] 影刀RPA基本知识
  • Kafka多组消费:同一Topic,不同Group ID
  • NV298NV312美光固态闪存NW639NW640
  • 基于mysqlfrm工具解析mysql数据结构文件frm表结构和数据库版本信息
  • 【Nginx】Nginx代理WebSocket
  • 扣子Coze远程连接数据库插件
  • C语言基础(1)
  • 【C++】AVL树底层思想 and 大厂面试
  • Python 的内置函数 slice
  • 为什么elementui的<el-table-column label=“名称“ prop=“name“ label不用写成:label
  • RS-232协议与RS485协议详解
  • [Backlog] 命令行界面CLI vs Web界面及服务端
  • 快手电商要投入多少钱?快手电商入驻条件和费用
  • 分布式无线工业数据采集终端应用场景简析
  • POI报表
  • Paimon本地表查询引擎LocalTableQuery详解
  • Mybits-plus 表关联查询,嵌套查询,子查询示例演示
  • 使用策略模式 + 自动注册机制来构建旅游点评系统的搜索模块
  • 音频被动降噪技术
  • Spring AI:ETL Pipeline