数秒間ログインするとAngular Nativescriptルータが間違ったページを表示します

Question

ネイティブスクリプトの角度アプリで作業しています。ユーザーがアプリケーションにログインすると、firebaseからユーザーを認証し、ユーザーが登録プロセスを完了したかどうかを確認します。そうでない場合、アプリケーションは登録ページにユーザをナビゲートし、そうでなければユーザをメインページに送る。

ユーザーに登録ログを完了していないユーザーがメインページに1〜2秒間瞬間的に移動してから、登録ページにリダイレクトされるとわかります。 なぜこのようなことが起こり、どのように修正できるのかに関するご意見

（登録していないユーザーが、メインページに数秒間行かずに直接登録ページに来ることをお勧めします）私はnativescript-plugin-firebaseを認証に使用しています。次のように

私のコードは次のとおりです。

app.routing.ts

import {LoginComponent} from "./login/login.component" 
import { RegistrationComponent } from "./registration/registration.component" 
import {MainComponent, MainTabComponent,TabComponent} from   "./shared/maintab/maintab.component" 
import {AuthGuard} from "./services/auth-guard.service" 

export const AppRoutes:any =[ 
    { path: "login", component:LoginComponent }, 
    { path: "registration", component:RegistrationComponent}, 
    { path:"main", component:MainComponent,canActivate:[AuthGuard], 
     children: [ 
      { path: "tab/0", component: UserFeedExampleComponent }, 
      { path: "tab/1", component: TabComponent }, 
      { path: "", redirectTo: "tab/0", pathMatch: "full" } 
     ] 
    }, 
    { path: "", redirectTo: "login", pathMatch: "full" } 
]; 

export const AppComponents: any = [ 
    MainTabComponent, 
    MainComponent, 
    TabComponent, 
    LoginComponent, 
    RegistrationComponent 
]; 

login.component.ts

import { Component, OnInit, Input } from "@angular/core"; 
import { Page } from "ui/page"; 
import { Router, NavigationExtras } from "@angular/router"; 
import { RouterExtensions } from 'nativescript-angular/router/router-extensions'; 
import firebase = require("nativescript-plugin-firebase"); 
import { FirebaseAuthService } from '../services/firebase-auth.service'; 
import { User } from '../models/user.model'; 


@Component({ 
    moduleId: module.id, 
    selector: "app-login", 
    templateUrl: "./login.component.html", 
    // changeDetection: ChangeDetectionStrategy.OnPush 
}) 

export class LoginComponent { 
    user: User; 
    isLoggingIn = true; 
    isRegistering = false; 
    isAuthenticating = false; 
    firstname: string; 
    lastname: string; 


    constructor(private firebaseAuthService: FirebaseAuthService, 
     private routerExtensions: RouterExtensions, 
     private router: Router, 
     private page: Page 
    ) { 
     page.actionBarHidden = true; 
     this.user = new User("", ""); 
     this.firstname = ""; 
     this.lastname = ""; 
    } 


    submit() { 
     this.isAuthenticating = true; 
     if (!this.isLoggingIn && !this.isRegistering) { 
      this.login(); 
     } else { 
      this.signUp(); 
     } 
    } 

    login() { 
     this.firebaseAuthService.login(this.user) 
      .then(() => { 
       this.isAuthenticating = false; 
       this.checkUserRegistration(this.user); 
      }) 
      .catch((message: any) => { 
       this.isAuthenticating = false; 
      }); 
    } 

    public onGoogleLoginTap() { 
     var self = this; 
     firebase.login({ 
      type: firebase.LoginType.GOOGLE 
     }).then((result) => { 

      self.saveUsertoDatabase(); 
      self.checkUserRegistration(result); 

     }), 
      function (errorMessage) { 
       console.log(errorMessage); 
      } 
     console.log("login with google"); 
    }; 

    saveUsertoDatabase() { 
     var self = this; 
     firebase.getCurrentUser().then((user) => { 
      firebase.update('/trial/' + user.uid, { 
       email: user.email 
      }).then(
       function (result) { 
        console.log("User uid: " + user.uid + "User email: " + user.email); 
       } 
       ); 
     }, (error) => { 
      alert("Unable to get User: " + error); 
     }); 
    } 

    checkUserRegistration(result) { 
     var self = this; 
     var onQueryEvent = function (result) { 
      if (!result.error) { 
       if (!result.hasOwnProperty('registrationComplete')) { 
        self.goToRegistrationPage(self.user); 
       } 
       else { 
        self.gotoFeedPage(); 
       } 
      } 
     }; 

     firebase.query(
      onQueryEvent, 
      ("/trial/" + result.uid), 
      { 
       singleEvent: true, 
       orderBy: { 
        type: firebase.QueryOrderByType.CHILD, 
        value: 'registrationComplete' 
       }, 
      } 
     ); 
    } 


    goToRegistrationPage(user) { 
     let navigationExtras: NavigationExtras = { 
      queryParams: { 
       registeredUser: JSON.stringify({ user }) 
      } 
     }; 
     console.log("selected user is " + JSON.stringify({ user })); 
     this.router.navigate(["registration"], navigationExtras); 
    } 

    toggleDisplay() { 
     this.isLoggingIn = !this.isLoggingIn; 
    } 

    toggleRegistration() { 
     this.isRegistering = !this.isRegistering; 
    } 

    gotoFeedPage() { 
     this.routerExtensions.navigate(["/main/tab/0"], { clearHistory: true }); 
    } 


    logout() { 
     this.firebaseAuthService.logout(); 
     console.log("Logged out") 
     this.routerExtensions.navigate(["/login"], { clearHistory: true }); 
    } 
} 

次のようにプラットフォームに関するその他の詳細は、次のとおりです。

tns 2.5.0 angular-cli：1.0.0-beta.18 n ode：6.9.5 os：win32 x64

Answer 1

AuthGuard（あなたの認証ガード）があなたのために登録チェックをして戻ってくれるように思えます。 AuthGuardは、チェックが非同期である状況でルータが待機する観測可能性または約束を返すことができます。そのため、ガードは、あなたが航行を許可するかどうかを確認できるようになるまで、航海を遅らせるために、観測可能か約束を返すことが許可されています。

編集：

ユーザーが一時的にログインページを見ている理由として、あなたの特定の質問に答えるために - あなたのロジックに従うならば、利用者が登録されているかどうかを確認するためにあなたのチェックがFirebaseへの非同期要求でありますAPI。非同期であるため、checkRegistration関数を呼び出した後、実行が続けられ、ユーザーはあなたのアプリにルーティングされます。 Firebase APIが結果を返すだけで、登録ページへのナビゲーションが行われます。

あなたはすべての小切手を完了するまでナビゲーションを遅らせることを望んでいないので、すべての小切手をナビゲーションガードに追加することをお勧めします。ナビゲーションガードが非同期の結果（約束または観測可能）を返す場合、ルータはナビゲートする前に非同期結果が完了するまで待機します。