Маршрут углового перехватчика на другой путь в зависимости от ответа

Я играю с перехватчиком Angular, и я хотел перенаправить, если статус ответа 401, а ниже - то, что я пробовал.

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {

  constructor(private _localStorageService: LocalStorageService, private _router: Router, private _location: Location) { }


  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url.includes("/login")) {
      return next.handle(req);
    }
    let authToken: LocalStorage = this._localStorageService.getItem('auth-token');
    if (authToken) {
      return next.handle(
        req.clone({
          headers: req.headers.append('Authorization', 'jwt ' + authToken.value)
        })
      ).pipe(tap((response: HttpResponse<any>) => {
        console.log(response);
        if (response instanceof HttpResponse) {
          if (response.body.status == 401) {
            this._router.navigate([Routes.LOGIN]);
            return response;
          }
        }
      }));
    }
    this._router.navigate(['/login']);
  }
}

Этот процесс работает, но всякий раз, когда маршрут изменяется, я получаю это в консоли chrome dev: ОШИБКА Вы указали undefined там, где ожидался поток. Вы можете указать Observable, Promise, Array или Iterable.

Как мне предотвратить это? а что я делаю не так?


angular angular-http-interceptors
person CruelEngine    schedule 19.02.2019    source источник
comment
Это очень похоже на NullPointerException.   -  person Antoniossss    schedule 19.02.2019
comment
вы пытались отладить проблему из какой строки кода?   -  person Hien Nguyen    schedule 19.02.2019

Ответы (2)


arrow_upward
2
arrow_downward

Эта ошибка всегда относится к отсутствующему или неправильному возвращаемому значению, в вашем случае в какой-то момент метод перехвата не возвращает наблюдаемое, а вместо этого либо ничего, либо что-то еще. Затем наблюдаемый объект используется внутри Angular, и, поскольку он не является наблюдаемым, он терпит неудачу. Например. если ваш authToken не определен, вы ничего не вернете, поэтому результат метода перехвата не определен.

person Julien Ambos    schedule 19.02.2019
comment
Спасибо, что указали на проблему. Ошибка прекратилась, когда я удалил this._router.navigate(['/login']);. - person CruelEngine; 19.02.2019

arrow_upward
0
arrow_downward

Спасибо @Julien за то, что указали мне правильное направление. Посмотрев на ответ, я немного покопался в поисках решения, и ниже показано решение, которое сработало для меня.

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {

  constructor(private _localStorageService: LocalStorageService, private _router: Router, private _location: Location) { }


  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url.includes("/login")) {
      return next.handle(req);
    }
    let authToken: LocalStorage = this._localStorageService.getItem('auth-token');
    if (authToken) {
      return next.handle(
        req.clone({
          headers: req.headers.append('Authorization', 'jwt ' + authToken.value)
        })
      ).pipe(tap((response: HttpResponse<any>) => {
        console.log(response);
        if (response instanceof HttpResponse) {
          if (response.body.status == 401) {
            this._router.navigate([Routes.LOGIN]);
            return response;
          }
        }
      }));
    }
    this._router.navigate(['/login']);
    return empty();
  }
}

Если кто-нибудь столкнется с этой проблемой, обратитесь к: https://stackoverflow.com/questions/42904456/angluar2-routing-inside-http-interceptor

Принятый ответ не использует перехватчик http, но есть другой ответ, который использует перехватчик

Решение, которое я использовал, просто возвращает пустое наблюдаемое, используя empty()

person CruelEngine    schedule 19.02.2019