.htaccess对/work-locked目录的密码保护仅部分场景生效问题求助

根因定位 #

你配置的.htaccess基础认证规则本身没有问题，异常表现的核心原因是首页拦截了链接点击事件，使用前端路由（客户端导航）实现跳转：
左键点击链接时，页面通过history.pushState()/history.replaceState等API直接修改浏览器地址栏、渲染对应内容，全程没有发起真实的HTTP请求到服务器请求/work-locked目录下的资源，因此服务器端的认证规则完全没有触发，直接跳过了密码校验。
右键选择「新标签页打开」、直接输入地址访问时都是走的原生HTTP请求，所以会正常触发认证。

快速验证方法 #

• 打开首页后按下F12打开浏览器开发者工具，切换到「网络」面板，勾选「保留日志」选项
• 左键点击项目链接，观察网络请求列表
• 如果没有出现对应/work-locked/xxx路径的HTTP请求，或没有触发401认证交互，即可确认是前端路由拦截导致的问题

修复方案 #

方案1：强制走原生页面跳转（最稳妥） #

给所有指向/work-locked目录的链接添加点击事件拦截，强制触发原生跳转，不走前端路由：

// 页面加载完成后执行
document.querySelectorAll('a[href^="/work-locked/"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    window.location.href = this.getAttribute('href');
  });
});

如果你用的是前端框架，直接把指向加密目录的链接从框架提供的<Link>/<RouterLink>组件替换为原生<a>标签即可。

方案2：路由守卫主动触发认证 #

如果不想修改跳转逻辑，可以在前端路由守卫中增加前置校验，访问加密路径前主动发起请求触发服务器认证：

// 通用逻辑示例，可适配任意框架
async function checkAuth(path) {
  try {
    const res = await fetch(path, {
      method: 'HEAD',
      credentials: 'include'
    });
    return res.ok;
  } catch {
    return false;
  }
}

// 路由跳转前调用
if (toPath.startsWith('/work-locked/')) {
  const isAuthed = await checkAuth(toPath);
  if (!isAuthed) {
    window.location.href = toPath;
    return;
  }
}

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