独立 Angular 中的 Firebase 身份验证设置

Question

我正在将 Firebase 的存储用于我的一个具有 Angular 17 独立前端的项目。我也想集成 firebase 身份验证。 由于我使用独立的角度，所以我没有 ngmodules。这是我的 app.config.ts 中 firebaseapp、存储和 getAuth 的设置：

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { provideAuth, getAuth } from '@angular/fire/auth';
//bunch of other irrelevant imports

import { environment } from 'myenvpath';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimationsAsync(),
    importProvidersFrom([BrowserAnimationsModule], MatDialogModule),
    provideHttpClient(withInterceptors([authInterceptor])),
    JwtstoreService,
    {
      provide: JWT_OPTIONS,
      //jwt setup
    },
    JwtHelperService,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideStorage(() => getStorage()),
    provideAuth(() => getAuth()),
  ],
};

我使用自定义 jwt 令牌进行本地存储中的 firebase 身份验证。 我制作了这个 storage.service.ts 来处理身份验证。它还有一种从 Firebase 存储中获取数据的方法。

import { Injectable } from '@angular/core';
import { getStorage, ref, getDownloadURL } from '@angular/fire/storage';
import { getAuth, signInWithCustomToken } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  private authInitialized = false;

  constructor() {}

  private async initializeAuth(): Promise<void> {
    if (this.authInitialized) return;

    const firebaseToken = localStorage.getItem('fbtoken');
    if (!firebaseToken) {
      throw new Error('Firebase token is missing.');
    }

    const auth = getAuth();
    await signInWithCustomToken(auth, firebaseToken);
    this.authInitialized = true;
  }

  async getDownloadURL(path: string): Promise<string> {
    await this.initializeAuth();
    const storage = getStorage();
    const storageRef = ref(storage, path);
    return await getDownloadURL(storageRef);
  }
}

在我的组件中，如果我想从存储中获取某些内容，我只需调用 getDownloadURL() 方法（当然，存储服务被注入到组件的构造函数中）

当我启动应用程序并启动与存储的交互时（调用 getDownloadURL() 方法），我在浏览器控制台中收到以下错误：

Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using
provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported).

由于我没有收到“令牌丢失”或其他类似错误，看来问题出在 app.config 和/或 storage.service 设置上。错误不断提到appmodule，但我再次使用独立的角度，没有app.module或@ngmodules...

我也不认为错误来自我的后端，因为我很好地恢复了我的自定义令牌。

有一段时间，我在没有身份验证集成的情况下使用了 firebase 存储，并且运行良好。

如有任何帮助，我们将不胜感激！

Answer 1

我不明白为什么，但这有效：

import { Injectable, inject } from '@angular/core';
import { getStorage, ref, getDownloadURL } from '@angular/fire/storage';
import { Auth, getAuth, signInWithCustomToken } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  private authInitialized = false;
  private auth = inject(Auth); //Auth injection

  constructor() {}

  private async initializeAuth(): Promise<void> {
    if (this.authInitialized) return;

    const firebaseToken = localStorage.getItem('fbtoken');
    if (!firebaseToken) {
      throw new Error('Firebase token is missing.');
    }
    this.auth = getAuth(); //refer getAuth() to this.auth
    await signInWithCustomToken(this.auth, firebaseToken);
    this.authInitialized = true;
  }

  async getDownloadURL(path: string): Promise<string> {
    await this.initializeAuth();
    const storage = getStorage();
    const storageRef = ref(storage, path);
    return await getDownloadURL(storageRef);
  }
}

看来我需要以这种方式注入Auth...