刷新令牌时，AuthGuard 服务 canActivate 无法导航

Question

AuthGuard 有一个奇怪的问题。

当我单击一个链接时，它会检查用户是否拥有有效的访问令牌。如果没有，它将寻找一个刷新令牌，然后尝试使用它来获取一个访问令牌 (this.oAuthService.refreshToken())。

如果需要刷新，它似乎无法导航。令牌已刷新，但页面无法导航。在令牌刷新发生后，我可以在第二次单击受保护页面的链接后成功导航。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>
{
    this.authUserService.lastUrl = state.url;

    if (this.oAuthService.hasValidAccessToken()) {
      this.authUserService.requireLoginSubject.next(false);
      return Observable.of(true);
    } else {

      if (sessionStorage.getItem('refresh_token') === null) {
        this.router.navigateByUrl('/sessiontimeout');
        this.authUserService.requireLoginSubject.next(true);
        return Observable.of(false);
      }

      this.oAuthService.refreshToken().then(() => 
      {
        console.log("refreshed token");
        this.authUserService.requireLoginSubject.next(false);
        return Observable.of(true);
      }).catch(() => {
        this.router.navigateByUrl('/sessiontimeout');
        this.authUserService.requireLoginSubject.next(true);
        return Observable.of(false);
      });
    }
}

Answer 1

我想你忘了在刷新案例上添加返回：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>
{
    this.authUserService.lastUrl = state.url;

    if (this.oAuthService.hasValidAccessToken()) {
      this.authUserService.requireLoginSubject.next(false);
      return Observable.of(true);
    } else {

      if (sessionStorage.getItem('refresh_token') === null) {
        this.router.navigate(['/sessiontimeout']);
        this.authUserService.requireLoginSubject.next(true);
        return Observable.of(false);
      }

      return Observable.fromPromise(this.oAuthService.refreshToken())
             .mergeMap(()=>{
                       this.authUserService.requireLoginSubject.next(false);
                       return Observable.of(true);
              })
             .catch(()=>{
                      this.router.navigateByUrl('/sessiontimeout');
                      this.authUserService.requireLoginSubject.next(true);
                      return Observable.of(false);
              });
}

编辑：将 promise 转换为 Observable，以便更轻松地连接运算符。