web-dev-qa-db-fra.com

Angular 6 traitement de la réponse 403 avec le nouveau RxJS

LE PROBLÈME:

J'ai un intercepteur:

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

il était usé dans Angular 5, mais maintenant j'ai migré vers 6 et cela ne fonctionne plus. 

Il est dit que la propriété 'do' n'existe pas sur le type Observable.

Aussi, j'ai essayé d'implémenter la solution à partir de ce fil: LINK Ne fonctionnait pas aussi bien.

Ce topic dit que c'est la conséquence des changements de rxjs. Après avoir apporté les modifications suggérées, le problème persiste (maintenant, avec 'touchez' au lieu de 'faire')

voici la section d'importation:

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

Remarque: la ligne commentée a également été essayée.

angularangular-http-interceptors
4
Unknwn Artist

SOLUTION:

  1. lancer 'npm install rxjs-compat @ 6 --save';
  2. les importations doivent ressembler à ceci:
import {Observable} from 'rxjs';

import 'rxjs/add/operator/do';

  1. dans mon cas il n'y avait PAS BESOIN de changer 'do' -> 'tap';

  2. si un matériau angulaire est utilisé, une réinstallation peut être nécessaire après l'exécution de la première commande.

0
Unknwn Artist

Pour que cela fonctionne pour mon projet (Angular 6, RxJS 6), j'ai dû apporter les modifications suivantes:

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

Et modifiez l'extrait d'en haut pour qu'il soit:

(chaînage changé en tuyauterie, et changé 'do' en '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']);
           }
         }
       })
   );
  }
}

La raison en est quelques modifications récentes dans RxJS 6

Utilisez la tuyauterie au lieu de chaîner comme nouvelle syntaxe d'opérateur. Le résultat d'un opérateur est transmis à un autre opérateur.

Et

Remarque Certains opérateurs changent de nom en raison de collisions de noms avec des mots réservés par JavaScript! Ceux-ci incluent: do -> tap, catch -> catchError, switch -> switchAll, enfin -> finalize.

1
Jbrown

Face au même problème, voici comment j'ai résolu 

  1. ng update (Pour mettre à jour tous les paquets et les rendre compatibles avec angular 6)
  2. npm install rxjs-compat @ 6 --save (Installer une version mise à jour de rxjs)

  3. remplace les fonctions suivantes dans le code car elles sont mises à jour dans rxjs

    do => tapez sur, catch => catchError, switch => switchAll, enfin => finaliser

pour plus d'informations, consultez le journal des modifications de rxjs.

0
Prabhu Tiwari

Si votre erreur est property 'do' doesn't exist on type Observable, essayez d'importer l'opérateur. Placez ceci sur votre fichier:

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