如何为需认证的Firestore查询与Web Worker共享Firebase认证状态？

可以通过传递用户的ID Token到Web Worker，再在Worker中完成认证初始化，解决权限不足的问题。具体实现步骤如下：

1. 主线程传递ID Token到Web Worker #

在主线程中，监听用户登录状态，获取当前用户的ID Token并发送给Worker：

// 主线程代码
import { getAuth, getIdToken } from "firebase/auth";

const auth = getAuth();
const worker = new Worker("./my-firestore-worker.worker.ts");

// 同步认证状态到Worker
auth.onAuthStateChanged(async (user) => {
  if (user) {
    // 获取ID Token（默认1小时有效期）
    const idToken = await getIdToken(user);
    worker.postMessage({ type: "SET_AUTH_TOKEN", token: idToken });
    // 触发Worker执行认证查询
    worker.postMessage({ type: "FETCH_TASKS" });
  } else {
    // 用户登出时通知Worker
    worker.postMessage({ type: "SIGN_OUT" });
  }
});

// 接收Worker返回的查询结果
worker.addEventListener("message", (ev) => {
  if (ev.data.type === "TASKS_RESULT") {
    console.log("获取到任务数据:", ev.data.data);
  }
});

2. Web Worker中初始化认证并执行查询 #

在Worker中导入Firebase Auth模块，初始化Auth实例后用收到的ID Token完成登录，之后即可执行受权限限制的Firestore查询：

// my-firestore-worker.worker.ts
/// <reference lib="webworker" />

import {
  collection,
  getDocs,
  getFirestore,
  query,
} from "@firebase/firestore";
import { initializeApp } from "firebase/app";
import { initializeAuth, signInWithCustomToken, signOut } from "@firebase/auth";
import { indexedDBLocalPersistence } from "@firebase/auth";

const app = initializeApp({
  /* 你的Firebase项目配置 */
});

// 在Worker中初始化Auth，使用indexedDB持久化保持状态
const auth = initializeAuth(app, {
  persistence: indexedDBLocalPersistence
});

const firestore = getFirestore(app);

addEventListener("message", async (ev) => {
  switch (ev.data.type) {
    case "SET_AUTH_TOKEN":
      // 使用ID Token完成认证登录
      await signInWithCustomToken(auth, ev.data.token);
      break;
    case "SIGN_OUT":
      await signOut(auth);
      break;
    case "FETCH_TASKS":
      // 执行受权限限制的查询
      try {
        const projectFilesSnapshot = await getDocs(
          query(collection(firestore, `/projects/my-project/tasks`))
        );
        // 将结果发送回主线程
        postMessage({
          type: "TASKS_RESULT",
          data: projectFilesSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }))
        });
      } catch (err) {
        postMessage({ type: "ERROR", message: err.message });
      }
      break;
  }
});

关键注意事项 #

• ID Token有效期：默认ID Token有效期为1小时，需在主线程监听onIdTokenChanged事件，当token刷新时重新发送给Worker，避免认证失效。
• Worker Auth持久化：使用indexedDBLocalPersistence可以让Worker保留认证状态，无需每次都传递token，但需确保主线程与Worker的认证状态同步。
• 安全问题：ID Token通过主线程与Worker的消息传递是安全的，无需额外加密，但不要在Worker中存储敏感信息。

补充说明 #

• Firebase v9 SDK基于fetch构建，完全适配Web Worker环境，无需担心兼容性问题。
• reauthenticateWithCredential方法需要存储用户密码，存在安全风险，不适合用于此场景，传递ID Token是更安全可行的方案。

参考资料内容 #

• Firebase打包体积优化：介绍如何精简Firebase SDK的打包大小，适合在Web Worker中使用以降低加载成本。
• Firebase Auth Service Worker会话：讲解如何在Service Worker中管理用户认证会话，其原理可迁移到Web Worker场景。
• Firebase Cloud Messaging JS接收：说明在JavaScript环境中接收FCM消息的方法，涉及Worker环境下的Firebase初始化逻辑。

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