Angular中Firebase认证及Firestore权限不足问题求解

核心问题分析 #

你遇到的Missing or insufficient permissions错误，本质和Realtime Database的逻辑不同：Firestore的权限控制依赖安全规则，而非手动添加请求头。当前问题大概率是两个原因：

1. Firestore安全规则未正确配置，未允许已认证用户查询对应数据
2. 手动实现的登录逻辑没有让Firebase Auth识别到当前用户，导致Firestore SDK判定用户未认证，触发权限拦截

手动登录vs Firebase SDK Auth #

你写的AuthService并非完全无用，但Firebase Auth SDK能自动处理令牌刷新、用户状态持久化、Firestore认证上下文关联等细节，建议基于SDK整合你的认证逻辑，而非完全手动实现——这能大幅减少后续维护成本。

具体解决步骤 #

1. 修正Firestore安全规则 #

假设你的timeshares集合包含ownerId字段，要允许已认证用户查询自己的资源，规则应配置为：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /timeshares/{timeshare} {
      // 仅允许已认证用户查询属于自己的timeshare
      allow read: if request.auth != null && resource.data.ownerId == request.auth.uid;
      // 写规则按需配置，示例为仅允许所有者修改
      allow write: if request.auth != null && resource.data.ownerId == request.auth.uid;
    }
  }
}

2. 用AngularFireAuth整合认证逻辑 #

替换手动登录逻辑，借助Angular官方的Firebase集成库自动处理认证状态：

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  currentUser$: Observable<any>;

  constructor(private afAuth: AngularFireAuth) {
    // 直接订阅Firebase Auth的用户状态Observable，自动同步登录/登出状态
    this.currentUser$ = this.afAuth.user;
  }

  // 替换手动login方法
  login(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password);
  }

  logout() {
    return this.afAuth.signOut();
  }
}

3. 调整Firestore查询方法 #

使用AngularFireFirestore查询，它会自动关联当前用户的认证上下文，无需手动处理请求头：

import { AngularFirestore } from '@angular/fire/compat/firestore';
import { AuthService } from './auth.service';
import { switchMap, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TimeshareService {
  constructor(private afs: AngularFirestore, private authService: AuthService) {}

  getTimesharesByOwnerId() {
    // 先获取当前用户，再查询对应资源
    return this.authService.currentUser$.pipe(
      switchMap(user => {
        if (!user) {
          // 用户未登录时返回空数组或自定义处理逻辑
          return of([]);
        }
        return this.afs.collection('timeshares', ref => 
          ref.where('ownerId', '==', user.uid)
        ).valueChanges();
      })
    );
  }
}

4. 为什么手动加请求头没用？ #

Firestore Web SDK不会读取手动设置的HTTP头，它通过Firebase Auth的上下文自动附加认证令牌。只有直接调用Firestore REST API时，才需要手动在请求头添加Authorization: Bearer <id-token>，但使用AngularFire SDK时完全不需要这一步。

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