如何等待onAuthStateChanged结果，判断用户登录状态后跳转首页？

一、解决isLoggedIn()返回null的问题 #

你遇到的核心问题是**onAuthStateChanged是异步操作**，当前的isLoggedIn()函数没有正确处理异步逻辑——它只是注册了一个回调，但没有返回任何值，导致你直接调用console.log(this.fireauth.isLoggedIn())时，会拿到undefined（也就是你看到的null类结果）。

修复方案：将isLoggedIn()改为返回Promise #

修改fireauth-services.ts中的isLoggedIn方法，用Promise包裹异步回调，让组件可以等待Auth状态的结果：

isLoggedIn(): Promise<boolean> {
  return new Promise((resolve, reject) => {
    this.fireauth.auth.onAuthStateChanged(user => {
      if (user) {
        console.log(user);
        resolve(true); // 用户已登录，返回true
      } else {
        console.log('用户未登录');
        resolve(false); // 用户未登录，返回false
      }
    }, error => {
      reject(error); // 处理Auth状态监听的错误
    });
  });
}

在app.component.ts中等待异步结果 #

然后在initializeApp里通过async/await或者.then()来等待结果，确保拿到登录状态后再设置根页面：

async initializeApp() {
  await this.platform.ready();
  this.statusBar.styleDefault();
  this.splashScreen.hide();

  // 等待登录状态判断完成
  const isLoggedIn = await this.fireauth.isLoggedIn();
  console.log('当前登录状态：', isLoggedIn);
  // 根据状态设置初始页面
  this.rootPage = isLoggedIn ? HomePage : LoginPage;
}

这样就能避免因为异步操作未完成就设置页面的问题，确保用户状态确认后再跳转。

二、在fireauth-services.ts中使用NavCtrl跳转页面 #

当然可以在Service中实现页面跳转，不过要注意正确注入导航实例，这里提供两种方案：

方案1：直接注入NavController #

修改fireauth-services.ts的构造函数，注入NavController，之后就可以调用setRoot方法：

import { NavController } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';
// ...其他导入

@Injectable()
export class FireauthServices {
  private user: firebase.User;

  constructor(
    public http: HttpClient, 
    public fireauth: AngularFireAuth,
    private navCtrl: NavController // 注入NavController
  ) {
    fireauth.authState.subscribe(user => {
      this.user = user;
      // 示例：登录状态变化时自动跳转到首页
      if (user) {
        this.navCtrl.setRoot(HomePage);
      }
    });
    console.log('Hello FireauthServiceProvider Provider');
  }

  // ...其他方法
}

方案2：用App获取当前导航实例（避免注入报错） #

如果直接注入NavController时出现找不到实例的错误，可以改用App来获取当前活动的导航：

import { App } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';
// ...其他导入

@Injectable()
export class FireauthServices {
  private user: firebase.User;

  constructor(
    public http: HttpClient, 
    public fireauth: AngularFireAuth,
    private app: App // 注入App
  ) {
    fireauth.authState.subscribe(user => {
      this.user = user;
      if (user) {
        const activeNav = this.app.getActiveNav();
        activeNav.setRoot(HomePage);
      }
    });
  }

  // ...其他方法
}

最佳实践建议 #

不过更符合Angular/Ionic设计思想的方式是让Service专注于业务逻辑，页面跳转交给组件处理。比如用Events发布登录状态变化，组件订阅后执行跳转：

// fireauth-services.ts中
import { Events } from 'ionic-angular';

constructor(private events: Events) {
  fireauth.authState.subscribe(user => {
    this.user = user;
    this.events.publish('user:statusChanged', user); // 发布状态变化事件
  });
}

// app.component.ts中
constructor(private events: Events) {
  this.events.subscribe('user:statusChanged', (user) => {
    if (user) {
      this.nav.setRoot(HomePage); // 组件中处理跳转
    }
  });
}

这种方式能让代码职责更清晰，后续维护也更方便~

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