如何在Next.js中间件Matcher中忽略指定路由？求解决方案

问题说明 #

在Next.js项目中通过middleware.js结合static.js定义的用户角色控制路由访问权限，已登录用户的路由校验正常，但以下两类路径出现异常：

• 基础路径http://localhost:3000/abc/会被错误重定向到登录页
• 带登出参数的路径http://localhost:3000/abc/?logout=1也需要跳过权限校验

现有代码 #

static.js（角色路由配置） #

const userRoles = {
  "UA-2": ["/", "/abc/", "/abc/logout", "/dashboard/accounthub/", "/professional/xs/application/summary/"],
};

middleware.js（权限控制中间件） #

import { NextResponse } from "next/server";
import { userRoles } from "./data/constants/static";

export const config = {
  matcher: [
    '/((?!api|_next/static|images|favicon.ico).*)',
  ],
}

export function middleware(req){
    const { pathname } = req.nextUrl;
    if (req.cookies.get('role')?.value) {
        let statusUser = userRoles[req.cookies.get('role')?.value].includes(pathname)
        if (!statusUser) { 
            return NextResponse.redirect(new URL("/talon/dashboard/accounthub/", req.url))
        }
    } else {
        return NextResponse.redirect(new URL("/", req.url))
    }
}

解决方案 #

核心思路是提前拦截需要跳过校验的路径，同时优化未登录状态下的重定向逻辑，避免不必要的跳转：

修改后的middleware.js代码 #

import { NextResponse } from "next/server";
import { userRoles } from "./data/constants/static";

export const config = {
  matcher: [
    '/((?!api|_next/static|images|favicon.ico).*)',
  ],
}

export function middleware(req){
    const { pathname, searchParams } = req.nextUrl;
    // 定义需要跳过权限校验的路径
    const skipPaths = ["/abc/"];
    // 检查是否是需要跳过的路径，或带logout参数的请求
    const isSkipPath = skipPaths.includes(pathname) || searchParams.get('logout') === '1';
    
    if (isSkipPath) {
        // 直接放行，不进行权限校验
        return NextResponse.next();
    }

    // 原有权限校验逻辑
    if (req.cookies.get('role')?.value) {
        const role = req.cookies.get('role').value;
        // 确保角色存在于配置中，避免报错
        const hasAccess = userRoles[role]?.includes(pathname);
        if (!hasAccess) { 
            return NextResponse.redirect(new URL("/talon/dashboard/accounthub/", req.url))
        }
    } else {
        // 未登录时，仅当当前路径不是登录页时才重定向
        if (pathname !== "/") {
            return NextResponse.redirect(new URL("/", req.url))
        }
    }
    
    // 所有校验通过，放行
    return NextResponse.next();
}

关键改动说明 #

1. 新增跳过路径判断：通过skipPaths数组定义无需校验的路径，同时检测URL中的logout参数，满足任一条件直接放行
2. 优化角色校验安全性：增加userRoles[role]的存在性判断，避免因角色不存在导致的数组方法调用报错
3. 修复未登录重定向逻辑：仅当当前路径不是登录页（/）时才重定向，防止循环跳转

效果验证 #

• 未登录状态下访问/abc/和/abc/?logout=1不会被重定向到登录页
• 已登录用户的权限校验逻辑保持正常
• 非法路径仍会被重定向到指定页面

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