Angular Firebase：如何用ngFor仅展示特定用户上传的图片

要实现只显示当前用户上传的图片，核心是给每张图片绑定上传用户的唯一标识（比如Firebase Auth的UID），然后在查询时添加过滤条件。下面分具体步骤修改：

1. 上传图片时关联用户UID #

首先，你需要在上传图片到Firebase Storage的同时，把用户UID和图片信息一起存储到Firestore（或Realtime Database）中。假设你的ImageService里有上传方法，修改它：

// image.service.ts 中的上传方法示例
async uploadImage(file: File, userUid: string): Promise<void> {
  // 1. 上传文件到Storage
  const storageRef = this.storage.ref(`images/${file.name}`);
  const uploadTask = storageRef.put(file);
  
  await uploadTask;
  
  // 2. 获取图片下载URL
  const downloadURL = await storageRef.getDownloadURL();
  
  // 3. 将图片信息+用户UID存入Firestore
  await this.firestore.collection('galleryImages').add({
    url: downloadURL,
    userId: userUid, // 关键：添加用户UID字段
    uploadTime: new Date()
  });
}

注意：要确保你已经通过Firebase Auth获取到当前登录用户的UID，可以在组件中通过AngularFireAuth的user observable获取，再传给上传方法。

2. 修改图片查询逻辑，过滤当前用户的图片 #

在ImageService中，修改获取图片的方法，添加where条件只查询当前用户的图片：

// image.service.ts 中的获取图片方法
getUserImages(userUid: string): Observable<GalleryImage[]> {
  return this.firestore.collection<GalleryImage>(
    'galleryImages',
    ref => ref.where('userId', '==', userUid) // 过滤条件：只取当前用户的图片
  ).valueChanges();
}

3. 在GalleryComponent中调用过滤后的查询方法 #

修改你的GalleryComponent.ts，先获取当前用户的UID，再调用上面的getUserImages方法：

// gallery.component.ts
import { Component, OnInit } from '@angular/core';
import { ImageService } from '../services/image.service';
import { GalleryImage } from '../models/galleryImage.model';
import { AngularFireAuth } from '@angular/fire/compat/auth'; // 引入Auth服务

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css']
})
export class GalleryComponent implements OnInit {
  userImages: GalleryImage[] = [];
  currentUserUid: string | null = null;

  constructor(
    private imageService: ImageService,
    private afAuth: AngularFireAuth // 注入Auth服务
  ) {}

  ngOnInit(): void {
    // 先获取当前登录用户的UID
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.currentUserUid = user.uid;
        // 获取当前用户的图片
        this.imageService.getUserImages(this.currentUserUid).subscribe(images => {
          this.userImages = images;
        });
      } else {
        // 用户未登录时的处理，比如清空图片列表
        this.userImages = [];
      }
    });
  }
}

4. （可选）加固Storage安全规则 #

为了防止其他用户通过直接URL访问不属于自己的图片，建议修改Firebase Storage的安全规则，只允许用户访问自己上传的图片：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /images/{imageId} {
      // 只允许上传者自己读取和写入
      allow read, write: if request.auth != null && request.auth.uid == resource.metadata.userId;
    }
  }
}

注意：如果上传时在Storage的元数据中也保存了userId，可以用上面的规则；如果只存在Firestore中，也可以结合Firestore的规则来验证权限。

这样修改后，你的画廊组件就只会展示当前登录用户上传的图片了。

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