Next.js中间件未认证跳转登录异常：登录页无法正常显示

问题原因 #

你的中间件配置会拦截/login路由，导致无限重定向循环：当token不存在时，中间件跳转到/login，但访问/login时，中间件再次检查token（仍然不存在），又触发重定向，浏览器为了终止循环，会显示异常页面（样式缺失或内容无法正常加载）。

修复步骤 #

1. 修改matcher排除登录页 #

更新config中的matcher规则，把login加入排除列表，让中间件不拦截登录页请求：

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
 
  if (token) { // 优化判断：自动处理undefined/空字符串情况
    return NextResponse.next();
  }

  return NextResponse.redirect(new URL('/login', request.url));
}

export const config = {
  matcher: ['/((?!api|_next|.*\\..*|login).*)'],
};

2. 优化token判断逻辑 #

原代码的token!==undefined仅判断token是否存在，但如果token存在但值为空字符串，也应该跳转到登录页。直接用if (token)可以同时处理undefined和空字符串的情况，逻辑更严谨。

验证效果 #

修改后，当token不存在时，会正确跳转到/login，且中间件不再拦截登录页的请求，页面可以正常加载静态资源和内容。

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