Угловой маршрут перехватчика на другой путь, основанный на ответе - PullRequest
0 голосов
/ 19 февраля 2019

Я играю с угловым перехватчиком, и я хотел изменить маршрут, если статус ответа 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: ОШИБКА Вы указали «неопределенный», где ожидался поток.Вы можете предоставить Observable, Promise, Array или Iterable.

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

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Спасибо, @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();
  }
}

Если кто-нибудь сталкивался с этой проблемой, обратитесь к: Маршрутизация Angluar2 внутри httpперехватчик

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

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

0 голосов
/ 19 февраля 2019

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

...