Ionic中Firebase onAuthStateChanged需点击表单才触发的问题

看起来你遇到的核心问题是Firebase的认证状态变更回调没有触发Angular的变更检测，再加上监听器的订阅管理有误，导致页面不会自动跳转，必须手动触发交互才会更新。我来帮你一步步修复：

问题根源拆解 #

1. 变更检测失效：Firebase的onAuthStateChanged回调是在Angular的变更检测Zone之外执行的，所以你修改rootPage后，Angular根本没察觉到这个变化，只有点击页面触发手动变更检测时才会生效。
2. 过早取消订阅：你在每次状态变更后立刻调用unsubscribe()，这会让监听器只执行一次——用户第一次登录后，监听器就被销毁了，后续登出再登录的状态变更都不会被响应。

具体修复步骤 #

1. 用NgZone包裹认证回调，触发Angular变更检测 #

修改app.component.ts，注入NgZone并把状态变更逻辑放到Zone内，同时正确管理订阅：

import { Component, NgZone, OnDestroy } from '@angular/core';
// 保留你的其他导入

@Component({
  templateUrl: 'app.html'
})
export class MyApp implements OnDestroy {
  rootPage: any = 'LoginPage';
  private authListener: any; // 保存订阅引用，用于销毁时取消

  constructor(
    platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    private ngZone: NgZone // 注入NgZone
  ) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });

    // 正确监听认证状态变更，不要立刻取消订阅
    this.authListener = firebase.auth().onAuthStateChanged(user => {
      // 用ngZone.run把逻辑包裹到Angular的变更检测周期内
      this.ngZone.run(() => {
        if (!user) {
          console.log('User auth state changed. Redirect to login.');
          this.rootPage = 'LoginPage';
        } else {
          console.log('User auth state changed. Redirect to home.');
          this.rootPage = 'HomePage';
        }
      });
    });
  }

  // 组件销毁时取消监听，避免内存泄漏
  ngOnDestroy() {
    if (this.authListener) {
      this.authListener();
    }
  }
}

2. 修正auth.ts中的Promise链问题 #

你的signInWithFacebook在Cordova环境下没有正确返回Firebase认证的Promise，导致login.ts可能在认证完成前就执行setRoot。修改如下：

signInWithFacebook(): Promise<any> { 
  if (this.platform.is('cordova')) { 
    return this.facebook.login(['email']).then(res => { 
      const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken); 
      // 返回Firebase认证的Promise，让上层能正确等待认证完成
      return firebase.auth().signInWithCredential(facebookCredential)
        .then((success) => { 
          console.log("Firebase success: " + JSON.stringify(success)); 
          return success;
        })
        .catch((error) => { 
          console.log("Firebase failure: " + JSON.stringify(error)); 
          throw error; // 抛出错误让上层捕获
        }); 
    }); 
  } else { 
    return firebase.auth().signInWithRedirect(new firebase.auth.FacebookAuthProvider()) 
  } 
}

3. 可选：移除login.ts中的冗余跳转逻辑 #

既然已经在app.component中统一处理状态跳转，login.ts里的setRoot就没必要了，反而可能导致冲突：

facebookLogin() { 
  this.authData.signInWithFacebook().then(res => { 
    // 这里不需要再手动跳转，app.component会自动处理
  }, error => { 
    let alert = this.alertCtrl.create({ 
      message: error.message || error, 
      buttons: [ { text: "Ok", role: 'cancel' } ] 
    }); 
    alert.present(); 
  }); 
}

修复后的效果 #

修改完成后，当Facebook登录完成，Firebase的状态变更会立刻触发app.component的逻辑，ngZone.run会强制Angular执行变更检测，页面会自动跳转到HomePage，不需要再点击屏幕触发了。

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