如何防止未授权用户加载Firebase门户页面？

1. 完全动态渲染授权内容（最安全） #

把门户页面的敏感内容全部从静态HTML中移除，只保留一个空容器，仅在用户验证通过后动态生成并插入内容：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
const appContainer = document.getElementById('app-container');

onAuthStateChanged(auth, (user) => {
  if (user) {
    // 方式1：用innerHTML插入内容（适合简单场景）
    appContainer.innerHTML = `
      <h1>安全门户首页</h1>
      <div class="dashboard">
        <!-- 所有门户内容都在这里生成 -->
      </div>
    `;

    // 方式2：通过DOM API创建元素（更安全，避免XSS风险）
    const heading = document.createElement('h1');
    heading.textContent = '安全门户首页';
    appContainer.appendChild(heading);
  } else {
    // 立即重定向，不给页面渲染机会
    window.location.replace('/login.html');
  }
});

这种方式下，未登录用户的页面源码里完全没有敏感内容，彻底杜绝爬取风险。

2. 提前拦截页面渲染 #

在HTML头部添加CSS隐藏整个页面，配合同步检查+异步监听双重验证：

首先在HTML的<head>里加：

body { display: none; }

然后编写JS逻辑：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();

// 先同步检查当前用户（处理缓存的登录状态）
if (auth.currentUser) {
  document.body.style.display = 'block';
} else {
  // 无缓存用户，立即跳转
  window.location.replace('/login.html');
}

// 监听auth状态变化，处理token过期、登出等后续情况
onAuthStateChanged(auth, (user) => {
  if (!user) {
    window.location.replace('/login.html');
  }
});

注意：currentUser可能在页面初始化时未完成加载，所以必须配合onAuthStateChanged做兜底监听。

3. 后端规则兜底（配合Firebase服务） #

如果门户依赖Firebase数据库/存储，一定要配置安全规则，确保只有授权用户能访问数据：

// Firestore规则示例
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

就算客户端出现漏洞，后端规则也能阻挡未授权访问。

不要用这些无效方案 #

• 仅靠hidden属性隐藏内容：源码里依然存在，容易被爬取或通过开发者工具修改显示。
• 延迟重定向：会导致页面短暂闪现，体验差且有安全隐患。

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