如何阻止NextJS认证中间件作用于服务端预渲染请求？

核心问题 #

1. Next.js 12的中间件运行在服务端/边缘环境，永远不存在window对象，所以带🟡标记的代码块会直接跳过所有认证逻辑，导致重定向完全不触发。
2. 移除该代码块后，auth.isAuthenticated()如果是依赖浏览器API（比如localStorage、sessionStorage）实现的，在中间件环境中会执行失败，返回false，导致已登录用户也被强制重定向。

正确实现步骤 #

1. 删除无效的window判断代码 #

直接移除那三行关于window的判断，因为中间件不会在浏览器客户端运行，这段逻辑完全阻断了后续认证流程。

2. 适配中间件环境的认证逻辑 #

Next.js中间件无法直接访问浏览器存储，必须通过请求Cookie或请求头来验证用户身份：

• 若你的认证系统基于Cookie，直接在中间件中读取Cookie验证
• 若基于token（原本存在localStorage），需要将token存入Cookie，或通过请求头传递

以下是调整后的示例代码：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

import * as auth from 'src/lib/auth';

const pathsNeedingAuth = [
  '/dashboard$',
  '/account/(password|reset|delete)$',
];

export default async function middleware(request: NextRequest) {
  // 可省略path判断（因为config.matcher已过滤目标路径），保留也不影响
  const pathNeedsAuth = pathsNeedingAuth.some(
    (path) => new RegExp(path).test(request.nextUrl.pathname),
  );
  if (!pathNeedsAuth) {
    return NextResponse.next();
  }

  // 关键：从请求Cookie中获取认证凭据，而非依赖浏览器API
  const isAuthed = await auth.isAuthenticatedByCookie(request.cookies);
  
  if (isAuthed) {
    return NextResponse.next();
  }

  // 重定向到登录页并携带原访问路径
  const url = request.nextUrl.clone();
  url.searchParams.set('redirectUrl', url.pathname);
  url.pathname = '/account/login';
  return NextResponse.redirect(url);
}

export const config = {
  matcher: [...pathsNeedingAuth],
};

3. 更新auth模块的认证方法 #

新增支持从Cookie读取验证的方法，示例如下：

// src/lib/auth.js
export async function isAuthenticatedByCookie(cookies) {
  // 从Cookie中取出认证凭据（比如sessionId）
  const sessionId = cookies.get('sessionId')?.value;
  if (!sessionId) return false;
  
  // 调用后端接口验证session有效性
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/validate`, {
    headers: { Cookie: `sessionId=${sessionId}` }
  });
  return res.ok;
}

额外说明 #

• Next.js 12中间件运行在边缘节点，所有逻辑必须适配服务端环境，不能使用浏览器专属API
• 若想在客户端处理跳转，可在页面组件中用useEffect结合router.push，但这种方式安全性较低（用户可绕过客户端逻辑）

内容的提问来源于stack exchange，提问作者jezmck