【Next】中间件

概述

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.xdnf.cn/news/20596.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

51c视觉~合集7

我自己的原文哦~ https://blog.51cto.com/whaosoft/11536996 #Arc2Face 身份条件化的人脸生成基础模型,高一致性高质量的AI人脸艺术风格照生成 将人脸特征映射到SD的CLIP的编码空间,通过微调SD实现文本编码器转换为专门为将ArcFace嵌入投影到CLIP潜在…

【西瓜书】机器学习的模型评估

来源于西瓜书、南瓜书等内容。 误差与偏差 学习器的实际预测输出与样本的真实输出之间的差异,称为”误差“(error)。学习器在训练集上的误差,称为”训练误差“(training error)或”经验误差“(…

Mac安装Docker Desktop搭建K8s集群,解决镜像无法下载的问题

使用 Docker Desktop可以在本地方便地搭建出 K8s集群,但开启 K8s集群后往往会遇到 K8s 镜像拉取失败问题,本文旨在解决该问题,从而在本地搭建 K8s 集群。 安装Docker Desktop 安装 Docker Desktop 建议安装历史版本, 不建议安装最新版。因为…

【Leecode】Leecode刷题之路第54天之旋转矩阵

题目出处 54-螺旋矩阵-题目出处 题目描述 个人解法 思路: todo代码示例:(Java) todo复杂度分析 todo官方解法 54-旋转矩阵-官方解法 方法1:模拟 思路: 代码示例:(Java&#xff…

【YOLOv8】安卓端部署-1-项目介绍

【YOLOv8】安卓端部署-1-项目介绍 1 什么是YOLOv81.1 YOLOv8 的主要特性1.2 YOLOv8分割模型1.2.1 YOLACT实例分割算法之计算掩码1.2.1.1 YOLACT 的掩码原型与最终的掩码的关系1.2.1.2 插值时的目标检测中提取的物体特征1.2.1.3 coefficients(系数)作用1.…

Cesium教程01_实现Cartesian3 三维坐标操作

在 Vue 项目中使用 Cesium 实现 Cartesian3 三维坐标操作 目录 一、引言二、Cesium 与 Cartesian3 的优势三、示例应用:在地图上标注和计算距离 1. 项目结构2. 主要代码实现3. 运行与效果 四、代码讲解与扩展 1. Cartesian3 的基础操作2. 距离计算与中点标注 五、…

Qt5-雷达项目

界面: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QTimer> #include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget(); pr…

A040-基于springboot的智能停车计费系统设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

数据结构初识

目录 1.初识 2.时间复杂度 常见时间复杂度举例&#xff1a; 3.空间复杂度 4.包装类&简单认识泛型 4.1装箱和拆箱 5.泛型 6.泛型的上界 7.泛型方法 8.List接口 1.初识 1.多画图 2.多思考 3.多写代码 4.多做题 牛客网-题库/在线编程/剑指offer 算法篇&#xff1a…

CUDA HOME does not exist, unable to compile CUDA op(s),已解决

有一个服务器上没有/usr/loacl/cuda&#xff0c;我也没有权限在这个目录装cuda&#xff0c;使用pip装完torch&#xff0c;llama factory使用时出现&#xff1a; 应该是本地没有nvcc相关执行文件。 先使用了&#xff1a; conda install -c cudatoolkit-dev不管用&#xff0c; …

杰发科技AC7801——ADC定时器触发的简单使用

使用场景 在需要多次采样结果的情况下&#xff0c;比如1s需要10w次的采样结果&#xff0c;可以考虑使用定时器触发采样&#xff0c;定时器设置多少的时间就会多久采样转换一次。 再加上使用dma&#xff0c;采样的结果直接放在dma的数组里面。 实现了自动采样&#xff0c;自动…

【有啥问啥】基于文本的图像检索(Text-Based Image Retrieval, TBIR)技术详解

基于文本的图像检索&#xff08;Text-Based Image Retrieval, TBIR&#xff09;技术详解 1. 背景理论知识 1.1 什么是基于文本的图像检索&#xff08;TBIR&#xff09;&#xff1f; 基于文本的图像检索&#xff08;Text-Based Image Retrieval&#xff0c;简称TBIR&#xff…

探索PyMuPDF:Python中的强大PDF处理库

文章目录 **探索PyMuPDF&#xff1a;Python中的强大PDF处理库**第一部分&#xff1a;背景第二部分&#xff1a;PyMuPDF是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;至少5个简单的库函数使用方法第五部分&#xff1a;结合至少3个场景…

HarmonyOS Next 关于页面渲染的性能优化方案

HarmonyOS Next 关于页面渲染的性能优化方案 HarmonyOS Next 应用开发中&#xff0c;用户的使用体验至关重要。其中用户启动APP到呈现页面主要包含三个步骤&#xff1a; 框架初始化页面加载布局渲染 从页面加载到布局渲染中&#xff0c;主要包含了6个环节&#xff1a; 执行页…

已解决centos7 yum报错:cannot find a valid baseurl for repo:base/7/x86_64的解决方案

出现cannot find a valid baseurl for repo:base/7/x86_64错误通常是由于YUM仓库源无法找到或无法访问&#xff0c;导致YUM无法正常工作。这种情况常见于CentOS 7系统。解决这个问题需要检查几个方面&#xff0c;如网络连接、DNS设置和YUM仓库源配置。 &#x1f9d1; 博主简介&…

架构图解析:如何构建高效的微服务系统

在当今的数字化浪潮中&#xff0c;构建高效、灵活且可扩展的系统已成为企业的重要目标。微服务架构作为一种先进的软件设计模式&#xff0c;通过将复杂的应用程序分解为一系列小型、独立的服务&#xff0c;显著提升了系统的灵活性、可扩展性和维护性。本文将通过解析微服务系统…

Label-studio-ml-backend 和YOLOV8 YOLO11自动化标注,目标检测,实例分割,图像分类,关键点估计,视频跟踪

这里写目录标题 1.目标检测 Detection2.实例分割 segment3.图像分类 classify4.关键点估计 Keypoint detection5.视频帧检测 video detect6.视频帧分类 video classify7.旋转目标检测 obb detect8.替换yolo11模型 给我点个赞吧&#xff0c;谢谢了附录coco80类名称 笔记本 华为m…

恒利联创携手Pearson VUE 亮相第62届高博会

2024年11月15日-17日&#xff0c;第62届中国高等教育博览会&#xff08;简称“高博会”&#xff09;在重庆举行&#xff0c;恒利联创携手全球领先的考试服务提供商Pearson Vue Certiport共同亮相&#xff0c;为中国院校展现并提供数字化职业技能的教育平台及学练考体系。 作为P…

linux复习2:简单命令简述

cp 复制单个文件 cp file.txt /path/to/destination/ 将 file.txt 复制到指定的目标目录。 复制多个文件 cp file1.txt file2.txt /path/to/destination/ 将 file1.txt 和 file2.txt 复制到指定的目标目录。 复制目录&#xff08;递归复制&#xff09; cp -r /path/to/source…

【逆向篇】抓取微信小程序源码 (附加逆向工具wxappUnpacker和使用方法)

抓取微信小程序源码附加逆向工具wxappUnpacker 文章目录前言一、工具准备1 解密工具2 逆向工具 二、解密小程序1.确认小程序包位置2.打开一个小程序3.解密小程序包 三、逆向小程序1、检查nodejs2、安装依赖3、正式逆向 该文章只是学习作用&#xff0c;如果侵权请联系删除&…