Angular 6, EmptyError: нет элементов в последовательности - вероятно, плохой перехватчик

Question

У меня есть базовая охрана.Пользователь перенаправляется при входе в систему.

export class AuthGuard implements CanActivate {
  constructor(private router: Router, private auth: AuthService) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.auth.isAuthenticated().pipe(
      map(isAuthenticated => {
        if (isAuthenticated) {
          this.router.navigate(environment.redirectPage);
          return false;
        }
        return true;
      })
    );
  }
}

А это функции для проверки подлинности

verifyToken (token: string): Observable<any> {
  const data = {'token': token};
  return this.http.post(`${this.url}/jwt/verify/`, data);
}

isAuthenticated () {
  const token = localStorage.getItem('token');
  if (token) {
    return this.verifyToken(token).pipe(
      map(data => true),
      catchError (error => {
        localStorage.removeItem('token');
        return of(false);
      }),
      shareReplay()
    );
  }
  return of(false);
}

И у меня есть пользовательский перехватчик

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const token = localStorage.getItem('token');
  if (token) {
    request = request.clone({setHeaders: {
        Authorization: `JWT ${token}`
    }});
  }

  return next.handle(request).pipe(catchError((error, caught) => {
    if (error.status === 401) {
      this.router.navigate([`/auth`]);
    }
    return of(error);
  }) as any);
}

Эта ошибкапроизошло после добавления канала к handle ()

Так что это вызывает ошибку:

return next.handle(request).pipe(catchError((error, caught) => {
    if (error.status === 401) {
      this.router.navigate([`/auth`]);
    }
    return of(error);
  }) as any);

, но это не так:

return next.handle(request);

Что я делаю неправильно с pipe 'ing next.handle ()?

Answer 1

Вы должны повторно выдать ошибку в next.handler, чтобы ваш AuthGuard смог ее перехватить.

return next.handle(req).pipe(
  catchError(err => {
    return throwError(err);

  })
);

Затем вы можете сделать все, что захотите, с ошибкой в ​​охране:

return this.auth.isAuthenticated().pipe(
      map(isAuthenticated => {
        if (isAuthenticated) {
          this.router.navigate(environment.redirectPage);
          return false;
        }
        return true;
      }),
      catchError(err => {
        this.router.navigate(['/sign-in']);
        return of(err);
      })
    );