您如何使用 AngularFire2 进行路由保护等待身份验证检查答案

【问题标题】：How do you make a route guard with AngularFire2 wait for auth check您如何使用 AngularFire2 进行路由保护等待身份验证检查
【发布时间】：2017-03-15 03:06:33
【问题描述】：

我希望我的身份验证守卫等到我从 firebase 取回身份验证后再重新路由我。目前，auth Guard 检查首先启动。

我需要在 canActivate 中使其异步，或者只在调用后填充 canActivate。

auth.guard.ts

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

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService) { 
        console.log(this.authService.isAuthenticated); // returns false, doesn't async
    }

  canActivate() {
      console.log(this.authService.isAuthenticated); // returns false
      return this.authService.isAuthenticated;
  }
}

auth.service.ts

...
import { AngularFire, 
    AuthProviders, 
    AuthMethods, 
    FirebaseListObservable, 
    FirebaseObjectObservable } from 'angularfire2';
...

@Injectable()
export class AuthService {
    isAuthenticated: boolean = false; 
    // the problem is setting it to a bool, need to async it (( but this was from official documentation and Pluralsight tuts__

    constructor(
        public af: AngularFire, 
        private _router: Router, 
        private _route: ActivatedRoute ) { 
           this.af.auth.subscribe((auth)=>{

               console.log('called after after auth guard');

               if (auth == null) {
                   this._router.navigate(['/login']);
               } else {
                   this.isAuthenticated = true;
               }
           }
       });
   }

那么如何让 AuthGuard 的 canActivate 等待异步布尔值？

我如何将它传递给 AuthGuard 的 canActivate() 函数？

【问题讨论】：

标签： angular angularfire2

【解决方案1】：

这是在 Github 上的 this 问题帖子中的答案。

auth.service.ts：

@Injectable()
export class AuthService {

  private _user: firebase.User;

  constructor(public afAuth: AngularFireAuth, private db: AngularFireDatabase) {
    afAuth.authState.subscribe(user => this.user = user);  
  }

  get user(): firebase.User {
    return this._user;
  }

  set user(value: firebase.User) {
    this._user = value;
  }

  get authenticated(): boolean {
    return this._user !== null;
  }
}

auth.guard.ts：

@Injectable()
export class AuthGuard implements CanActivate {

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.auth.afAuth.authState
            .take(1)
            .map(authState => !!authState)
            .do(authenticated => {
              if (!authenticated) {
                  this.router.navigate(['login']);
              }
            });
  }
}

【讨论】：