Угловая 6 обработка ответа 403 с новым RxJS

Question

ПРОБЛЕМА:

У меня есть перехватчик:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).do((event: HttpEvent<any>) => {
       if (event instanceof HttpResponse) {

       }
     }, (err: any) => {
       if (err instanceof HttpErrorResponse) {
         if (err.status === 403) {
           this.router.navigate(['login']);
         }
       }
     });
  }
}

это работало в Angular 5, но теперь я перешел на 6, и это не такбольше не работает

В нем говорится, что свойство "do" не существует для типа Observable.

Также я пытался реализовать решение из этой темы: LINK Не сработало.

Эта тема говорит, что это является следствием изменений в rxjs.После внесения предложенных изменений проблема остается (теперь с «tap» вместо «do»)

здесь есть раздел импорта:

// import {Observable} from "rxjs/Observable";
import {Observable} from "rxjs/Rx";
import { tap } from 'rxjs/operators';

Примечание: строка с комментариями также была опробована.

Answer 1

Чтобы это работало для моего проекта (Angular 6, RxJS 6), мне нужно было внести следующие изменения:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Router } from '@angular/router';

И изменить фрагмент сверху, чтобы он был:

(цепочка изменилась на трубопроводную и изменила «do» на «tap»)

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).pipe(
       tap((event: HttpEvent<any>) => {
         if (event instanceof HttpResponse) {

         }
       }, (err: any) => {
         if (err instanceof HttpErrorResponse) {
           if (err.status === 403) {
             this.router.navigate(['login']);
           }
         }
       })
   );
  }
}

Причиной этого являются некоторые недавние изменения в RxJS 6 .

Использование конвейера вместо цепочки в качестве нового синтаксиса оператора.Результат одного оператора передается другому оператору.

И

Примечание. Некоторые операторы имеют изменение имени из-за конфликта имен с зарезервированными словами JavaScript!К ним относятся: do -> tap, catch -> catchError, switch -> switchAll, наконец -> finalize.

Answer 2

Столкнулся с той же проблемой, вот как я решил

1. ng update (Чтобы обновить все пакеты и сделать его совместимым с angular 6)
2. npm install rxjs-compat @ 6--save (установить обновленную версию rxjs)

3. заменить следующие функции по всему коду, поскольку они обновляются в rxjs

   do => tap, catch => catchError, switch => switchAll, наконец => завершить

для получения дополнительной информации проверьте журнал изменений rxjs.

Answer 3

РЕШЕНИЕ:

1. запустите 'npm install rxjs-compat @ 6 --save';
2. импорт должен выглядеть следующим образом:

import {Observable} from 'rxjs';

import 'rxjs/add/operator/do';

в моем случае НЕТ НЕОБХОДИМОСТИ для изменения 'do' -> 'tap';

, если используется угловой материал, переустановка можетпонадобиться после выполнения первой команды.

Answer 4

Если ваша ошибка property 'do' doesn't exist on type Observable, попробуйте импортировать оператора.Поместите это поверх вашего файла:

import 'rxjs/add/operator/do';