Есть ли способ перенаправить, если из Guard в Angular при использовании асинхронного метода для проверки?

Question

В моем проекте Angular (6.xx) я внедряю Guard на определенных маршрутах, которые в случае сбоя должны перенаправить на '/ login'.Guard для проверки пользователя использует асинхронный метод в AuthService.

// AuthService
checkLogin(): Observable<boolean> {
  return this.http
    .get<boolean>(`${this.apiUrl}/users/autologin`)
    .pipe(
      map(result => result === true),
      catchError(error => of(false))
    );
}

// AuthGuard
canActivate(next: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.checkLogin();
}

Как мне этого добиться?

Примечание. Я знаю, как это сделать, если код в canActivate является синхронным.

Пример кода: https://stackblitz.com/edit/angular-async-guard-redirect?file=src%2Fapp%2Fapp.module.ts

Answer 1

Вы можете изменить authservice следующим образом.

   // AuthService
checkLogin(): Observable<boolean> {
  return this.http
    .get<boolean>(`${this.apiUrl}/users/autologin`)
    .pipe(
      map(result => { if(result === true)
                        {
                            returrn true;
                        }
                        this.router.navigateByUrl('/login');
                        return false;
                        }),
      catchError(error => of(false))
    );
}

Answer 2

Вы можете добавить tap в Observable pipe в AuthGuard, например:

return this.authService.checkAuthentication().pipe(
  tap(authenticated => {
    if (!authenticated) {
      // Add your redirect in here
    }
  })
);

Таким образом, вы можете отреагировать на значение Observable, прежде чем вернуть его.