基于Ionic Vue与Firebase，如何监听自定义声明（Custom Claims）变化？

要实时监听Firebase自定义声明（Custom Claims）的变化，核心是解决及时感知Claims更新和同步客户端角色状态两个问题，以下是两种实用方案，按推荐优先级排序：

方案一：结合Firestore实时监听（真正实时） #

这是最可靠的实时方案，利用Firestore的实时监听能力，在云函数更新Claims的同时同步写入用户角色文档，客户端监听文档变化后立即刷新Token获取最新Claims。

步骤1：修改云函数，同步角色到Firestore #

在设置Custom Claims的云函数中，额外将角色信息写入Firestore：

// 云函数代码
exports.setUserRole = functions.https.onCall(async (data, context) => {
  const { uid, isSubscriber } = data;
  // 设置Custom Claims
  await admin.auth().setCustomUserClaims(uid, { subscriber: isSubscriber });
  // 同步角色到Firestore
  await admin.firestore().collection('user-roles').doc(uid).set({
    subscriber: isSubscriber,
    updatedAt: admin.firestore.FieldValue.serverTimestamp()
  });
  return { success: true };
});

步骤2：客户端监听Firestore文档并更新角色 #

在Ionic Vue的全局状态管理（如Pinia）或根组件中，监听用户角色文档的变化，一旦变化就强制刷新ID Token并更新本地角色：

// 示例：在Pinia store中实现
import { defineStore } from 'pinia';
import { auth, firestore } from '@/firebase/config';
import { onIdTokenChanged } from 'firebase/auth';
import { doc, onSnapshot } from 'firebase/firestore';

export const useUserStore = defineStore('user', {
  state: () => ({
    isSubscriber: false
  }),
  actions: {
    initRoleListener() {
      onIdTokenChanged(auth, async (user) => {
        if (!user) return;
        // 获取初始角色
        const idTokenResult = await user.getIdTokenResult(true);
        this.isSubscriber = idTokenResult.claims.subscriber || false;

        // 监听Firestore角色文档变化
        const roleDocRef = doc(firestore, 'user-roles', user.uid);
        onSnapshot(roleDocRef, async () => {
          // 文档变化时强制刷新Token，获取最新Claims
          const updatedTokenResult = await user.getIdTokenResult(true);
          this.isSubscriber = updatedTokenResult.claims.subscriber || false;
          // 此处可触发UI更新，比如通知组件角色变更
        });
      });
    }
  }
});

在App.vue的onMounted钩子中调用initRoleListener()即可启用监听。

方案二：onIdTokenChanged + 定时轮询（轻量方案） #

如果不需要极致实时（允许5-10分钟延迟），可以用onIdTokenChanged监听Token自动刷新，并配合定时强制刷新Token，实现准实时感知：

// 在Vue组件或全局初始化逻辑中
import { auth } from '@/firebase/config';
import { onIdTokenChanged } from 'firebase/auth';

let refreshInterval;

const initRoleCheck = () => {
  onIdTokenChanged(auth, async (user) => {
    if (!user) {
      if (refreshInterval) clearInterval(refreshInterval);
      return;
    }
    // 更新当前角色
    const idTokenResult = await user.getIdTokenResult(true);
    user.subscriber = idTokenResult.claims.subscriber || false;
    // 触发UI更新逻辑

    // 定时强制刷新Token，示例为每5分钟一次
    if (refreshInterval) clearInterval(refreshInterval);
    refreshInterval = setInterval(async () => {
      const updatedTokenResult = await user.getIdTokenResult(true);
      if (updatedTokenResult.claims.subscriber !== user.subscriber) {
        user.subscriber = updatedTokenResult.claims.subscriber;
        // 触发UI更新逻辑
      }
    }, 5 * 60 * 1000);
  });
};

// 在App.vue中挂载和清理
onMounted(() => {
  initRoleCheck();
});

onUnmounted(() => {
  if (refreshInterval) clearInterval(refreshInterval);
});

为什么不用onAuthStateChanged？ #

onAuthStateChanged仅在用户登录/登出时触发，不会监听ID Token（包含Claims）的变化，因此无法感知Claims的更新。而onIdTokenChanged会在ID Token刷新（自动或强制）时触发，更适合处理Claims变化的场景。

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