web-dev-qa-db-de.com

Angular 6 Umgang mit 403 Antwort mit neuem RxJS

DAS PROBLEM:

Ich habe einen Abfangjäger:

@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']);
         }
       }
     });
  }
}

es war in Angular 5 abgenutzt, aber jetzt bin ich auf 6 gewechselt und das funktioniert nicht mehr. 

Die Eigenschaft 'do' ist auf dem Typ Observable nicht vorhanden.

Ich habe auch versucht, die Lösung aus diesem Thread zu implementieren: LINK Funktionierte nicht so gut.

Dieses topic sagt, es ist eine Folge von rxjs Änderungen. Nachdem Sie die vorgeschlagenen Änderungen vorgenommen haben, bleibt das Problem bestehen (jetzt mit 'tap' statt 'do').

hier ist der Importbereich:

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

Hinweis: Die kommentierte Zeile wurde ebenfalls ausprobiert.

4
Unknwn Artist

LÖSUNG:

  1. führen Sie 'npm install rxjs-compat @ 6 --save' aus.
  2. importe sollten so aussehen:
import {Observable} from 'rxjs';

import 'rxjs/add/operator/do';
  1. in meinem Fall gab es KEIN BEDARF 'do' ändern -> 'tap';

  2. wenn eckiges Material verwendet wird, ist nach dem ersten Befehl möglicherweise eine Neuinstallation erforderlich.

0
Unknwn Artist

Damit dies für mein Projekt (Angular 6, RxJS 6) funktioniert, musste ich folgende Änderungen vornehmen:

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';

Und modifizieren Sie das Snippet von oben so:

(Die Verkettung wurde in Piping geändert und "do" in "tap" geändert.)

@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']);
           }
         }
       })
   );
  }
}

Der Grund dafür sind einige letzte Änderungen in RxJS 6

Verwenden Sie Piping statt Verketten als neue Operatorsyntax. Das Ergebnis eines Operators wird an einen anderen Operator weitergeleitet.

Und

Hinweis Einige Operatoren haben eine Namensänderung aufgrund von Namenskollisionen mit reservierten JavaScript-Wörtern! Dazu gehören: do -> tap, catch -> catchError, switch -> switchAll, final -> finalize.

1
Jbrown

Angesichts des gleichen Problems habe ich das Problem gelöst 

  1. ng update (Um alle Pakete zu aktualisieren und mit angle 6 kompatibel zu machen)
  2. npm install rxjs-compat @ 6 --save (Installiere eine aktualisierte Version von rxjs)
  3. ersetzen Sie die folgenden Funktionen im gesamten Code, da sie in rxjs aktualisiert werden

    do => tap, catch => catchError, switch => switchAll, finally => finalize

weitere Informationen finden Sie im Änderungsprotokoll von RXJS.

0
Prabhu Tiwari

Wenn Ihr Fehler property 'do' doesn't exist on type Observable ist, versuchen Sie, den Operator zu importieren. Lege dies auf deine Datei:

import 'rxjs/add/operator/do';
0
Zlatko