Question

我是AngularFire和Ionic的新手。我按照this tutorial将Firebase Auth添加到我的离子项目中。

HomePage是根页面。它检查authState以确定用户是否已登录。如果没有，它会重定向到LoginPage。成功登录后，它再次将HomePage设置为root。它没有按预期工作。

以下是来自控制台的日志：

Not logged in. Navigating to login page.
login.ts:27 ionViewDidLoad LoginPage
home.ts:22 User logged in. UID: taiNC6n64BP4gD8jTcnXUu53npc2
home.ts:22 User logged in. UID: taiNC6n64BP4gD8jTcnXUu53npc2
2home.ts:27 Not logged in. Navigating to login page.
login.ts:27 ionViewDidLoad LoginPage
login.ts:27 ionViewDidLoad LoginPage

主页上的相关代码：

constructor(private afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
    this.afAuth.authState.subscribe(res => {
        if (res && res.uid) {
            console.log("User logged in. UID: " + res.uid);
            //Do nothing
        } else {
            //Push them to the login page
            console.log("Not logged in. Navigating to login page.");
            this.navCtrl.setRoot('LoginPage');
        }
    });
}

登录页面的代码：

async login(user: User){
    try {
        const result = await this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password);
        if (result) {
            this.navCtrl.setRoot('HomePage');
        }  
    }
    catch (e) {
        console.error(e);
    }
}

从日志中可以看出，它正确显示用户在初始加载时从应用程序注销并重定向到登录页面。然后主页以root身份重置。 authStat.subscribe被击中4次。而第二次用户不再可用。造成这种情况的原因是什么？如何使登录持久化？根据AngularFire文档，默认行为是持久登录。

- UPDATE -

我尝试了以下解决方案。现在我的日志看起来像这样：

ionViewDidLoad HomePage
app.component.ts:26 Not logged in.
login.ts:27 ionViewDidLoad LoginPage
app.component.ts:23 Logged in.
home.ts:24 ionViewDidLoad HomePage
home.ts:24 ionViewDidLoad HomePage
app.component.ts:26 Not logged in.
login.ts:27 ionViewDidLoad LoginPage

我的app.component.ts文件中的代码：

export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage:any = 'HomePage';

  constructor(private afAuth: AngularFireAuth, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      this.afAuth.auth.onAuthStateChanged(user => {
        if (user){
          console.log("Logged in.");
          this.nav.setRoot('HomePage');
        } else {
          console.log("Not logged in.");
          this.nav.setRoot('LoginPage');
        }
      });
    });
  }
}

Answer 1

这可能是由于可观察到的多个authstate订阅引起的。还要确保取消订阅onDestroy。

Answer 2

尝试检查项目的app.component.ts文件中的登录条件，然后首先将根页面设置为any。检查登录条件后，设置根页面。这是一个参考屏幕截图。

什么是导致AngularFire authState行为？

2 个答案: