Clerk与Next.js认证中间件无法保护/dashboard路由求助

我按照教程配置了Clerk的Next.js认证中间件，.env文件和middleware.ts文件都放在app目录外，但/dashboard路由仍然可以未经认证直接访问，配置代码和环境变量如下：

中间件代码 #

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({
    // 无需登录即可访问的路由
    publicRoutes: ['/'],
    // 完全跳过认证校验的路由
    ignoredRoutes: ['/no-auth-in-this-route'],
});
 
export const config = {
  // 保护所有路由，包括api/trpc
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

环境变量配置 #

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cmVuZXdpbmctdG9hZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk
CLERK_SECRET_KEY=sk_test_<redacted>

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

可行解决方案 #

• 确认中间件文件的命名与位置
  必须保证中间件文件命名为middleware.ts（或.js），且放在项目根目录（与app文件夹同级），Next.js只会识别根目录下该命名的中间件文件。

• 显式指定/dashboard的保护规则
  调整matcher配置，显式将/dashboard及其子路由纳入保护范围，避免匹配规则遗漏：

  export const config = {
    matcher: [
      '/dashboard/:path*', // 强制保护dashboard下所有路径
      '/((?!.+\\.[\\w]+$|_next).*)',
      '/',
      '/(api|trpc)(.*)'
    ]
  };
  

• 更新Clerk包到最新稳定版
  旧版本@clerk/nextjs可能存在中间件逻辑bug，执行命令更新：

  npm update @clerk/nextjs
  # 或使用yarn
  yarn upgrade @clerk/nextjs
  

• 验证环境变量是否正确加载
  在中间件中添加临时日志，确认环境变量是否生效：

  import { authMiddleware } from "@clerk/nextjs";
  
  // 临时打印日志，验证变量加载情况
  console.log('Clerk公钥:', process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY);
  console.log('Clerk密钥:', process.env.CLERK_SECRET_KEY);
  
  export default authMiddleware({
    publicRoutes: ['/'],
  });
  
  export const config = {
    matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
  };
  

  重启开发服务器后查看终端日志，如果变量为空，检查.env文件是否在根目录，且变量名无拼写错误（注意大小写）。

• 清理浏览器缓存后测试
  浏览器可能缓存了旧的认证状态，使用隐私窗口访问测试，或手动清除网站缓存后重新验证。

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