Angular 2 AuthGuard + Firebase 身份验证 [英] Angular 2 AuthGuard + Firebase Auth

问题描述

我正在尝试使用 Firebase Auth 为 Angular 2 路由构建一个 AuthGuard.

I'm trying to build an AuthGuard for Angular 2 routes using Firebase Auth.

这是 AuthGuard 服务:

This is the AuthGuard Service:

import { Injectable }             from '@angular/core';
import { CanActivate, Router,
         ActivatedRouteSnapshot,
         RouterStateSnapshot }    from '@angular/router';
import { AuthService }            from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private AuthService: AuthService, 
                private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.AuthService.loggedIn) { return true; }

    this.router.navigate(['login']);
    return false;
  }
}

这是 AuthService，它检查用户是否登录并将结果绑定到其构造函数中的属性loggedIn".

And this is the AuthService which checks if the user's logged in and binds the result to the property 'loggedIn' in its constructor.

import { Injectable } from '@angular/core';
import { AngularFire } from 'angularfire2';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {
loggedIn: boolean = false;

  constructor(
    public af: AngularFire,
    public router: Router) {
        af.auth.subscribe(user => {
            if(user){
                this.loggedIn = true;
            }
        });
    }
}

这里的问题显然是异步的.AuthGuard 的 canActivate() 总是返回一个 false 值，因为订阅没有及时收到数据来将 'loggedIn' 更改为 true.

The problem here is obviously asynchrony. AuthGuard's canActivate() always returns a false value because the subscription doesn't receive the data in time to change 'loggedIn' to true.

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

What's the best practice to fix this?

更改了 AuthGuard 以返回一个 observable.

Changed the AuthGuard to return an observable.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.af.auth.map((auth) => {
        if (!auth) {
          this.router.navigateByUrl('login');
          return false;
        }
        return true;
    });
  }

它有点工作，因为你没有被重定向到登录......但目标 AuthGuarded 组件没有呈现.

It kind of works since you don't get redirected to login... But the target AuthGuarded Component is not rendered.

不确定是否与我的 app.routes 有关.这是该部分的代码:

Not sure if it has to do with my app.routes. This is the code for that part:

const routes: Routes = [
  { path: '', component: MainComponent, canActivate: [AuthGuard] },
  ...
];

export const routing = RouterModule.forRoot(routes);

推荐答案

使用 .take(1) 完成 observable 使组件呈现.

Complete the observable using .take(1) to make the component render.

import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.af.auth.map((auth) => {
        if (!auth) {
          this.router.navigateByUrl('login');
          return false;
        }
        return true;
    }).take(1);
  }

这篇关于Angular 2 AuthGuard + Firebase 身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！