AngularFire signInWithEmailAndPassword错误无法捕获问题求助

问题说明 #

你遇到的控制台红色错误日志，是Firebase Auth默认输出的内部错误日志，即使代码里加了catch逻辑，Firebase仍会自动打印这些错误。另外你的代码存在Promise处理逻辑问题，导致错误未被正确拦截。

你截图中的错误信息翻译如下：

FirebaseError: 给定的密码无效或用户未设置密码。

修复步骤 #

1. 修正Promise错误传递逻辑 #

你的认证服务中，catch块仅打印错误但未重新抛出或返回被拒绝的Promise，导致组件层的catch无法捕获到错误；同时组件里的try/catch是同步逻辑，对异步Promise错误无效。

修改认证服务代码：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  constructor(private angularFireAuth: AngularFireAuth, private router: Router) { }

  login(email: string, password: string): Promise<void> {
    return this.angularFireAuth
      .signInWithEmailAndPassword(email, password)
      .then(() => this.router.navigate(['basics']))
      .catch((error: any) => {
        console.warn('登录失败:', error.message);
        // 重新抛出错误，让组件层可以捕获处理
        return Promise.reject(error);
      });
  }
}

修改登录组件代码：

login(): void {
  if (this.form.valid) {
    const { email, password } = this.form.value;
    this.authenticationService.login(email, password)
      .then(() => {
        // 登录成功后的自定义逻辑
      })
      .catch((error) => {
        console.log('Error caught 1:', error.message);
        // 这里可添加用户友好提示，比如弹窗显示错误内容
      });
  }
}

2. 关闭Firebase Auth内部错误日志 #

要阻止控制台的红色默认错误日志，可通过Firebase的日志控制API调整日志级别：

在AppModule中初始化后配置日志级别：

import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';
import { getAuth, setLogLevel } from "firebase/auth";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [AuthenticationService],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    // 设置日志级别为'none'可完全关闭Auth模块的日志输出
    const auth = getAuth();
    setLogLevel(auth, 'none');
  }
}

3. 修正代码语法错误 #

• AppModule中重复导入了BrowserModule，删除其中一个即可；
• providers数组里AuthenticationService后面多了个.，需删除。

总结 #

1. 确保Promise错误通过Promise.reject()正确传递，让上层组件可捕获处理；
2. 通过setLogLevel关闭Firebase Auth的内部日志，避免控制台出现红色错误信息；
3. 修正代码中的语法错误，保证模块正常运行。

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