AngularFire访问Firebase Storage头像资源触发403权限错误求解

问题原因说明 #

1. 下载URL Token的作用逻辑 #

Firebase Storage 生成的带token参数的下载URL是签名公开链接，优先级高于存储安全规则：

• 只要token是有效的，无论安全规则如何配置，都可以直接访问对应资源
• 当文件被覆盖、删除后重新上传、主动撤销下载URL时，旧token会立即失效，携带失效token的请求会直接返回403，不会进入安全规则校验流程
  你测试中两个URL仅token不同返回结果不同，就是因为一个token有效、一个已经失效。

2. 安全规则403的根本原因 #

你配置的读规则要求request.auth != null，但直接将URL放到<img>标签的src属性发起的是普通HTTP GET请求，不会自动携带Firebase Auth的身份凭证，因此服务端拿到的request.auth始终为null，会被规则拦截。
你测试时修改规则为allow read: if request.auth == null依然无法访问，是因为你用的是携带失效token的下载URL，此时请求直接被token校验拦截，根本没有进入安全规则校验环节。
模拟器中测试规则正常，是因为你在模拟器中手动模拟了登录状态，填充了request.auth参数，和真实浏览器中img标签发起的请求环境完全不同。

解决方案 #

方案1（推荐）：实时获取有效下载URL #

不要将带固定token的下载URL持久化存储在用户photoURL字段中，文件更新后旧token会失效。使用AngularFire提供的getDownloadURL()方法实时获取有效链接：

// 组件逻辑
import { AngularFireStorage } from '@angular/fire/storage';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';

export class UserProfileComponent {
  avatarUrl$: Observable<string | null>;
  constructor(private storage: AngularFireStorage, private auth: AngularFireAuth) {
    // 取当前登录用户UID
    this.auth.user.subscribe(user => {
      if (user) {
        const avatarRef = this.storage.ref(`images/${user.uid}/photoURL.jpg`);
        this.avatarUrl$ = avatarRef.getDownloadURL();
      }
    })
  }
}

模板中使用async管道订阅：

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

方案2：调整安全规则适配公开访问 #

如果头像没有隐私要求，可以调整对应路径的读规则为公开访问，无需鉴权：

rules_version = '2';
service firebase.storage {
 match /b/{bucket}/o {
    match /images/{userId}/{imageId} {
      allow write: if request.resource.size < 0.5 * 1024 * 1024
                   && request.resource.contentType.matches('image/.*')
                   && request.auth.uid == userId;
      // 公开读
      allow read: if true;
    }
 }
}

调整后即使是携带失效token的URL，去掉token参数后也可以正常访问。

补充说明 #

你提到商品类资源可以正常访问，一般是两种情况：一是商品资源的下载URL是实时获取的有效链接，二是商品资源对应的存储路径配置了公开读规则。

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