auth_basic 是部署 React 预览环境最轻量的基础访问控制方案，无需改代码、不依赖后端，在 Nginx 层统一校验所有静态资源；需用 htpasswd 生成密码文件，并在 location / 中配置 auth_basic 且置于 try_files 前以保障路由刷新正常。
用 Nginx 部署 React 应用时，若需快速为预览环境（如 staging、demo 或临时分享链接）加一层基础访问控制，auth_basic 是最轻量、无需改代码、不依赖后端的方案。它在 Nginx 层拦截请求，对所有静态资源（HTML、JS、CSS、图片等）统一校验，适合非生产但又不想公开裸奔的场景。
为什么 auth_basic 适合前端预览环境
简单可靠：不改动 React 构建逻辑，不引入额外服务或 token 流程；零侵入：用户看到的仍是完整单页应用，路由、刷新、History API 全部正常；部署即生效：修改 Nginx 配置后 reload 即可启用，无需重新构建或发版。
注意：auth_basic 仅提供基础认证（HTTP Basic），密码明文传输（必须配合 HTTPS 使用），不适合敏感系统或正式登录，但对临时预览完全够用。
配置步骤：从生成密码到启用认证
1. 生成加密密码文件（推荐用 htpasswd）：
- 安装工具（Ubuntu/Debian）：
sudo apt install apache2-utils - 创建密码文件（如
/etc/nginx/.htpasswd）：sudo htpasswd -c /etc/nginx/.htpasswd demo-user，按提示输入密码 - 添加新用户（不覆盖原文件）：
sudo htpasswd /etc/nginx/.htpasswd another-user
2. 在 Nginx server 块中启用认证（关键点：覆盖所有路径，包括前端路由）：
location / {
# 必须放在 root 和 try_files 之前
auth_basic "Preview Environment";
auth_basic_user_file /etc/nginx/.htpasswd;
<p>root /var/www/my-react-app;
try_files $uri $uri/ /index.html;
}</p>
⚠️ 注意：auth_basic 要写在 try_files 之前，否则刷新子路由（如 /dashboard）时可能绕过认证直接返回 index.html。
处理 React Router 刷新 404 问题
React Router 的 client-side 路由依赖 Nginx 将所有未匹配路径回退到 index.html。启用 auth_basic 后，这个回退逻辑仍需保留，且认证必须覆盖该回退路径 —— 上面的配置已满足。验证方法：
- 访问
https://preview.example.com/→ 触发弹窗登录 → 成功加载首页 - 访问
https://preview.example.com/some-route→ 同样触发弹窗 → 登录后正确渲染对应页面（而非 404）
如果出现子路径 404，检查是否误将 auth_basic 写在了 location / 外，或被其他更具体的 location 规则（如 location ~ \.js$）覆盖而跳过了认证。
安全与维护小贴士
- 强制 HTTPS：Basic Auth 密码通过 Base64 编码传输，本质无加密，务必确保 Nginx 已配置有效 TLS 证书
-
权限最小化：
.htpasswd文件权限设为640，属主为root:www-data，防止被 Web 访问泄露 -
区分环境：不同预览环境（staging / demo / pr-123）可用不同 server 块 + 不同
auth_basic_user_file，避免共用密码 -
临时禁用快捷方式：注释掉
auth_basic两行并nginx -t && nginx -s reload，比删文件更安全
不复杂但容易忽略细节，配好一次，后续每次部署预览站都只需复用配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
