为什么Angular 2's CanActivate返回一个Observable<布尔值>而不是承诺

Why does Angular 2's CanActivate return an Observable<boolean> instead of a Promise?

本文关键字：布尔值 Observable 一个 承诺 Angular CanActivate 为什么 返回      更新时间：2023-09-26

CanActivate类允许使用Observable<boolean>返回类型。

唯一对我有意义的用例是:

  1. CanActivate可以"异步"阻止路由显示，直到observer.next(true|false)被调用。
  2. 我可以显示CanActivate允许的路由，然后从我的应用程序的另一部分推送observer.next(false)，并使该路由消失。

然而，第一点有效，第二点无效。因此，除了方便之外，我找不到CanActivate允许Observable<boolean>返回类型的理由——这反过来又使API变得复杂。如果CanActivate只允许boolean返回类型和Promise返回类型，会更简洁。

请注意，我对Angular、RxJS和所有基于Node的东西都是新手，所以我可能会错过一些显而易见的东西。我花了一段时间试图从CanActivate中提取Observer<boolean>返回类型所暗示的功能。

在AngularJS 2中，几乎每个异步操作都会返回Observable。因为你可以实现你自己的CanActivate，你可能想通过服务器访问来实现它。例如，检查服务器中的管理员凭据。您可以在这里看到类似的示例。

如果此方法返回布尔数据类型，则需要阻塞页面才能这样做。

它允许您执行一些异步进程。假设您有一个来自身份验证服务的currentUser可观察对象。这是一个ReplaySubscriber(1);，将始终返回当前登录的用户，但当你的应用程序第一次加载auth调用可能仍在处理，所以你不知道它是否完成。

CanActivate() {
  return this.currentUser.map(user => user && user.isActive());
}

在Angular 7中，canActivate可以返回Observable, Promise和简单的boolean，这也是HTTP调用的情况，所以你可以返回任何适合你的类型，对我来说，我使用它们两个如下:

Observable:

public getCats(): Observable<Cat[]> {
    return this.http.get<Cat[]>(this.catsUrl, this.getHttpOptions()).pipe(
      tap(_ => this.log('fetched cats')),
      catchError(this.handleError())
    );
  }

在canActivate的情况下，我使用Promise<boolean>和HTTP调用，如下所示:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    const currentUser = this.getCurrentUser();
    if (currentUser) {
        return this.http.post<any>(this.validateUserUrl, this.userData).toPromise().then(
            response => 
            {
                return true;
            }
        ).catch(
            error=>
            {
                this.logout()
                return false;
            }
        );
    }
    return new Promise<boolean>(()=> {return false;});
}
相关文章：