ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Next.js 中间件按路径分组匹配:matcher 配置与 path-to-regexp 通配详解

Next.js 中间件按路径分组匹配:matcher 配置与 path-to-regexp 通配详解 文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载Next.js 中间件通过config.matcher数组决定对哪些页面生效并支持基于path-to-regexp。中间件 matcher 配置的基本形态Next.js 中间件Middleware在请求完成渲染前运行常用于鉴权、重定向、改写响应等场景。它在配置中接收一个路径匹配器数组用来决定哪些路径要经过中间件处理export const config { matcher: [/dashboard], };matcher是一个数组你可以同时列出多个路径也可以借助正则描述一组路径。数组中的每一项本质上是一个路由模式route pattern其匹配规则由path-to-regexp解析——也就是说你在 Express 路由中熟悉的参数占位符、通配符语法在这里同样适用。精确匹配单个路径最朴素的需求是只让某一个页面走中间件。例如用中间件对/dashboard页面做鉴权检查直接写出完整路径即可export const config { matcher: [/dashboard] };此时中间件只对/dashboard这一个路径生效访问/dashboard/hello或/dashboard/hello/world时请求不会进入中间件。用正则匹配整组路径:all*零次或多次如果你希望/dashboard以及它下面任意层级的子路径都进入中间件可以在路径尾部追加一个带通配符的段。*表示零次或多次匹配:all是这个参数段的命名名称本身可自定义语义是匹配余下的所有内容export const config { matcher: [/dashboard/:all*] };这一条规则会匹配/dashboard/dashboard/hello/dashboard/hello/world也就是说从/dashboard开始后面无论还有多少层子路径都会被中间件接管。这在仪表盘整块区域都需要登录鉴权的场景里非常实用一条配置即可覆盖整个目录树无需逐个枚举。只匹配子路径:all一次或多次有时候你只想让/dashboard之下的子页面走中间件而/dashboard本身不经过它。此时把*换成即可——表示一次或多次匹配要求该参数段必须至少出现一次export const config { matcher: [/dashboard/:all] };匹配结果与*版形成鲜明对照匹配/dashboard/hello匹配/dashboard/hello/world不匹配/dashboard因为:all要求至少有一段内容*与的区别是本次笔记的核心*零次或多次会连同父路径一起覆盖一次或多次则只覆盖严格的子路径。记住*含根、不含根这个经验法则就能根据需求快速选定。三种写法的对照matcher 配置匹配的路径不匹配的路径[/dashboard]/dashboard/dashboard/hello、/dashboard/hello/world[/dashboard/:all*]/dashboard、/dashboard/hello、/dashboard/hello/world其他无关路径[/dashboard/:all]/dashboard/hello、/dashboard/hello/world/dashboard组合使用一个数组圈定多组路径由于matcher本身就是数组你可以把多条规则合并到一起让中间件同时对多组路径生效。例如同时保护仪表盘区块和设置区块export const config { matcher: [/dashboard/:all*, /settings/:all*], };这种按组圈定的写法正是 match-middleware-on-groups-of-paths.md 标题中 groups of paths 的含义——用一条matcher数组声明式地管理所有需要中间件介入的路径分组避免在中间件函数体内手工做字符串前缀判断。实战衔接鉴权场景中的完整形态上面关于鉴权的示例源自仓库中另一条笔记 redirect-an-unauthorized-user.mdApp Router 下可以在 Server Component 里直接调用next/navigation的redirect()拦截未授权用户。把两者串起来一个完整的鉴权中间件通常是这样的结构// middleware.ts import { NextResponse } from next/server; export function middleware(request) { // 这里执行会话校验、权限判定不通过则重定向 return NextResponse.redirect(new URL(/login, request.url)); } export const config { matcher: [/dashboard/:all], // 只保护 /dashboard 下的子页面 };config.matcher决定了哪些请求进来middleware函数体决定了进来之后做什么。先按路径分组圈定范围再在函数内做统一处理是 Next.js 中间件最常见的组织方式。小结matcher接收字符串数组内部由path-to-regexp解析天然支持参数段与通配符精确写路径只匹配该路径本身:all*的*表示零次或多次连同父路径一起匹配:all的表示一次或多次只匹配严格的子路径、排除父路径多组路径可并列在matcher数组中实现按分组统一管控。关于中间件的完整背景可查阅 Next.js 官方文档source 的 Next.js 分类下继续翻阅。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐如何快速掌握 path-to-regexp多段路径参数匹配终极指南如何快速掌握 path to regexp多段路径参数匹配终极指南 path to regexp 是一个功能强大的 JavaScript 库能够将路径字符串后端3分钟搞定HackintoshOpCore-Simplify开源工具完全指南3分钟搞定HackintoshOpCore Simplify开源工具完全指南 你是否曾梦想在普通PC上运行macOS却被复杂的EFI配置过程劝退OpCor开发工具CLI终极路径匹配指南path-to-regexp 与 Express 框架完美集成终极路径匹配指南path to regexp 与 Express 框架完美集成 path to regexp 是一款强大的路径匹配工具能够将类似 /user后端上一篇Man_Woman_Face_Image_Detection模型微调指南如何针对特定场景优化模型下一篇终极NFC防冲突指南L-ink_Card如何智能处理多设备同时访问创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表