Firebase Storage图片上传随机出现权限不足问题求助

核心问题分析 #

随机出现FirebaseError: Missing or insufficient permissions，但用户已完成认证且Firestore操作正常，主要原因集中在以下几点：

• Firebase Auth ID令牌过期或刷新延迟：默认令牌有效期1小时，SDK自动刷新但网络波动时，Storage请求可能携带失效令牌，而Firestore依赖本地缓存或重试机制仍能正常工作。
• 前端状态与Auth实际状态不同步：状态管理库的isAuthenticated/uid可能未及时更新令牌刷新后的状态，导致上传时依赖缓存值而非实时用户状态。
• 网络波动导致令牌未正确携带：部分用户网络不稳定，请求头中丢失认证令牌，触发权限校验失败。

解决方案 #

1. 上传前强制校验实时用户状态 #

避免依赖状态管理的缓存值，直接从Firebase Auth获取当前用户，并主动刷新令牌：

async saveGuestSignature(signature: string) {
  const commonStore = useCommonStore();
  // 直接获取实时认证用户
  const currentUser = auth.currentUser;
  if (!currentUser) {
    Notify.create({
      type: 'negative',
      message: '会话已过期，请重新登录',
      actions: [{ label: '重新登录', handler: () => this.router.push({name: 'login'}) }]
    });
    return null;
  }

  const storageRef = ref(storage, `/guests-signatures/${commonStore.hotel}/${currentUser.uid}.png`);
  const b64 = signature.substring(signature.indexOf(',') + 1);
  
  try {
    // 强制刷新令牌，确保请求携带有效凭证
    await currentUser.getIdToken(true);
    const snapshot = await uploadString(storageRef, b64, 'base64');
    return await getDownloadURL(snapshot.ref);
  } catch (error) {
    await saveErrorLog(commonStore.hotel, currentUser.uid, 'saveSignature', error);
    Notify.create({
      type: 'negative',
      timeout: 15000,
      icon: 'mdi-alert',
      message: `保存签名时出错: ${error}`,
      actions: [
        {
          label: 'Ok',
          color: 'white',
          handler: () => {/* ... */}
        }
      ]
    });
    return null;
  }
},

2. 优化Auth状态同步与令牌刷新监听 #

在Auth状态变更回调中添加令牌刷新监听，提前触发刷新避免过期：

onBeforeMount(() => {
  onAuthStateChanged(auth, async (user) => {
    authStore.isAuthenticated = !!user;
    if (user) {
      authStore.uid = user.uid;
      authStore.isAuthenticated = true;

      // 获取令牌过期时间，提前5分钟触发刷新
      user.getIdTokenResult().then((idTokenResult) => {
        const expirationTime = new Date(idTokenResult.expirationTime).getTime();
        const refreshDelay = expirationTime - Date.now() - 5 * 60 * 1000; // 提前5分钟
        if (refreshDelay > 0) {
          setTimeout(() => {
            user.getIdToken(true).catch(e => console.error('令牌刷新失败:', e));
          }, refreshDelay);
        }
      });

      try {
        await commonStore.getHotelRules();
        guestStore.getUserData(user.uid);
      } catch (e) {
        Notify.create({
          type: 'negative',
          icon: 'mdi-alert',
          message: '获取数据时出错，请告知我们此问题。',
          actions: [{ label: 'Ok', color: 'white' }],
        });
      }
    } else {
      authStore.isAuthenticated = false;
      guestStore.listeners.userData();
      localStorage.clear();
      sessionStorage.clear();
      this.router.push({name: 'login'});
    }
  });
});

3. 临时添加规则日志排查异常 #

在Storage规则中添加调试日志，查看触发权限拒绝的具体请求上下文（上线前移除）：

rules_version = "2";
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, create, update: if request.auth != null 
        || debug(request.auth, "Auth状态:", request.auth);
    }
  }
}

通过Firebase控制台的Storage规则日志，可查看拒绝请求的request.auth是否为null或存在其他异常。

4. 增加权限错误重试机制 #

针对网络波动导致的令牌问题，添加有限次数的重试：

async saveGuestSignature(signature: string, retryCount = 0) {
  const maxRetries = 2;
  const commonStore = useCommonStore();
  const currentUser = auth.currentUser;

  if (!currentUser) {
    Notify.create({ type: 'negative', message: '会话过期，请重新登录' });
    return null;
  }

  const storageRef = ref(storage, `/guests-signatures/${commonStore.hotel}/${currentUser.uid}.png`);
  const b64 = signature.substring(signature.indexOf(',') + 1);
  
  try {
    await currentUser.getIdToken(true);
    const snapshot = await uploadString(storageRef, b64, 'base64');
    return await getDownloadURL(snapshot.ref);
  } catch (error: any) {
    // 权限错误且未达重试上限时，自动重试
    if (error.code === 'storage/unauthorized' && retryCount < maxRetries) {
      return this.saveGuestSignature(signature, retryCount + 1);
    }

    await saveErrorLog(commonStore.hotel, currentUser.uid, 'saveSignature', error);
    Notify.create({
      type: 'negative',
      timeout: 15000,
      icon: 'mdi-alert',
      message: `保存签名时出错: ${error}`,
      actions: [{ label: 'Ok', color: 'white' }]
    });
    return null;
  }
},

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