Firebase跨标签页多数据库认证覆盖问题及解决方案

Firebase Auth的会话状态存储在浏览器的共享存储空间（如localStorage）中，同一个Firebase项目下的默认Auth实例会复用这些共享存储。两个标签页属于同一域名，当第二个标签页用自定义令牌Y登录时，会覆盖第一个标签页存储的令牌X的Auth会话。此外，Firebase Auth是项目级服务，而非数据库级，即便操作不同数据库，默认情况下也共享同一个Auth实例的身份状态，这就导致标签页1的用户被替换，访问数据库A时因权限不符被拒绝。

要实现不同标签页独立登录不同数据库，需为每个数据库初始化独立的Firebase App实例，每个实例指定唯一名称，这样它们的Auth状态会被单独存储，不会互相干扰。

具体实现步骤 #

1. 为每个数据库创建独立的Firebase App实例，初始化时传入对应数据库的配置，并指定不同的name参数（不能重复，也不能用默认的[DEFAULT]）。
2. 基于每个App实例分别获取Auth和Database对象，使用对应的自定义令牌登录。

代码示例 #

// 初始化对应数据库A的App实例
const appForDB_A = firebase.initializeApp({
  apiKey: "你的项目API_KEY",
  authDomain: "你的项目AUTH_DOMAIN",
  databaseURL: "数据库A的URL"
}, "appDB_A"); // 唯一的实例名称

// 初始化对应数据库B的App实例
const appForDB_B = firebase.initializeApp({
  apiKey: "你的项目API_KEY",
  authDomain: "你的项目AUTH_DOMAIN",
  databaseURL: "数据库B的URL"
}, "appDB_B"); // 唯一的实例名称

// 标签页1：使用数据库A的App实例登录并操作
const authForDB_A = appForDB_A.auth();
authForDB_A.signInWithCustomToken("自定义令牌X")
  .then(() => {
    const dbA = appForDB_A.database();
    // 执行数据库A的读写操作
    dbA.ref("path/to/data").on("value", snapshot => {
      // 处理数据
    });
  });

// 标签页2：使用数据库B的App实例登录并操作
const authForDB_B = appForDB_B.auth();
authForDB_B.signInWithCustomToken("自定义令牌Y")
  .then(() => {
    const dbB = appForDB_B.database();
    // 执行数据库B的读写操作
    dbB.ref("path/to/data").on("value", snapshot => {
      // 处理数据
    });
  });

关键说明 #

• 每个Firebase App实例完全独立，它们的Auth会话会以实例名称为标识分开存储，不会互相覆盖。
• 由于两个App属于同一个Firebase项目，apiKey和authDomain可复用项目配置，仅databaseURL需对应各自的数据库地址。

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