Question

我正在创建一个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';

Answer 1

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

不要试图在app.component.ts文件中运行auth逻辑，而是创建一个页面，该页面将运行此逻辑并在准备就绪时重定向，如：

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

该页面可能只是一个加载动画，或者向用户显示某些内容正在后台处理的内容。

Answer 2

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

而不是

export class MyApp {
  rootPage = FirstRunPage;
...

写

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

在设置Root Page Ionic之前检查Auth

2 个答案: