【Next】中间件

devtools/2024/11/24 8:25:12/

概述

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;
}


http://www.ppmy.cn/devtools/136505.html

相关文章

天润融通携手挚达科技:AI技术重塑客户服务体验

业务爆发式增长,但座席服务却跟不上,怎么办? 智能充电领导者的挚达科技就面临过 这样的问题,让我们来看看如何解决。 2010年以来,国内新能源汽车市场进入高速发展期,作为新能源汽车的重要配件&#xff0c…

Java与Kotlin在鸿蒙中的地位

在当今移动操作系统领域,华为推出的鸿蒙系统(HarmonyOS)正逐渐崭露头角,成为与Android、iOS并驾齐驱的操作系统之一。对于开发者而言,了解如何为鸿蒙系统开发高质量的应用程序变得至关重要。在这篇文章中,我…

ThreadLocal 和 Caffeine 缓存是两种不同的缓存机制,它们在用途和实现上有明显的区别

ThreadLocal 和 Caffeine 缓存是两种不同的缓存机制,它们在用途和实现上有明显的区别: ThreadLocal 缓存: ThreadLocal 提供了线程局部变量的功能,每个线程可以访问自己的局部变量,而不会与其他线程冲突。ThreadLocal …

项目中排查bug的思路案例

bug描述:调用了删除的接口,执行成功了,也删掉了选中的数据,但是不执行删除后的处理操作,会报一个“系统未知错误,请反馈给管理员” 解决: 成功删掉了数据,但删除后的操作没有执行&a…

SpringMVC-01-回顾MVC

1. 回顾MVC 1.1. 什么是MVC MVC是模型(Model)、视图(View)、控制器(Controller)的简写,是一种软件设计规范。是将业务逻辑、数据、显示分离的方法来组织代码。MVC主要作用是降低了视图与业务逻辑间的双向偶合。MVC不是一种设计模式,MVC是一种架构模式。…

金融科技白皮书:2022-2023年度回顾与前瞻

在金融科技领域,2022至2023年见证了一系列创新技术的应用和发展。本白皮书将回顾过去一年的主要成就,并展望未来一年的发展趋势。 2022年亮点回顾 **低代码平台:**低代码平台通过高度抽象化和自动化的可视化过程,简化了应用程序开…

光伏项目工程造价单如何科学生成?

工程造价单是光伏项目建设过程中不可或缺的一环,涉及到光伏工程项目的投资预算、成本控制和资金筹措等方面,对工程项目的顺利实施具有重要意义。 一、选址地气象分析 气象因素会对光伏电站的发电量和未来收益造成直接影响,在项目前期阶段就要…

【鸿蒙开发】ArkTs布局(下)----面试题库

系列文章目录 【鸿蒙开发】ArkTs布局(上)----面试题库 文章目录 系列文章目录一、什么是层叠布局(堆叠)?二、什么是网格布局?三、什么是相对布局?四、什么是栅格布局? 一、什么是层叠布局(堆叠)&#xff1…