Next.js中间件无法获取Authorization Bearer Token问题求助

核心问题 #

你的 middleware.ts 拦截的是页面路由请求（比如用户访问 /onboarding 页面时浏览器发的请求），但你在客户端组件里通过 fetch 发送的是API路由请求（/api/v1/onboarding），当前的 matcher 范围不包含这个API路径，所以 middleware 根本没拦截到带 Authorization 头的请求，自然返回 null。

另外，客户端组件（"use client"）只会在浏览器端运行，不需要额外判断 typeof window，可以简化代码逻辑。

解决步骤 #

1. 修改 middleware 的拦截范围

更新 middleware.ts 的 config，把API路径加入 matcher，让 middleware 能拦截到你的API请求：

import { NextRequest, NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  const authorization = request.headers.get("authorization");
  console.log("authorization ->", authorization);
}

export const config = {
  matcher: [
    "/onboarding/:path*", 
    "/dashboard/:path*",
    "/api/v1/onboarding/:path*" // 新增API路径拦截
  ],
};

2. 简化客户端组件的 token 获取逻辑

因为 "use client" 组件仅在浏览器运行，直接从 sessionStorage 取 token 即可：

"use client";

async function sampleFn() {
  const accessToken = sessionStorage.getItem("accessToken") || "";
  
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_HOST_URL}/api/v1/onboarding`,
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken}`,
      },
    },
  );

  return res;
}

export default async function OnBoarding() {
  const response = sampleFn();
  return <div>On Boarding</div>;
}

3. 验证 token 存在性

确保 sessionStorage.getItem("accessToken") 能正确获取到值，否则 Authorization 头会变成 Bearer （空值），这时候 middleware 拿到的是字符串而非 null，需要提前排查 token 是否已存入 sessionStorage。

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