网站可以做系统吗,北京市建设工程质量监督网站,网站抽奖模板,90设计电脑版概述
Next.js 的 中间件 (Middleware) 是一种在请求完成之前运行的函数#xff0c;用于对入站请求进行处理和操作。它可以在路由匹配前执行逻辑#xff0c;用于身份验证、请求重写、重定向、设置响应头等任务。 使用场景
身份验证#xff1a;在用户访问页面前检查登录状态…概述
Next.js 的 中间件 (Middleware) 是一种在请求完成之前运行的函数用于对入站请求进行处理和操作。它可以在路由匹配前执行逻辑用于身份验证、请求重写、重定向、设置响应头等任务。 使用场景
身份验证在用户访问页面前检查登录状态。国际化处理根据用户的语言偏好设置动态重定向。A/B 测试动态分流用户到不同的页面。IP 限制根据访问者 IP 地址限制访问。 中间件基本使用
1. 创建 middleware.ts
中间件文件位于项目根目录如果有 src 则为 src 下 下的 middleware.ts。
import { NextResponse } from next/server;
import type { NextRequest } from next/server;export function middleware(request: NextRequest) {const { pathname } request.nextUrl;// 示例阻止访问 /admin 路径if (pathname.startsWith(/admin)) {return NextResponse.redirect(new URL(/login, request.url));}// 默认返回请求return NextResponse.next();
}rewrite 重写是页面的重写比如将 /admin 页面重写内容为 /user 页面而我们的路由还是 /admin。重定向是改写路由比如将 /admin 重定向到 /user 那么我们直接访问的就是 /user 。 2. 匹配特定路由
通过 matcher 来指定中间件生效的路径。
export const config {matcher: [/admin/:path*, /api/:path*], // 匹配 /admin 和 /api 路径
};详细示例
示例 1基于身份验证的访问控制
假设我们有一个 /admin 页面只有登录用户可以访问。
中间件代码
import { NextResponse } from next/server;
import type { NextRequest } from next/server;export function middleware(request: NextRequest) {const { pathname } request.nextUrl;// 检查用户是否有有效的登录 tokenconst token request.cookies.get(authToken)?.value;if (!token pathname.startsWith(/admin)) {// 如果未登录重定向到登录页面return NextResponse.redirect(new URL(/login, request.url));}// 允许请求通过return NextResponse.next();
}配置匹配路径
export const config {matcher: [/admin/:path*], // 仅在 /admin 路径及子路径生效
};示例 2基于语言的动态重定向
根据用户浏览器的语言设置将用户重定向到对应的语言页面。
中间件代码
import { NextResponse } from next/server;
import type { NextRequest } from next/server;export function middleware(request: NextRequest) {const { pathname } request.nextUrl;// 如果路径已经包含语言前缀则不处理if (pathname.startsWith(/en) || pathname.startsWith(/fr)) {return NextResponse.next();}// 获取用户的首选语言const preferredLanguage request.headers.get(accept-language)?.split(,)[0] || en;// 根据语言重定向if (preferredLanguage.startsWith(fr)) {return NextResponse.redirect(new URL(/fr pathname, request.url));}// 默认重定向到英语页面return NextResponse.redirect(new URL(/en pathname, request.url));
}目录结构
pages
├── en
│ └── index.tsx
├── fr
│ └── index.tsx
└── middleware.ts示例 3阻止指定 IP 地址的访问
我们希望屏蔽某些 IP 地址的用户。
中间件代码
import { NextResponse } from next/server;
import type { NextRequest } from next/server;const BLOCKED_IPS [123.45.67.89, 98.76.54.32];export function middleware(request: NextRequest) {const clientIP request.ip || request.headers.get(x-forwarded-for) || unknown;if (BLOCKED_IPS.includes(clientIP)) {// 如果 IP 被屏蔽返回 403 Forbidden 响应return new NextResponse(Access forbidden, { status: 403 });}// 允许其他请求通过return NextResponse.next();
}配置匹配路径
export const config {matcher: [/:path*], // 对所有路径生效
};示例 4为某些请求添加自定义头
在 API 请求中注入特定的自定义头信息。
中间件代码
import { NextResponse } from next/server;
import type { NextRequest } from next/server;export function middleware(request: NextRequest) {const response NextResponse.next();if (request.nextUrl.pathname.startsWith(/api)) {response.headers.set(X-Custom-Header, MyCustomValue);}return response;
}
