Angular 7 中 canactivate() 中的異步等待

Question

我正在編寫一個代碼來檢查瀏覽器是否有 userInfo。 如果沒有，瀏覽器調用 API 從服務器獲取用戶信息。 僅當存在有效的 userInfo 時，才允許用戶導航到頁面。

我的問題是 canactivate() 不等待調用完成。 我試過其他線程中提到的解析器，但它也沒有工作。

所以，我放置了 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將僅在 promise 返回的then或catch塊中返回。 作為可觀察對象返回。

 @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 服務獲取用戶信息並返回一個布爾類型的新 observable。 false 布爾值表示不允許訪問或 refService 調用失敗。

在此處閱讀有關 switchMap 的更多信息。 簡而言之：從原始 observable 的數據中創建一個新的 observable。