Angular 4 w/AngularFire 2 및 Auth Guard

Question

로그인 전 및 로그인 후 섹션이있는 간단한 앱을 만들기 시작했습니다. 저는 FireBase (AngularFire2 포함)를 인증 제공자로 사용하고 있으며 인증 가드 서비스에서 canActivate()을 사용하여 로그인 후 페이지를 "보호"하고 싶습니다.

내 문제는 각 코드 조각의 순서 나 배치를 모른다는 것입니다. 나는 내가 다음 무엇을 단순화했습니다 :

는

constructor(private auth: Authentication) { 
    this.auth.subscribe(); 
} 

authentication.ts에게

export class Authentication { 

    state: Observable<firebase.User>; 
    user: any; 
    isLoggedIn: boolean; 

    constructor(private afAuth: AngularFireAuth, private router: Router) { 
     this.state = afAuth.authState; 
    } 

    subscribe() { 
     this.state.subscribe((auth) => { 
      if(auth) { 
       this.user = auth; 
       console.log(this.user); 
       this.isLoggedIn = true; 
       return true; 
      } else { 
       this.isLoggedIn = false; 
       return false; 
      } 
     }); 
    } 

    login() { 
     this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); 
    } 

    logout() { 
     this.afAuth.auth.signOut(); 
    } 
} 

인증-guard.service.ts

export class AuthGuard implements CanActivate { 

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     let url: string = state.url; 
     return this.checkLogin(url); 
    } 

    checkLogin(url: string): boolean { 
     if(this.auth.isLoggedIn) { 
      console.log("Can Activate True"); 
      return true; 
     } else { 
      console.log("Can Activate False"); 
      return false; 
     } 
    } 
} 

오른쪽 app.component.ts 이제는 꽤 효과가 있습니다. 내가 처음 시작할 때 화면 맨 위에있는 모든 링크, 로그인 및 로그 아웃 버튼이있는 화면이 표시됩니다. 화면 상단의 링크를 클릭하면 console.log에 "Can Activate False"라는 메시지가 표시됩니다. 아직 로그인하지 않았습니다.

로그인하면 링크를 다시 시도하면 "활성화 할 수 있음"이라는 메시지도 표시됩니다.

내가 다시 로그 아웃하고 새로 고침을하지 않으면 위의 링크를 클릭하려고하는데 console.log가 다시 표시되지 않습니다.

내 구독 또는 일반적으로 모든 항목에 문제가있는 것 같습니다. 나는 무엇을 잘못 할 수 있 었는가?

Answer 1

이 시도 :

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
    return this.af.authState.map(auth => { 
    if (isNullOrUndefined(auth)) { 
     this.router.navigate(['/login']); 
     return false; 
    } else { 
     return true; 
    } 
    }); 
} 

그것은 훨씬 더 쉽습니다. 동기화 및 동기화와 관련된 문제가 없습니다.