Auth Guard how to await Result

[jaunty meteor]

Hello, I have a problem with my Auth Guard. I have an AccoutnService which stores the current user. Now when I reload the page the service is regenerated and so my current user is empty (I am aware of this). I have now stored my account in the localstorage and in case of an empty user I want to send a request to my backend and ask if the token is valid. Unfortunately I don't know how to make two observable after each other I wait for them. Can someone help me with my problem?

canActivateChild(): Observable<boolean> {
    return this.accountService.currentAccount$.pipe(
      map(account => {
        if (account) {
          return true;
        } else {
          const accountString = localStorage.getItem('account');

          if (accountString) {
            const account: Account = JSON.parse(accountString);

            // Here a request to the backend is needed which has to be waited for.

            const value = this.checkAccount(account);
            
            // Something Like
            this.httpClient.post<Account>(environment.webApiUrl + "/user/verifyauthtoken", {token: account.token}).pipe(
              map(account => {
                if (account) {
                  return true;
                } else {
                  return false;
                }
              })
            );

          } else {
            this.toastrService.error("Kein Zugriff");
            return false;
          }
        }
      })
    );
  }

[edgy monolith]

You forgot to return the observable returned by this.httpClient.post<Account>(...)

[jaunty meteor]

Yes i know that ther is missing a return. The return generate an error

[edgy monolith]

Also, you'll need a switchMap, not a map.

  canActivateChild(): Observable<boolean> {
    return this.accountService.currentAccount$.pipe(
      switchMap(account => {
        if (account) {
          return of(true);
        } else {
          const accountString = localStorage.getItem('account');

          if (accountString) {
            const account: Account = JSON.parse(accountString);

            // Here a request to the backend is needed which has to be waited for.

            const value = this.checkAccount(account);
            
            // Something Like
            return this.httpClient.post<Account>(environment.webApiUrl + "/user/verifyauthtoken", {token: account.token}).pipe(
              map(account => {
                if (account) {
                  return true;
                } else {
                  return false;
                }
              })
            );

          } else {
            this.toastrService.error("Kein Zugriff");
            return of(false);
          }
        }
      })
    );
  }

[jaunty meteor]

Thank you it works. I never used a switchMap. Can you explain what a switchMap does?

[edgy monolith]

https://rxjs.dev/api/operators/switchMap, also, if you have a little more time: https://www.youtube.com/watch?v=iCPa_Rws_iA

[jaunty meteor]

Thank you 👍