在设置Root Page Ionic之前检查Auth

Posted 2021-04-17

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

答案

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

代替

export class MyApp {
  rootPage = FirstRunPage;
...

写

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

另一答案

您应该使用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
      }
    });
}

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