Angular 2 AuthGuard + Firebase Auth

Question

私はFirebase Authを使用してAngle 2ルートのAuthGuardを構築しようとしています。

この

はAuthGuardサービスです：

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

そして、これは、ユーザのがログインし、そのコンストラクタでプロパティ「LOGGEDIN」に結果をバインドするかどうかを確認するのAuthServiceです。

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（）は、 'loggedIn'をtrueに変更するためにサブスクリプションがデータを受信しないため、常にfalse値を返します。

これを修正するにはどうすればよいですか？

EDIT：

は、観察を返すようにAuthGuardを変更しました。

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

あなたはログインにリダイレクトされないため、動作します...しかし、ターゲットのAuthGuarded Componentはレンダリングされません。

私のapp.routesと関係があるかどうかわかりません。

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

export const routing = RouterModule.forRoot(routes); 

Answer 1

は、（1）成分をレンダリングするために観察用い.takeを完了します。これは、一部のコードです。 AngularFireの新しいバージョンの

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

Answer 2

、あなたの代わりにauthStateを使用する必要があります。

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

    canActivate(): Observable<boolean> { 
    return this.afAuth.authState 
     .take(1) 
     .map(authState => !!authState) 
     .do(auth => !auth ? this.router.navigate(['/login']) : true); 
    } 
} 

がrxjs/add/operatorからtake、mapとdoをインポートすることを忘れないでください。