使用 canActivate 的 Angular 和 RxJS 主題頭痛

Question

我得到了一個使用 firebase 的示例 Angular2 項目。 authService 使用帶有主題的 isAuthentificated 方法，該方法返回主題.asObserveable。

該方法被調用兩次：

• 在帶有 subscribe 的頭組件構造函數中，它將返回值傳遞給一個變量

• 在canActivate中使用first()的路由器守衛中。 示例項目按預期工作。

我在沒有 FirebaseAPI 的情況下用我自己的東西重寫了它，它在標頭組件中按預期工作，但在路由器保護中我總是得到一個空對象。 如果我按照示例項目中的方式使用它，路由器將停止工作，因此我對其進行了修改，看看會發生什么。 這是來自 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;

}

示例項目只有： return this.authService.isAuthenticated().first(); 我看不出邏輯上有任何不同，並想了解我在這里遺漏了什么。

謝謝

附： 與守衛一起工作的代碼如下所示：

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 之外設置一個私有變量來解決這個問題，這很有效。

我真的很想了解這種不同行為的原因。 希望有人能給我啟發，謝謝。

Answer 1

您不僅可以在 canActivate 方法中返回布爾值，還可以返回 Observable 或 Promise：

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