Question

我正在寻找在NativeScript应用上设置firebase身份验证，而我很难找到设置路由/组件的最佳做法。

我喜欢做的是像任何典型的现代应用程序一样设置它，如果用户没有登录，则会将它们重定向到登录页面。如果已登录，则会跳过登录页面并重定向到其仪表板。

我有像这样的user.service

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

    }

在路由器中我目前设置的是

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},
];

但这有理由使Firebase初始化两次。

所以最后我试了这个......

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

但是在我想要它之前运行DashComponent构造函数。我希望user.service中的firebase init运行FIRST，然后在用户服务firebase init完成后运行DashComponent并重定向到dash。

解决此问题的最佳做法是什么？

Answer 1

您可以使用保护服务来验证用户是否已登录，例如：

import { AuthGuardService } from "../../...."
    export const routes = [
        { path: "",  component: DashComponent},
        { path: "dash", component: DashComponent, canActivate:[AuthGuardService]},
        { path: "login", component: LoginComponent},
    ];

这将从"@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();
}

我知道这有点晚了，但它可能对某人有帮助。

NativeScript路由设置为Firebase登录

1 个答案: