각도 2 AuthGuard + Firebase Auth

Question

Firebase Auth를 사용하여 각도 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 값을 반환합니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

는 편집 :

는 관측을 반환 AuthGuard을 변경.

로그인으로 리디렉션되지 않으므로 작동합니다.하지만 대상 AuthGuarded Component는 렌더링되지 않습니다.

내 app.routes와 관련이 있는지 확실하지 않습니다. 해당 부분의 코드는 다음과 같습니다.

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

export const routing = RouterModule.forRoot(routes); 

Answer 1

.take (1)을 사용하여 관찰 가능 정보를 완성하여 구성 요소를 렌더링합니다. 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를 가져올 것을 잊지 마십시오.