如何在Angular Firebase中为请求头添加Bearer Token以获取集合数据

核心前提 #

要添加Bearer Token，得先让用户完成Firebase认证（比如邮箱密码、谷歌登录等），认证后Firebase会返回ID Token，这就是我们要放在请求头里的Bearer Token。

方法一：手动给单个HTTP请求加Token #

适合只需要给特定请求加Token的场景：

1. 获取当前登录用户的ID Token并构造请求

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { from } from 'rxjs';

constructor(private afAuth: AngularFireAuth, private http: HttpClient) {}

// 调用此方法获取集合数据
fetchCollection() {
  from(this.afAuth.currentUser).subscribe(async user => {
    if (!user) {
      alert('请先登录');
      return;
    }
    // 获取ID Token，有效期1小时，过期可传true强制刷新
    const idToken = await user.getIdToken();
    
    // 替换成你的项目ID和集合名称
    const collectionApiUrl = 'https://firestore.googleapis.com/v1/projects/你的项目ID/databases/(default)/documents/你的集合名';
    
    // 构造请求头，加入Bearer Token
    const requestHeaders = new HttpHeaders({
      'Authorization': `Bearer ${idToken}`
    });
    
    this.http.get(collectionApiUrl, { headers: requestHeaders }).subscribe(data => {
      console.log('拿到的集合数据:', data);
      // 这里处理数据逻辑
    });
  });
}

方法二：用HTTP拦截器自动给所有请求加Token #

推荐这种一劳永逸的方式，所有符合条件的请求都会自动带上Token：

1. 创建认证拦截器文件（比如auth.interceptor.ts）

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private afAuth: AngularFireAuth) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 只给Firestore相关API请求加Token，可根据需求调整判断条件
    if (request.url.includes('firestore.googleapis.com')) {
      return from(this.afAuth.currentUser).pipe(
        switchMap(user => {
          if (!user) return next.handle(request);
          
          return from(user.getIdToken()).pipe(
            switchMap(token => {
              // 克隆请求并添加Authorization头
              const authRequest = request.clone({
                headers: request.headers.set('Authorization', `Bearer ${token}`)
              });
              return next.handle(authRequest);
            })
          );
        })
      );
    }
    return next.handle(request);
  }
}

2. 在AppModule中注册拦截器

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器共存
    }
  ]
})
export class AppModule {}

3. 后续请求无需手动加Token

constructor(private http: HttpClient) {}

getCollectionData() {
  const apiUrl = 'https://firestore.googleapis.com/v1/projects/你的项目ID/databases/(default)/documents/你的集合名';
  this.http.get(apiUrl).subscribe(data => {
    console.log('集合数据:', data);
  });
}

重要注意事项 #

• 必须配置正确的Firebase规则，允许认证用户访问集合，示例Firestore规则：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

• 如果你使用AngularFirestore SDK（而非直接调用REST API），SDK会自动处理认证和Token，无需手动添加。

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