Question

我对angular 7还是陌生的，面临着一个我无法弄清为什么会发生的问题。

我希望在每次重定向后 RouteGuard 将检查令牌是否有效。为此，我编写了以下服务；

 getUserClaims():Promise<any> {
    /*return new Promise((resolve, reject) => {
      this._http.get(ALCA_Utility.API_BASE_URL + 'User/GetCurrentUser')
        .toPromise()
        .then(
          res => { // Success

            resolve(res)
          }
        );
    });*/

     return this._http.get(ALCA_Utility.API_BASE_URL + 'User/GetCurrentUser')
       .toPromise();
  }

我尝试了两种方法，（我注释掉了上述方法，并且我使用HTTP_INTERCEPTORS来拦截HTTP调用并将令牌添加到Authorization标头中）。

下面是canActive方法；

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {

    if (sessionStorage.getItem('userToken') != null) {

      this._auth.getUserClaims().then((data) => {
        if (data.PK_UserID != null && data.PK_UserID > 0) {
          alert(1)

          return true
        }
        else{
          alert(2)      
          return false
        }
        alert(3)      

      })
      alert(4)      
    }
    else {      
      this._router.navigate(['/login']);
      return false;
    }
  }

我认为这些方法将在canActive中按顺序执行，但是显示的是警报4，然后是1、2、3。

我不明白为什么会这样？

Answer 1

在promise中执行http.get时，这是一个异步调用。对我来说，正常情况下您会看到第4个，然后是其余的。您会得到一个“承诺”，即您可能会或可能不会从呼叫中及时得到答复。在您的程序中，我没有真正看到需要警报4的能力。唯一可以做的就是捕捉错误

Answer 2

请检查以下实现：

@Injectable()
export class LoggedInGuard implements CanActivate {

  constructor(private router: Router) {  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return userService.isAuthenticated().then(result => {
      if (result) return true;
      UserLoginService.setPreviousUrl(state.url);
      this.router.navigate(['login']);

      return false;
    }).catch(message => {
      userService.setPreviousUrl(state.url);
      this.router.navigate(['login']);

      return false;
    });
  }
}

对于您的情况，请检查以下内容：

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> | boolean {
    if (sessionStorage.getItem('userToken') != null) {
      return this._auth.getUserClaims().then(data => {
        if (data.PK_UserID != null && data.PK_UserID > 0) {
          return true;
        } else {
          return false;
        }
      });
    } else {
      this._router.navigate(['/login']);
      return false;
    }
  }

请注意canActivate的返回类型

Promise<boolean> | boolean

在Angular 7中执行promise方法之前调用的另一个GET

2 个答案: