Angular Fire请求附加Auth Token问题：拦截器未生效

Angular的HTTP拦截器仅对HttpClient发起的请求生效，而AngularFire依赖的Firebase JS SDK直接调用原生API，不会经过Angular的HTTP拦截器，所以你之前的拦截器方案无法生效。以下是三种可行的解决方式：

方案一：利用Firebase SDK自动附带Token（默认场景） #

如果你的用户通过AngularFireAuth完成登录（如邮箱密码、第三方登录），Firebase SDK会自动在Firestore请求中携带当前用户的Auth Token，无需手动处理。只需确保请求数据前用户已完成登录，可通过监听authState确保身份验证完成：

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

constructor(private afAuth: AngularFireAuth, private db: AngularFirestore) {}

ngOnInit() {
  this.afAuth.authState.pipe(
    switchMap(user => {
      // 用户已登录，SDK自动携带token发起请求
      return user ? this.db.collection('myCollection').valueChanges() : of([]);
    })
  ).subscribe(res => {
    // 你的业务逻辑
  });
}

方案二：配置全局Auth Token Factory（自定义Token场景） #

若使用自定义生成的Auth Token（如后端发放的token），可在初始化AngularFirestore时配置authTokenFactory，让SDK自动为所有请求附加token：

1. 在app.module.ts中配置Firestore设置：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule, SETTINGS } from '@angular/fire/compat/firestore';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { environment } from '../environments/environment';
import { AuthService } from './auth.service';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule
  ],
  providers: [
    {
      provide: SETTINGS,
      useFactory: (authService: AuthService) => ({
        // 每次请求时自动调用此方法获取token
        authTokenFactory: () => authService.getCustomAuthToken()
      }),
      deps: [AuthService]
    }
  ]
})
export class AppModule {}

2. 在AuthService中实现获取自定义token的方法：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  async getCustomAuthToken(): Promise<string> {
    // 替换为你的自定义token获取逻辑（如从localStorage读取、调用后端接口）
    return 'your-custom-auth-token';
  }
}

方案三：为单个请求手动附加Token（临时场景） #

若仅需为个别请求附加token，可直接获取token后，通过Firestore原生引用发起带token的请求：

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private afAuth: AngularFireAuth, private db: AngularFirestore) {}

async fetchDataWithToken() {
  const user = await this.afAuth.currentUser;
  const token = user ? await user.getIdToken() : null;
  
  if (token) {
    const collectionRef = this.db.collection('myCollection').ref;
    // 手动指定authToken发起请求
    const snapshot = await collectionRef.get({ authToken: token });
    const data = snapshot.docs.map(doc => doc.data());
    // 处理返回的数据
  }
}

注意事项 #

• 确保token处于有效期内，若token过期，需在authTokenFactory或获取token的逻辑中添加刷新机制；
• 若使用自定义token，需确保该token已在Firebase Auth中完成验证（如通过signInWithCustomToken登录）。

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