Angular Firebase Auth登录需点击两次按钮或刷新才能成功问题

• 异步回调脱离Angular变更检测区域：Firebase Auth的signInWithEmailAndPassword方法属于第三方异步操作，其then回调默认运行在Angular的NgZone之外，调用router.navigate后Angular无法触发变更检测完成路由渲染，表现为首次点击无跳转响应，第二次点击时的交互事件触发了变更检测，才会执行之前排队的跳转逻辑。
• 缺少错误捕获逻辑：现有代码未添加错误处理分支，首次登录如果触发网络波动、账号密码校验失败等异常，不会有任何反馈，也会呈现出"点击无反应"的表象。
• 路由守卫状态不同步：如果/dashboard配置了登录校验路由守卫，守卫依赖afAuth.authState判断登录态，首次登录完成后authState还未完成状态更新，守卫会拦截跳转请求，第二次点击时authState已更新为已登录状态，跳转就能正常执行。

方案1：用NgZone包裹路由跳转（优先推荐） #

将路由跳转逻辑放入NgZone的run方法中，强制让逻辑在Angular变更检测区域内执行，确保跳转即时生效。
修正步骤：

1. 从@angular/core导入NgZone
2. 在组件构造函数中注入NgZone
3. 调整signInWithEmailAndPassword的回调逻辑，补充错误捕获
   修正后的完整代码：

import { NgZone } from '@angular/core';
// 其余导入逻辑省略

constructor(
  private afAuth: AngularFireAuth,
  private router: Router,
  private ngZone: NgZone
) {}

onSubmit(formData) {
  this.submitted = true;
  const email = formData.value.email;
  const password = formData.value.password;
  if (this.loginForm.invalid) {
    return;
  } 
  this.afAuth.signInWithEmailAndPassword(email, password)
    .then(() => {
      // 包裹在ngZone.run内确保触发Angular变更检测
      this.ngZone.run(() => {
        this.router.navigate(['/dashboard']);
      })
    })
    .catch(error => {
      // 可根据业务需求替换为用户端弹窗提示
      console.error('登录失败：', error);
    })
}

方案2：监听authState触发跳转 #

如果存在路由守卫状态不同步的问题，可以改为监听Firebase Auth的登录状态变更后再执行跳转，避免状态时序问题：

// 登录状态监听建议放在ngOnInit生命周期中，避免重复订阅
ngOnInit() {
  this.afAuth.authState.subscribe(user => {
    if (user) {
      this.ngZone.run(() => {
        this.router.navigate(['/dashboard']);
      })
    }
  })
}

onSubmit(formData) {
  this.submitted = true;
  const email = formData.value.email;
  const password = formData.value.password;
  if (this.loginForm.invalid) {
    return;
  } 
  this.afAuth.signInWithEmailAndPassword(email, password)
    .catch(error => {
      console.error('登录失败：', error);
    })
}

内容的提问来源于stack exchange，提问作者Kossam Lennon Kafesu