如何在Angular应用中展示Firebase Storage图片并执行安全规则？

我懂你碰到的这个坑——直接用getDownloadURL()拿到链接后，这个链接本质上是个带临时权限的公开地址，一旦生成，不管是谁拿到都能访问图片，Firebase的安全规则根本没法对后续的访问请求做校验，等于白设了规则对吧？

下面给你两种适配Angular项目的靠谱解决方案：

方案一：配合AngularFire做身份验证后生成下载链接 #

其实问题不是getDownloadURL()本身，而是你得确保调用这个方法时，用户已经通过Firebase Auth验证，同时你的Storage安全规则要配置正确。比如，先把规则改成只允许用户访问自己UID下的图片：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /images/{uid}/{allPaths=**} {
      allow read, write: if request.auth != null && request.auth.uid == uid;
    }
  }
}

然后在Angular组件里，先监听用户登录状态，再去获取链接，用AngularFire的Observable来处理更符合Angular的响应式风格：

import { AngularFireStorage } from '@angular/fire/compat/storage';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// 组件类里的代码
constructor(private storage: AngularFireStorage, private afAuth: AngularFireAuth) {}

getUserPhotoUrl(): Observable<string | null> {
  return this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        // 指向用户自己的图片路径
        const imgRef = this.storage.ref(`images/${user.uid}/photo.png`);
        // 只有通过身份验证才会生成有效链接
        return imgRef.getDownloadURL();
      }
      return [null]; // 用户未登录时返回null
    })
  );
}

模板里直接用async管道渲染：

<img *ngIf="userPhotoUrl$ | async as photoUrl" [src]="photoUrl" alt="用户头像">

这种方式下，getDownloadURL()会先校验用户身份是否符合安全规则，通过了才会生成链接。你还可以给链接设置过期时间，比如imgRef.getDownloadURL({expires: 3600})让链接1小时后失效，进一步降低泄露风险。

方案二：直接获取文件Blob数据，不依赖下载链接 #

如果你不想用下载链接，也可以直接通过SDK获取图片的Blob数据，转换成浏览器能识别的URL，全程受安全规则管控：

getUserPhotoBlobUrl(): Observable<string | null> {
  return this.afAuth.authState.pipe(
    switchMap(async user => {
      if (!user) return null;
      const imgRef = this.storage.ref(`images/${user.uid}/photo.png`);
      const blob = await imgRef.getBlob();
      // 生成本地临时URL
      return URL.createObjectURL(blob);
    })
  );
}

模板用法和之前一样，但要注意组件销毁时释放这个临时URL，避免内存泄漏：

private photoBlobUrlSubscription?: Subscription;

ngOnInit(): void {
  this.photoBlobUrlSubscription = this.getUserPhotoBlobUrl().subscribe(url => {
    // 可以把url存到组件变量里
  });
}

ngOnDestroy(): void {
  this.photoBlobUrlSubscription?.unsubscribe();
  // 释放临时URL
  this.userPhotoBlobUrl && URL.revokeObjectURL(this.userPhotoBlobUrl);
}

为啥原来的方式会失效？ #

你之前的写法里，生成的下载链接是一个独立的资源地址，后续请求这个链接时，Firebase不会再检查请求者的身份——因为链接本身已经包含了临时的权限凭证。要是这个链接不小心泄露了，任何人都能访问图片，安全规则就被绕过去了。而上面的两种方案，要么在生成链接前严格校验身份，要么直接通过SDK拉取内容，全程都在安全规则的管控范围内。

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