AuthGuard 在检查用户之前不会等待身份验证完成

Question

我在这里阅读了指南：https://angular.io/docs/ts/latest/guide/router.html

看起来很简单，但是，我不确定如何在身份验证保护 (canActivate) 中使用 angularfire2 的身份验证。我试过的是：

AuthService

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

@Injectable()
export class AuthService {

  private user: any;

  constructor(private af: AngularFire) {
    this.af.auth.subscribe(user => {
      this.user = user;
    })
  }

  get authenticated(): boolean {
    return this.user ? true : false;
  }

}

AuthGuard

@Injectable()
export class AuthGuard implements CanActivate {

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

  canActivate(): Observable<boolean> | boolean {
    if (this.authService.authenticated)
      return true;

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

}

我还向引导提供程序添加了 AuthService。

这种工作正常，但是，我的主要问题是当我刷新（或最初加载）具有AuthGuard 的页面时，它总是将我重定向到登录页面，因为AuthGuard 不等待身份验证响应。有没有办法等待身份验证完成（即使它失败）并然后检查用户是否通过身份验证？

Answer 1

问题在于您的代码。在 AuthGuard 中，您检查 authenticated() 方法的结果，该方法很可能返回 false，因为用户属性仍未设置。试试这个：

AuthService：

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

@Injectable()
export class AuthService {

  private user: any;

  constructor(private af: AngularFire) { }
  setUser(user) { this.user = user; }
  getAuthenticated(): Observable<any> { return this.af.auth; }
}

AuthGuard：

@Injectable()
export class AuthGuard implements CanActivate {

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

  canActivate(): Observable<boolean> | boolean {
    // here check if this is first time call. If not return 
    // simple boolean based on user object from authService
    // otherwise:

    return this.authService.getAuthenticated.map(user => {
          this.authService.setUser(user);
          return user ? true : false;
    })

  } 
}

Answer 2

在某些版本的路由器中可能会有所不同，但我需要返回一个 完成的 observable。

import { CanActivate, Router } from '@angular/router'

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private af: AngularFire, private router: Router) { }

  canActivate(): Observable<boolean> {
    return this.af.auth.map(user => {
      if (user != null)
        return true
      this.router.navigate(['/login'])
    })
    .take(1) // To make the observable complete after the first emission
  }
}

Answer 3

AngularFire、RXJS 和 Firebase 的 2021 年更新

取自Baumi's answer

**AuthService**:
import { Injectable } from '@angular/core';

import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/';

import { Observable } from 'rxjs';
    
@Injectable()
export class AuthService {

    private user: firebase.default.User;

    constructor(private afAuth: AngularFire) { }

    setUser(user) { 
        this.user = user; 
    }
    
    getAuthenticated(): Observable<firebase.default.User> { 
        return this.afAuth.user; 
        }
}


**AuthGuard**:
import { map } from 'rxjs/operators';

@Injectable()
export class AuthGuard implements CanActivate {

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

    canActivate(): Observable<boolean> {
        // here check if this is first time call. If not return 
        // simple boolean based on user object from authService
        // otherwise:

        return this.authService.getAuthenticated().pipe(
            map(user => {
                this.authService.setUser(user);
                return user ? true : false;
            })
        )
    } 
}