使用 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();
}