Angular 4中canActivate内Observable.toPromise()返回失效问题

你的问题核心在于没有把异步操作的Promise返回给canActivate守卫，导致守卫无法等待异步流程完成就进行了判断，所以你在then/catch里的return完全没生效。

为什么会失效？ #

canActivate支持返回boolean、Observable<boolean>或者Promise<boolean>，当处理异步逻辑时，必须把这个异步任务的结果（Promise/Observable）返回给守卫，它才会等待任务完成后再决定是否允许路由激活。而你原来的代码里，else块只是调用了toPromise()但没有返回它，守卫根本不知道有这个异步操作存在，自然不会理会你在then/catch里的返回值。

修正后的代码（Promise版本） #

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> | boolean {
  if (this.adal.user.isAuthenticated) { 
    return true; 
  } else { 
    // 关键：返回整个Promise链，让守卫等待异步结果
    return 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; 
      }); 
  }
}

更推荐的Observable版本（Angular生态更适配） #

其实Angular的路由守卫对Observable的支持比Promise更原生，不需要额外转Promise，代码也更符合Angular的习惯：

import { of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// ...

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
  if (this.adal.user.isAuthenticated) { 
    return true; 
  } else { 
    return this.adal.acquireToken(clientId).pipe(
      map((data) => {
        console.log('Refreshed the token.');
        return true;
      }),
      catchError((error) => {
        console.log('No user logged in.');
        this.router.navigate(['/login']);
        // 用of()把布尔值转成Observable返回
        return of(false);
      })
    );
  }
}

额外注意点 #

• 确保clientId是正确配置的常量或注入值，避免因参数错误导致acquireToken失败
• 确认你的ADAL服务已经完成初始化，避免调用acquireToken时出现未初始化的错误

内容的提问来源于stack exchange，提问作者Aiguo