Как заставить Angular Guard использовать службу API для проверки и перенаправления в случае сбоя?

Question

Добрый день!

У меня есть приложение Angular 7 для работы с табелями учета рабочего времени. Я использую CanActivate Guard для доступа к компоненту. Код CanActivate использует Observable, чтобы определить, следует ли их пропускать или перенаправлять.

  timecardID: number;
  constructor(private globals: Globals, private router: Router, private securityService: SecurityService) { }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | boolean {

    if (next.params.timecardId) {
      this.timecardID = +next.params.timecardId;
      return this.hasAccessToTimecard();
    }

    return this.empNumber === this.globals.empNumber;
  }


  //Does current user have access to this specific timecard
  hasAccessToTimecard(): Observable<boolean | UrlTree> {
    return this.securityService.hasRightsToTimecard(this.timecardID);
  }

Служба, которую он вызывает, выглядит так:

  private readonly HasRightsToTimecardURI = 'api/Security/HasRightsToTimecard';
  private readonly HasRightsToEmployeeURI = 'api/Security/HasRightsToEmployee';

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string, private router: Router) { }

  //I don't like the use of router to navigate here.  But without it, on false return the UrlTree isn't used for redirections.
  public hasRightsToTimecard(timecardID: number): Observable<boolean | UrlTree> {
    let parameters = new HttpParams();
    parameters = parameters.set('timecardID', String(timecardID));

    return this.http.get<boolean | UrlTree>(this.baseUrl + this.HasRightsToTimecardURI, { params: parameters }).pipe(
      tap((result) => {
        this.router.navigate(['/home']);
        return  result ? result : this.router.createUrlTree(['/home']);
      })
    );
  }

Я проверил, что logi c работает так, что, когда API возвращает false, создается и возвращается UrlTree, а также результат API, равный true, также возвращается.

Однако мой фактический результат таков, что если бы я пытался использовать элементы управления для доступа к маршруту:

1. Используя элементы управления в компоненте приложения, у меня есть правильный доступ, защита позволяет мне через
2. Используя элементы управления в компоненте приложения, у меня нет правильных доступ, охрана держит меня там, где я нахожусь (отказывая мне в этом маршруте). Когда он должен перенаправить меня.
3. Если я попытаюсь «приземлиться» прямо на этом маршруте, набрав его в браузере, я просто получу пустой маршрутизатор-выход.

Может кто-нибудь помогите мне?

Также: Возможный подходящий маршрут (удалены другие элементы):

const routes: Routes = [
  {
    path: 'timecards', canActivateChild: [RightsGuard], children: [
      { path: 'edit/:timecardId', canActivate: [TimecardGuard], component: TimecardNewComponent }
    ]
  }
];

Answer 1

Я решил свою проблему после того, как на некоторое время подключился к ней. Использование tap () неверно. Согласно документации (http://rxjs-dev.firebaseapp.com/api/operators/tap), нажатие не изменяет результирующее значение, оно всегда будет возвращать исходное значение. Использование map () было правильной функцией.