如何实现Next.js受保护路由Middleware？当前配置失效求助

1. 明确指定 Middleware 的匹配路由 #

默认根目录的 Middleware 会匹配所有路由，但为了精准拦截需要保护的 /redirect 路由，建议显式配置 matcher，避免不必要的路由干扰。修改你的 middleware.ts：

import type { NextRequest } from 'next/server'

export default function middleware(request: NextRequest) {
  const currentUser = request.cookies.get('currentUser')?.value
 
  if (!currentUser) {
    return Response.redirect(new URL('/', request.url))
  }
}

// 指定仅对 /redirect 路由生效
export const config = {
  matcher: '/redirect',
}

2. 确保 Cookie 作用域覆盖全站 #

使用 js-cookie 设置 Cookie 时，显式指定 path: '/'，保证 Cookie 在整个站点范围内能被 Middleware 读取到。修改首页的 login 函数：

const login = (e: { preventDefault: () => void }) => {
  e.preventDefault();

  console.log("login");
  // 显式设置 Cookie 路径为根目录
  Cookies.set("currentUser", "true", { path: '/' });
  router.push("/redirect");
};

3. 重启开发服务器 #

Next.js 开发环境下，Middleware 的修改可能不会实时热更新，旧代码缓存会导致功能不生效。关闭当前的 npm run dev 进程，重新启动服务器后再测试。

4. 验证请求中的 Cookie 携带情况 #

点击按钮跳转后，打开浏览器开发者工具的「网络」标签，查看 /redirect 的请求头，确认 currentUser Cookie 是否被正确携带。如果 Cookie 不存在，说明设置环节有问题；如果 Cookie 存在但仍被重定向，检查 Middleware 中的逻辑是否有误。

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