async-await in canactivate() in Angular 7

Question

我正在写一个检查浏览器是否有userInfo的代码。如果不是，浏览器调用API从服务器获取userInfo。只有当存在有效的userInfo时，才允许用户导航到页面。

我的问题是，canactivate()不等待调用完成。我试过在其他线程中提到的Resolver，但它也不起作用。

所以，我设置了async-await，但它也不起作用。canactivate()在getUser()完成之前返回。以下代码中async-await的语法是否错误？

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private refService: RefService, private userInfoService: UserInfoService) {
  }

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

    this.getUser();
    console.info('canActivate completed');
    return this.userInfoService.getUserInfo() !== null;
  }

  async getUser() {
    if(!this.userInfoService.getUserInfo()) {
      await this.refService.getTamUser().toPromise( ).then(data => {
        this.userInfoService.setUserInfo(data);
      });
    }
  }
}

Answer 1

您可以将异步逻辑包装在canActivate函数本身中作为 promise ，这样can canActivate将只在then或catch的promise返回块中返回。一定要作为一个可观察对象返回。

 @Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private refService: RefService, private userInfoService: UserInfoService) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  if (!this.userInfoService.getUserInfo()) {
    this.refService.getTamUser().toPromise()
    .then(data => {
      if (data) {
        this.userInfoService.setUserInfo(data);
        console.info('canActivate completed');
        return of(true);
      } else {
        return false
      }
    })
    .catch(() => {
      return false;
    })
  } else {
    return of(this.userInfoService.getUserInfo() !== null);
  }
}

Answer 2

can Activate不是(A)等待getUser。我会这样做：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const userInfo = this.userInfoService.getUserInfo()
    if (userInfo) {
      return userInfo !== null;
    } else {
      return this.refService.getTamUser().pipe(switchMap((data: any) => {
        this.userInfoService.setUserInfo(data);
        return of(data !== null);
      })) 
    }
  }

首先检查用户信息是否存在。如果不是，那么从ref service获取用户信息，并返回一个boolean类型的新的observable。假布尔值表示不允许访问或refService调用失败。

阅读有关switchMap here的更多信息。简而言之:从原始可观测数据中创建一个新的可观测数据。