前端进阶之旅前端进阶之旅
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
首页程序员面试题库Next.js Route Handlers JWT 认证中间件 请求拦截 上下文传递
NeNext.js全栈边界

Route Handlers 如何用于实现基于 JWT 的认证中间件?请说明请求拦截与上下文传递方式。

Route Handlers 拦截请求时解析 Authorization 头,验证 JWT 签名后,将身份信息写入新请求头传给下游处理,实现认证中间件。

前端进阶之旅 · 一题精讲更新于 2026.09.05
Next.js#全栈边界#HTTP
先看核心答案
理解线索

认证中间件职责

  1. 解析头部从 Authorization 提取 Bearer token
  2. 验证签名用密钥校验 JWT 有效性和过期
  3. 传递身份将用户 ID 写入请求头供下游使用

只负责验证与传递,不管理会话或数据库

核心回答

先记住这个答案

在 Route Handler 中,先检查 Authorization 请求头,提取 Bearer token,用密钥校验签名和过期时间,验证通过后把用户信息(如 userId)写入自定义请求头传入后续代码。若 token 缺失或无效,返回 401。

  • JWT 验证逻辑应封装为可复用函数
  • 身份信息通过自定义请求头传递
  • 失败统一返回 401 且不暴露细节

Route Handler 中的请求拦截与验证流程

在 Next.js App Router 中,app/api/*/route.ts 导出的函数即 Route Handler。它接收 NextRequest 对象,可访问原始请求头。要实现认证中间件,可在函数入口先检查是否存在 Authorization 头,其格式应为 Bearer <token>,否则直接返回 401。这一步是拦截未认证请求的核心。

取得 token 后,使用 jose 库或 jsonwebtoken 验证 JWT 签名与有效期。验证通过后,从 payload 提取用户标识(如 sub)。不要将用户对象直接放入函数闭包,而是创建一个新请求,通过 request.headers 的副本加入自定义头,如 x-user-id,再传给后续业务处理。这样下游代码可从入口函数的 request.headers 读取该值,实现上下文传递。

由于 Request 的 headers 是只读的,需要先克隆原请求头得到 Headers 实例,调用 set 方法,再传入 new Request(request, { headers: newHeaders })。这只影响新请求,不影响外部。此外,应捕获验证抛出的异常,如 JWTExpired 或 JWTMalformed,统一返回 401 或 403。

构建受保护的 `/api/user/profile` 接口

假设要提供当前登录用户基本信息,前端发送 GET /api/user/profile,携带 Authorization: Bearer <jwt>。在 app/api/user/profile/route.ts 中,我们调用一个 requireAuth 辅助函数。该函数读取头部,验证 token,若有效则返回用户 ID,否则抛出特定异常。随后 handler 根据用户 ID 查询并返回资料;伪造 token 会被拒绝。

关键决策是身份信息如何传递:我们不把用户对象一直携带,而是仅在请求头中放入最小标识 x-user-id。这样做能避免在日志中泄露敏感数据,同时便于日志分析与依赖追踪。由于该头是内部约定,需设置 Access-Control-Allow-Headers 包含自定义头,以免浏览器跨域请求被拦截。

JWT 认证的局限与正确做法

此模式仅适合无状态 JWT,token 一旦签发,必须等待过期;若需即时撤销,必须配合黑名单或改用 session。另外,每次请求都要重新校验签名,CPU 开销有限,但依赖时钟同步;若多个实例,需统一密钥来源,避免硬编码。

不要将认证逻辑直接写成内嵌,而应抽取为高阶函数包装器,避免重复代码。由于 Route Handlers 在 Edge Runtime 或 Node.js 上执行,需确保所用加密库兼容。错误响应应通用,避免透露 token 无效原因,防止侧信道攻击。

回答前,多想一步

容易答错的地方

认为 JWT 验证在中间件层做更好
Next.js Middleware 运行在 Edge,只支持有限功能,而 Route Handler 可在 Node.js 环境使用完整 JWT 库,且能感知路由级配置,在 Route Handler 内封装更灵活,且不影响页面渲染。
把用户身份写在局部变量而非请求头
官方未支持在 NextRequest 上随意添加属性,自定义属性可能被忽略或丢失;通过 headers 传递是标准做法,还能被日志系统记录,便于追踪调试。
试着用自己的话回答

面试官还会怎么问?

如何处理 token 过期与刷新?

过期时应返回 401,前端收到后跳转登录;刷新可通过独立 refresh token 端点,由客户端定时调用获取新 token,不在此认证中间件职责范围内。

如何对特定 API 路径排除 JWT 验证?

可在 requireAuth 函数开头检查路径或方法,维护一个白名单数组,命中则直接跳过验证,避免将公共接口误伤。

能否让 Route Handler 读取从中间件设置的请求头?

可以,中间件通过 NextRequest rewrite 可改写请求头,但 Route Handler 最终接收的是改写后的请求;内部认证逻辑应在 Handler 入口处理,而不是依赖中间件传递。

从一道题,走向一组知识

把知识连起来

全栈边界

如何在 Route Handlers 中实现基于 API Key 的请求验证?请说明密钥来源与比对策略。

同属「全栈边界」专题,接着看 Next.js Route Handlers API Key 验证与密钥比对策略 在具体场景中的处理方式。

全栈边界

如何在 Route Handlers 中配置 CORS 策略以允许跨域请求?有哪些安全风险需要规避?

同属「全栈边界」专题,接着看 Next.js Route Handlers CORS 安全配置与风险规避 在具体场景中的处理方式。

参考资料

  • App Router

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. Route Handler 中的请求拦截与验证流程
  3. 构建受保护的 `/api/user/profile` 接口
  4. JWT 认证的局限与正确做法
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑