在 Angular 中使用守卫的更好方法

【问题标题】：Better way to use guards in Angular在 Angular 中使用守卫的更好方法
【发布时间】：2021-06-28 15:47:49
【问题描述】：

我想知道在 Angular 中使用“守卫”来了解用户是否登录的最佳方式是什么。现在我在询问令牌是否在存储中。我的问题是我是否可以在我的 API 中创建一个端点来发出请求，如果用户通过身份验证，它就会回答。

这是我的代码：

canActivate(): Promise<boolean> {
    return new Promise(resolve => {
      this.storageService
        .get(AuthConstants.AUTH)
        .then(res => {
          if (res) {
            resolve(true);
          } else {
            this.router.navigate(['login']);
            resolve(false);
          }
        })
        .catch(err => {
          resolve(false);
        });
    });
  }

【问题讨论】：

标签： angular typescript ionic-framework frontend

【解决方案1】：

这似乎是一种非常晦涩的方法。首先，您当前的代码可能看起来像这样，具有相同的功能，但提高了可读性：

canActivate(): Observable<boolean | UrlTree> {
  return from(this.storageService.get(AuthConstants.Auth)).pipe(
    tap((res) => res || throwError()),
    catchError(() => this.router.createUrlTree(['login']))
  );
}

这种方式重定向由角度保护处理程序处理。您可以调用任何您想要的 API，而不是调用 this.storageService.get(AuthConstants.Auth)。只要确保你返回的是一个实际完成的Observable（或一个Promise，这个“总是”完成）

【讨论】：