设置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路由

回答

相关问题