时间戳

首页 > 解决方案 > 返回不能在 canActivate 中使用 Observable.toPromise()：Angular 4

angular - 返回不能在 canActivate 中使用 Observable.toPromise()：Angular 4

问题描述

我添加了一个路由保护来检查用户是否经过身份验证并且可以登录到应用程序。下面是一个代码片段，显示了如果用户通过身份验证，我如何处理 2 个不同的条件：

if (this.adal.user.isAuthenticated) {
  return true;
} else {
  this.adal.acquireToken(clientId).toPromise().then((data) => {
    console.log('Refreshed the token.');
    return(true);
  }).catch ((error) => {
     console.log('No user logged in.');
     this.router.navigate(['/login']);
     return(false);
  });
}

问题是当调用代码的 else 部分时，即调用 acquireToken() 时，它会返回一个我将其转换为承诺的可观察对象。更新令牌后，我将返回 true。但是，当这种情况发生时，我会看到一个空白页，就好像从未调用过“return true”。不知道为什么会这样，也许我使用 toPromise 方法的方式不正确。如果有人可以给我一点提示，那就太好了。

标签： angular

解决方案

根据接口定义，CanActivate 可以返回 Observable、Promise 或布尔值，但不能返回订阅：

interface CanActivate {    
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
     Observable<boolean> | Promise<boolean> | boolean 
}

您可以像这样更改代码：

if (this.adal.user.isAuthenticated) {
  return of(true);
} else {
  this.adal.acquireToken(clientId).pipe(map(() => true))
  .catch ((error) => {
     console.log('No user logged in.');
     this.router.navigate(['/login']);
  });
}

推荐阅读