How do I prevent the browser Forward button from bypassing Next.js middleware?

随着Next.js在React生态系统中占据越来越重要的地位，其内置的中间件（Middleware）功能为开发者提供了强大的请求拦截与重定向能力。然而，近期不少开发者发现一个令人困扰的问题：当用户使用浏览器的“前进”按钮时，中间件竟然会被绕过，导致安全校验、权限控制等逻辑失效。这一漏洞引发了社区广泛讨论，本文将深入分析原理并提供行之有效的解决方案。

一、问题根源：浏览器缓存与中间件的博弈

Next.js中间件本质上运行在Edge Runtime中，它拦截每个传入的请求，并可以基于cookie、header等条件执行重定向或修改响应。然而，当用户点击浏览器前进按钮时，浏览器会优先从本地磁盘缓存（Back-Forward Cache，简称bfcache）中加载页面，而不是重新向服务器发起请求。这就导致中间件完全无法执行。

bfcache是浏览器为了提升用户体验而设计的缓存机制，它保存页面的完整DOM和JavaScript状态。当用户通过前进/后退导航时，浏览器会直接从bfcache恢复页面，而不触发任何网络请求。对于Next.js应用来说，这意味着原本依赖中间件进行的权限验证、A/B测试、地理重定向等逻辑全部失效。

更严重的是，如果用户先通过中间件验证后进入页面，然后跳转到其他页，再点击前进按钮返回，中间件不会再次运行，用户可能看到一个过时的、甚至未经授权的页面状态。

二、社区热议：官方与民间方案汇总

针对这一问题，Next.js官方在GitHub issue中给出了初步回应，确认这是bfcache与中间件设计之间的固有矛盾。目前主要有以下几种解决方案：

1. 禁用bfcache（不建议全面采用）

通过设置Cache-Control: no-store或no-cache可以在页面响应头中指示浏览器不要缓存。但这种方法会显著降低页面导航性能，且无法针对前进按钮单独控制。

2. 客户端路由守卫（推荐方案）

在页面的客户端代码中监听popstate事件（前进/后退触发），并手动校验用户状态。例如：

useEffect(() => {
  const handlePopState = () => {
    // 重新请求权限或状态
    checkAuthorization();
  };
  window.addEventListener('popstate', handlePopState);
  return () => window.removeEventListener('popstate', handlePopState);
}, []);

这种方案可精确拦截前进/后退操作，但需要额外开发工作，且无法彻底阻止中间件失效带来的视觉闪动。

3. 利用Next.js的`unstable_after`或动态导入

部分开发者尝试在页面组件中使用unstable_after钩子，在渲染后执行验证逻辑，配合客户端重定向弥补中间件缺失。但该API仍处于实验阶段，稳定性存疑。

4. 服务端验证的混合策略

最可靠的方案是：中间件负责核心安全校验，同时页面每次加载时（包括bfcache恢复后）通过客户端发起一个轻量级API请求来确认状态。如果状态失效，则执行客户端重定向。这种方法结合了服务端与客户端的优势，但增加了网络开销。

三、最佳实践：构建防绕过的完整体系

根据社区多位资深开发者的经验，推荐采用分层防御策略：

第一层（Server Edge）：中间件仍作为第一道防线，处理首次请求和常规路由跳转。
第二层（Client Observer）：在_app.tsx或布局组件中监听pageshow事件，检查e.persisted属性（指示是否从bfcache恢复）。若为true，则主动触发状态校验。
第三层（API Guard）：对于敏感操作（如支付、数据修改），始终要求携带最新的CSRF token或JWT，且后端验证时效性。

例如，一个典型的实现如下：

// 在 _app.tsx 中添加
useEffect(() => {
  const handlePageShow = (e: PageTransitionEvent) => {
    if (e.persisted) {
      // 从bfcache恢复，验证权限
      fetch('/api/check-auth').then(res => {
        if (!res.ok) window.location.href = '/login';
      });
    }
  };
  window.addEventListener('pageshow', handlePageShow);
  return () => window.removeEventListener('pageshow', handlePageShow);
}, []);

四、未来展望：中间件与bfcache的和解

Next.js团队已注意到该问题，并在最新的13.5.x版本中尝试通过skipTrailingSlashRedirect等配置项减少缓存冲突。但短期内，bfcache作为浏览器标准行为，不可能被框架强制禁用。开发者需要接受这一现实，并采用本文提到的混合方案。

值得注意的是，Vercel平台计划在未来的Edge Functions中提供“post-cache hooks”，允许在bfcache恢复后执行轻量级逻辑。这将是解决该问题的根本方向。

对于正在使用Next.js构建生产应用的团队，建议立即评估现有中间件逻辑是否依赖“每次导航必然执行”的假设，并尽快补充客户端验证机制。毕竟，用户的前进按钮不会等待中间件——而你的应用必须做好准备。