Web应用中FireStore操作如何传递Auth Token并配置安全规则？

问题背景 #

开发基于HTML的CRUD项目，部署在Firebase Hosting，邮箱密码登录功能正常。需要通过身份验证保护Firestore数据库，设置安全规则allow read, write: if request.auth != null时触发权限不足错误，但开放规则allow read, write: if true可正常操作。已在addCity()函数中确认用户已登录（能打印UID），但仍无法通过权限验证。

核心原因 #

Firebase客户端默认会自动携带认证信息到Firestore请求，但出现权限不足通常是以下场景：

• 初始化顺序错误：Firestore先于Auth完成初始化，导致客户端未关联认证状态
• 多实例冲突：意外初始化多个Firebase应用实例，Firestore操作使用了未认证的实例
• 认证状态同步滞后：虽然当前能获取currentUser，但Firestore客户端尚未同步最新的认证状态

解决方案 #

1. 确保Auth优先初始化并同步状态 #

调整Firebase初始化流程，等待Auth状态稳定后再初始化Firestore：

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// 你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
let db; // 延迟初始化Firestore

// 监听认证状态变化，稳定后初始化Firestore
onAuthStateChanged(auth, (user) => {
  if (user) {
    db = getFirestore(app);
    console.log("Firestore已关联认证用户:", user.uid);
  } else {
    // 未登录时处理跳转或禁用操作
    window.location.href = "login.html";
  }
});

2. 修正addCity()函数，确保操作依赖有效实例 #

async function addCity() {
  const user = auth.currentUser;
  if (!user) {
    alert("请先登录");
    window.location.href = "login.html";
    return;
  }

  if (!db) {
    alert("服务初始化中，请稍后重试");
    return;
  }

  try {
    await setDoc(doc(db, "cities", "LA"), {
      name: "Los Angeles",
      state: "CA",
      country: "USA"
    });
    alert("城市添加成功");
  } catch (error) {
    console.error("操作失败:", error);
    // 可根据错误类型细化提示，比如权限错误时引导重新登录
  }
}

3. 排查其他潜在问题 #

• 检查浏览器开发者工具的Network面板，查看Firestore请求的Authorization头是否包含Bearer令牌，确认认证信息已携带
• 清除浏览器缓存，重新登录后测试，避免旧会话干扰
• 确认Firebase控制台中用户的登录状态有效，无异常禁用情况

安全规则保持 #

使用你设置的限制规则即可：

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

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