在Angular中使用Firebase身份验证时,有时会遇到发出两次身份验证请求的问题,其中第一次请求的数据是不完整的。这可能是由于在应用启动时,Firebase尚未完成初始化,导致第一次身份验证请求失败。
要解决这个问题,你可以使用Angular的APP_INITIALIZER
提供者来确保Firebase初始化完成后再进行身份验证。以下是一个示例解决方法:
firebase-config.service.ts
文件,并在其中定义一个FirebaseConfigService
类:import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
@Injectable({
providedIn: 'root'
})
export class FirebaseConfigService {
constructor(private afAuth: AngularFireAuth) {
}
initializeApp(): Promise {
return new Promise((resolve, reject) => {
this.afAuth.auth.onAuthStateChanged((user) => {
if (user) {
resolve(user);
} else {
reject('User not authenticated');
}
});
});
}
}
app.module.ts
文件中,将FirebaseConfigService
添加到APP_INITIALIZER
提供者中:import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { FirebaseConfigService } from './firebase-config.service';
export function initializeApp(firebaseConfigService: FirebaseConfigService) {
return (): Promise => firebaseConfigService.initializeApp();
}
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule
],
providers: [
FirebaseConfigService,
{
provide: APP_INITIALIZER,
useFactory: initializeApp,
deps: [FirebaseConfigService],
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
在上述代码中,我们通过APP_INITIALIZER
提供者调用initializeApp
函数,该函数将等待FirebaseConfigService
中的initializeApp
方法返回的Promise完成。这将确保Firebase初始化完成后才会继续应用程序的初始化过程。
现在,你可以在需要进行身份验证的组件中使用AngularFireAuth
服务,并确保在Firebase完成初始化之后再进行身份验证请求。
import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
@Component({
selector: 'app-auth',
template: `
`
})
export class AuthComponent {
constructor(private afAuth: AngularFireAuth) {
}
authenticate() {
this.afAuth.signInWithEmailAndPassword('email@example.com', 'password')
.then((userCredential) => {
// Authentication successful
})
.catch((error) => {
// Authentication failed
});
}
}
通过以上步骤,你应该能够解决Angular Firebase身份验证发出两次的问题,并确保第一次请求的数据是完整的。