如何在Next.js middleware中设置login路由免除鉴权保护

一、配置middleware跳过login页面鉴权 #

你现有代码不生效的核心原因是：Next.js中req.pathname返回的路径默认带开头的斜杠，你当前判断req.pathname === "login"永远为假，所以登录页的豁免逻辑没有触发。可选择以下任意一种方案解决：

方案1：修改路径匹配逻辑 #

调整middleware内的判断条件，同时适配高版本Next.js的cookie、跳转写法：

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

export async function middleware(req) {
  // 路径匹配添加开头斜杠
  if (req.pathname === "/login") {
    return NextResponse.next();
  }
  // Next.js 13+ 需用get方法读取cookie
  const token = req.cookies.get("token")?.value;
  if (!token) {
    // 跳转需传入URL对象避免报错
    return NextResponse.redirect(new URL("/login", req.url));
  }
  return NextResponse.next();
}

方案2：通过matcher配置排除（更推荐） #

直接配置中间件的匹配规则，让login页面根本不触发中间件逻辑，性能更优：

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

export async function middleware(req) {
  const token = req.cookies.get("token")?.value;
  if (!token) {
    return NextResponse.redirect(new URL("/login", req.url));
  }
  return NextResponse.next();
}

// 匹配规则：排除/login路径
export const config = {
  matcher: ["/((?!login).*)"],
};

二、webpack缓存报错解决 #

报错[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Unable to snapshot resolve dependencies是Next.js本地编译缓存损坏导致，按以下步骤操作即可修复：

• 停止当前运行的项目进程
• 删除项目根目录下的.next缓存文件夹
• 删除node_modules依赖文件夹，以及对应的package-lock.json/yarn.lock/pnpm-lock.yaml依赖锁文件
• 重新安装依赖：npm install
• 重启开发服务：npm run dev

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