Next.js 中如何精准校验slug是否属于指定path的自身及子路径

安全阿岳

2026-10-2

路径匹配解决方案

你之前的slug.includes(path)写法出错的核心原因是仅做了字符串包含判断，没有校验路径层级边界，所以会出现上级路径匹配到下级路径的误判。下面提供两种可直接落地的实现方案：

方案1：正则表达式匹配（代码最简）

通过正则强制匹配路径边界，仅当slug完全等于path，或path后紧跟/加子路径内容时返回真：

function isMatch(slug, path) {
  const matchReg = new RegExp(`^${path}(/.*)?$`)
  return matchReg.test(slug)
}

验证效果：

isMatch('www.mysite.com/countries/africa', 'www.mysite.com/countries/africa') → true
isMatch('www.mysite.com/countries/africa/sudan', 'www.mysite.com/countries/africa') → true
isMatch('www.mysite.com/countries/africa', 'www.mysite.com/countries') → false
完全符合需求。

方案2：路径段拆分比对（兼容性更强）

如果路径中存在正则特殊字符（如.、*、?等），可以用拆分路径段逐段比对的方式规避转义问题：

function isMatch(slug, path) {
  // 拆分路径段并过滤空值，处理首尾带斜杠的情况
  const slugSeg = slug.split('/').filter(Boolean)
  const pathSeg = path.split('/').filter(Boolean)
  // slug路径更短的情况直接不匹配
  if (slugSeg.length < pathSeg.length) return false
  // 逐段比对前缀是否完全一致
  return pathSeg.every((seg, index) => seg === slugSeg[index])
}