5
votes

L'intercepteur HTTP Angular 7 ne fonctionne pas

Je suis nouveau sur Angular et j'essaie d'implémenter un appel d'API qui envoie un jeton dans l'en-tête sur toutes les API, donc j'utilise Interceptor.

Je ne peux pas définir d'en-tête dans la requête.

jwt.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserListingService {
  apiUrl = "URL";
  constructor(
    private http: HttpClient
  ) { }

  fetchAllUsers() {
    return this.http.get(`${this.apiUrl}/fetchAdminsUsers`)
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppUserListingComponent } from './app-user-listing/app-user-listing.component';
import { JwtInterceptor } from './jwt.interceptor';

@NgModule({
  providers: [ { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true } ],
  bootstrap: [AppComponent]
})
export class AppModule { }

user-listing.service.ts p >

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    constructor() { }

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

        let currentUser = localStorage.getItem('useremail')
        let currentUserToken = localStorage.getItem('token')
        if (currentUser && currentUserToken) {
            request = request.clone({
                setHeaders: {
                    'Authorization': `${currentUserToken}`
                }
            });
        }
        // console.log("Request", request)
        return next.handle(request);
    }
}

Quelle est la raison pour laquelle mon code ne fonctionne pas?

Merci d'avance


15 commentaires

essayez d'utiliser 'Authorization': currentUserToken


J'ai aussi essayé d'utiliser statique mais je ne fonctionne pas.


La demande d'API fonctionne-t-elle? apiUrl = "URL"; ??


Oui, il y a mon URL d'API qui fonctionne parfaitement.


if (currentUser && currentUserToken) est-ce vrai? (peut-être ce faux )


Cela fonctionne parfaitement pour moi: stackblitz.com/edit/ angular-interceptors-uudcc8? file‌ = app /…


voir l'image: i.stack.imgur.com/ePPLp.png


Je l'ai testé sans condition mais toujours pas de chance


vérifiez-vous l ' Autorisation dans le réseau F12 comme dans mon image?


voir ceci imgur.com/aK5IuMD


copier cette erreur et rechercher Google sur la solution


Je connais CORS et j'en suis conscient. Demande: imgur.com/SKrg2hL réponse: imgur.com/3GjHH25


il n'y a donc pas de connexion à l ' Autorisation


et la méthode GET devient OPTIONS. que dire de cela ?


vérifiez ci-dessus les captures d'écran de mes deux en-têtes


4 Réponses :


0
votes

essayez d'utiliser l'instance comme ci-dessous.

return next.handle(request).pipe(
            tap(
                event => {
                    if(event instanceof HttpResponse){
                        //api call success
                         console.log('success in calling API : ', event);
                    }
                },
                error => {
                    if(event instanceof HttpResponse){
                        //api call error
                        console.log('error in calling API : ', event);
                    }
                }
            )
        )


2 commentaires

également lors de l'appel de l'api, utilisez httpClient: return this.httpClient.post ('url', {options});


Lorsque j'utilise le script ci-dessus, le message "Impossible de trouver le nom tap" s'affiche



1
votes

Authorization est un en-tête spécial, vous devez ajouter withCredentials: true à la demande pour l'ajouter.

        request = request.clone({
            setHeaders: {
                'Authorization': `${currentUserToken}`
            },
            withCredentials: true
        });


1 commentaires

Non? withCredentials signifie envoyer des cookies; il n'a aucun impact sur les en-têtes. Voir developer.mozilla.org/en-US/docs/Web / API / XMLHttpRequest /…



1
votes

Ajouter importations: [BrowserModule, HttpClientModule] dans @NgModule .


0 commentaires

5
votes

Dans votre code app.module.ts, il n'y a pas de importation: [HttpClientModule] Avez-vous importé le HttpClientModule ?

Je rencontre un problème similaire avec l'intercepteur http angular 8.x ne fonctionne pas correctement.


1 commentaires

Maintenant, j'ai mis à jour Angular avec 8 et maintenant cela fonctionne