NativeScript Route Für Firebase einrichten Anmelden

Question

Ich möchte die Firebase-Authentifizierung in einer NativeScript-App einrichten und es fällt mir schwer, die beste Vorgehensweise zum Einrichten der Routen/Komponenten herauszufinden.

Was ich tun möchte, ist es wie eine typische moderne App einrichten, wo, wenn der Benutzer nicht angemeldet ist, sie dann auf die Anmeldeseite umgeleitet werden. Wenn sie eingeloggt sind, überspringen sie die Anmeldeseite und werden zu ihrem Dashboard weitergeleitet.

Ich habe ein user.service wie diese

import { Injectable } from '@angular/core'; 
import { RouterExtensions } from 'nativescript-angular/router'; 
import firebase = require("nativescript-plugin-firebase"); 

@Injectable() 
export class UserService { 

    private uid; 
    private route; 

    constructor(router: RouterExtensions){ 
    this.route = router; 
    } 

    public initFirebase(){ //This gets called from AppComponent Constructor 
     let that = this; 
     firebase.init({ 

      onAuthStateChanged: function(data) { 

       if (data.loggedIn) { 
        that.route.navigate(["/dash"]); 
       } else { 
        console.log("NOT logged in.. redirecting to login"); 
        that.route.navigate(["/login"]); 
       } 
      } 
     }).then(
      (instance) => { 
       console.log("Firebase Initialized"); 
     }, 
      (error) => { 
       console.log("firebase.init error: " + error); 
     } 
     ); 

    } 

Und in dem Router, was ich zur Zeit eingerichtet haben ist

export const routes = [ 
    { path: "", component: LoginComponent }, 
    { path: "dash", component: DashComponent}, 
    { path: "login", component: LoginComponent} 
]; 

Aber das blinkt die Login-Seite, bevor es den Strich leitet die ist furchtbar.

Ich habe auch versucht, dies zu tun ..

export const routes = [ 
    { path: "", component: AppComponent }, 
    { path: "dash", component: DashComponent}, 
    { path: "login", component: LoginComponent}, 
]; 

Aber dies Grund macht Firebase zweimal initialisieren.

SO schließlich habe ich versucht, dieses ..

export const routes = [ 
    { path: "", component: DashComponent}, 
    { path: "dash", component: DashComponent}, 
    { path: "login", component: LoginComponent}, 
]; 

Aber dies wird mit der DashComponent Konstruktor, bevor ich es will. Ich möchte Firebase-Init in User.Service ausführen FIRST und dann DashComponent ausführen, nachdem der Benutzer Service Firebase Init abgeschlossen und umgeleitet zu Bindestrich.

Was ist die beste Praxis, um dies zu lösen?

Answer 1

Sie könnten einen Wachdienst verwenden, die der Benutzer überprüft, ob in wie protokolliert:

Das CanActive von "@angular/router" umsetzt.

Dort können Sie überprüfen, ob ein Benutzer über einen Dienst angemeldet ist und ihn an that.route.navigate(["/login"]); umleiten, wenn er nicht ist.

import { Injectable } from "@angular/core"; 
import { Observable } from 'rxjs/Observable'; 

import { CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot } from "@angular/router"; 
import { RouterExtensions, PageRoute } from "nativescript-angular/router"; 
import { UserService } from "./user.service"; 

@Injectable() 
export class AuthGuardService implements CanActivate { 

private userService: UserService; 
private router: RouterExtensions; 

public constructor(userService: UserService, 
    router: RouterExtensions) { 
    this.router = router; 
    this.userService = userService; 
} 

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    if(!userService.IsAuthenticated()){ 
     that.route.navigate(["/login"]) 
    } 
    return this.userService.IsAuthenticated(); 
} 

Ich weiß, es ist ein bisschen spät, aber es könnte jemandem helfen.