設置Firebase登錄的NativeScript路由

我正在尋找在NativeScript應用上設置Firebase身份驗證，我很難搞清楚設置路由/組件的最佳做法。設置Firebase登錄的NativeScript路由

我喜歡做的就是像任何典型的現代應用程序那樣設置它，如果用戶沒有登錄，那麼他們被重定向到登錄頁面。如果已經登錄，那麼他們跳過登錄頁面並被重定向到他們的儀表板。

我有這樣

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); 
     } 
     ); 

    }

而在我目前已經設置了路由器user.service是

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

但它重定向到破折號之前閃爍登錄網頁，其中是可怕的。

我也試着做..

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

但這種理性使火力地堡初始化兩次。

所以最後我想這個..

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

但這運行DashComponent構造之前，我想它。我想讓user.service中的firebase init運行FIRST，然後在用戶服務firebase init完成並重定向到破折號後運行DashComponent。

解決此問題的最佳做法是什麼？

來源

2016-09-28 ZeroNine

你可以使用，如果用戶在諸如記錄與驗證保護服務：

將從"@angular/router"實施CanActive。

在那裏，您可以驗證用戶是否通過服務登錄並將他重定向到that.route.navigate(["/login"]);（如果他不是）。

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(); 
}

我知道這有點晚了，但它可能有助於某人。

來源

2017-04-07 23:40:01

設置Firebase登錄的NativeScript路由

回答

相關問題