在设置根页面离子之前检查身份验证答案

【问题标题】：Checking Auth before setting Root Page Ionic在设置根页面离子之前检查身份验证
【发布时间】：2018-08-12 14:03:49
【问题描述】：

我正在创建一个 Ionic 应用并实现了 Firebase 登录。登录一切正常，但是我想在加载初始根页面之前检查用户是否已登录。

如果他们没有登录，它应该显示教程，如果他们是，它应该显示主标签视图。

目前路由页面的设置有效，但是你总是首先看到教程页面，无论在启动的哪个位置我放置验证码 - 如果登录，它会显示 1-2 秒，然后重定向。如何确保在显示任何内容之前进行检查？

    import { Component, ViewChild } from '@angular/core';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { TranslateService } from '@ngx-translate/core';
import { Config, Nav, Platform } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';


import { FirstRunPage, MainPage } from '../pages/pages';
import { Settings } from '../providers/providers';
import { HostelMainPage } from '../pages/hostel-main/hostel-main';



@Component({
  template: `<ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>

  </ion-menu>
  <ion-nav #content [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = FirstRunPage;
  isAuthenticated: boolean =  false;

  @ViewChild(Nav) nav: Nav;

  pages: any[] = [
    { title: 'Tutorial', component: 'TutorialPage' },
    { title: 'Profile', component: 'ProfilePage'}
  ]

  constructor(private translate: TranslateService, 
              platform: Platform, 
              settings: Settings, 
              private config: Config, 
              private statusBar: StatusBar, 
              private splashScreen: SplashScreen,
              private fbAuth : AngularFireAuth) {
    platform.ready().then(() => {
      this.CheckAuth();
    })
    .then(() => {
      console.log('loading');
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    this.initTranslate();
  }

  CheckAuth(){
    console.log('Auth Check');
    this.fbAuth.auth.onAuthStateChanged((user) => {
      if(user){
        this.isAuthenticated = true;
        this.rootPage = MainPage;
      } else {
        this.isAuthenticated = false;
        this.rootPage = FirstRunPage;
      }
    })
  }

即使在检查了先执行的代码之后，输出也显示执行是正确的。

Pages.ts

// The page the user lands on after opening the app and without a session
export const FirstRunPage = 'TutorialPage';

// The main page the user will see as they use the app over a long period of time.
// Change this if not using tabs
export const MainPage = 'TabsPage';

// The initial root pages for our tabs (remove if not using tabs)
export const QRTab = 'QRPage';
export const ProfileTab = 'ProfilePage';
export const HostelTab = 'HostelMainPage';

【问题讨论】：

标签： angular firebase ionic-framework firebase-authentication ionic3

【解决方案1】：

您应该使用Splash 页面来运行基本身份验证逻辑。这应该是您在 app.component 文件中的 ROOT 页面。

与其尝试在app.component.ts 文件中运行身份验证逻辑，不如创建一个页面，该页面将运行此逻辑并在准备好时重定向，例如；

ionViewDidLoad() {
  this.angularFireAuth.authState
    .first()
    .subscribe(auth => {
      if (auth) {
        // Redirect to logged in page
      } else {
        // Redirect to logged out page
      }
    });
}

页面可能只是一个加载动画或向用户显示后台正在处理的东西。

【讨论】：

【解决方案2】：

您可以通过不立即设置根页面来解决此问题。

代替

export class MyApp {
  rootPage = FirstRunPage;
...

写

export class MyApp {
  rootPage: any;
....

【讨论】：