NextJS应用路由中Middleware重定向功能失效问题

问题场景 #

应用包含manager和staff两种角色，用户在对应org中拥有其一。通过UI下拉菜单切换org时，Middleware需根据角色将用户路由至对应URL，但当前代码执行后页面路径无变化，重定向未生效。

当前核心逻辑：

if (orgRole === 'manager' && request.nextUrl.pathname.includes('/staff')) {
  const url = request.nextUrl.clone()
  url.pathname = `${orgShortId}/dashboard/manager/app`
  return NextResponse.redirect(url, { status: 303 })
}

if (orgRole === 'staff' && request.nextUrl.pathname.includes('/manager')) {
  const url = request.nextUrl.clone()
  url.pathname = `${orgShortId}/dashboard/staff/app`
  return NextResponse.redirect(url, { status: 303 })
}

排查与修复步骤 #

1. 验证核心变量有效性 #

先确认orgRole、orgShortId和当前路径是否符合预期，在Middleware中添加日志：

console.log('orgRole:', orgRole, 'orgShortId:', orgShortId, '当前路径:', request.nextUrl.pathname);

如果变量值为空或不符合切换后的org信息，说明角色/组织信息的获取逻辑有问题，需先修复数据来源（比如从cookie、session或数据库中正确读取最新值）。

2. 修正重定向路径格式 #

当前路径拼接可能缺少开头的斜杠，导致相对路径解析错误，浏览器无法正确跳转。修正为绝对路径格式：

// 开头添加/，确保是站点根路径下的绝对路径
url.pathname = `/${orgShortId}/dashboard/manager/app`;

3. 优化路由判断逻辑 #

原逻辑仅在用户当前路径包含/staff或/manager时触发，若切换org后用户处于其他路径（如根路径），重定向不会执行。可改为直接根据角色匹配目标路径，只要当前路径不符就跳转：

if (orgRole === 'manager') {
  const targetPath = `/${orgShortId}/dashboard/manager/app`;
  if (request.nextUrl.pathname !== targetPath) {
    const url = request.nextUrl.clone();
    url.pathname = targetPath;
    return NextResponse.redirect(url, { status: 303 });
  }
}

if (orgRole === 'staff') {
  const targetPath = `/${orgShortId}/dashboard/staff/app`;
  if (request.nextUrl.pathname !== targetPath) {
    const url = request.nextUrl.clone();
    url.pathname = targetPath;
    return NextResponse.redirect(url, { status: 303 });
  }
}

4. 检查Middleware匹配规则 #

确保middleware.ts中的matcher配置覆盖了所有需要拦截的路径，避免请求未进入Middleware逻辑：

export const config = {
  matcher: [
    // 拦截所有非API、非静态资源的路径
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

5. 处理前端路由跳转的特殊情况 #

如果切换org是通过Next.js前端路由（如useRouter或Link组件）触发，Middleware不会在前端路由跳转时执行（仅初始请求或硬刷新触发）。这种情况需在前端处理跳转：

// 前端org切换回调中直接跳转
import { useRouter } from 'next/router';

const handleOrgChange = (selectedOrg) => {
  const router = useRouter();
  const targetPath = selectedOrg.role === 'manager' 
    ? `/${selectedOrg.shortId}/dashboard/manager/app`
    : `/${selectedOrg.shortId}/dashboard/staff/app`;
  router.push(targetPath);
};

6. 避免缓存影响 #

303重定向可能被浏览器缓存，可添加缓存控制头禁止缓存：

const response = NextResponse.redirect(url, { status: 303 });
response.headers.set('Cache-Control', 'no-store');
return response;

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