AngularJS와 RxJS canActivate가있는 제목 두통

Question

firebase를 사용하는 AngularJS2 프로젝트의 예제가 있습니다. authService는 isAuthenticatedated 메서드를 사용하여 subject.asObserveable을 반환합니다. 가입과 헤더 성분 생성자

• 그리고 canActivate()에서 처음으로 라우터 가드 가변

• 으로 리턴 값을 전달한다 :

  있어서 두 번 호출한다. 예제 프로젝트가 예상대로 작동합니다.

나는 내 자신의 물건과 FirebaseAPI없이 reworte과 헤더 구성 요소에서 예상대로 작동하지만, 라우터 가드에 난 항상 다시 빈 개체를 가져옵니다. 예제 프로젝트에서와 같이 사용하면 라우터가 작동을 멈추게되어 어떤 일이 일어나는지 알기 위해 수정했습니다. 이는 authService에서 코드입니다 :

isAuthenticated() { 
const state = new Subject<boolean>(); 
state.subscribe(x => console.log('Subject start: ' + x)); 
this.localStorageService.observe('myToken') 
    .subscribe((newToken: MyToken) => { 
    console.log('localStorageCheck: ' + JSON.stringify(newToken)); 
    if ((newToken !== null) && (newToken.token !== '')) { 
     state.next(true); 
    } else { 
     state.next(false); 
    } 
    console.log('state changed'); 
    }); 
state.subscribe(x => console.log('Subject subscribe: ' + x)); 
return state.asObservable(); 

}

이는 일 가드의 코드입니다 :

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
let pass: boolean = false; 
const val = this.authService.isAuthenticated().first(); 
val.subscribe((x:boolean) => { 
    console.log('Guard says: ' + x); 
    pass = x; 
}); 
// return val; 
return pass; 

}

예제 프로젝트 단지가이를 반환 .authService.isAuthenticated(). first(); 나는 논리에서 어떤 차이점을 볼 수없고, 이해하기를 원한다. 여기서 내가 놓치고있는 것이있다.

감사합니다.

ps. 또한 가드와 함께 작업 코드는 다음과 같습니다 : 나는 관찰 할 수있는 더 많은 테스트 후

isAuthenticated() { 
const state = new Subject<boolean>(); 
firebase.auth().onAuthStateChanged(function(user) { 
    if (user) { 
    state.next(true); 
    } else { 
    state.next(false); 
    } 
}); 
return state.asObservable(); 

}

, 그 대상이 내 프로젝트에 업데이트되며,이 발생하지 않습니다 자마자 canActivate 실행 예제 프로젝트에서는 (비록 주제가 업데이트 되어도). 유일한 차이점은 예제가 Firebase의 옵저버를 사용하고 ng2-webstorage의 옵저버를 사용한다는 것입니다. 물론 canActivate 밖에있는 private var를 설정하여이 문제를 해결할 수 있습니다.

나는이 다른 bahaviour에 대한 이유를 이해하고 싶습니다. 누군가가 나를 elenen 수 있기를 바랍니다, 감사합니다.

Answer 1

당신은 canActivate 방법에 부울하지만 관찰 가능한 또는 약속뿐만 아니라 반환 할 수 있습니다

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
    return this.authService.isUserAuthenticated.isAuthenticated(); 
}