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
4 Réponses :
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); } } ) )
également lors de l'appel de l'api, utilisez httpClient: return this.httpClient.post
Lorsque j'utilise le script ci-dessus, le message "Impossible de trouver le nom tap" s'affiche
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 });
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 /…
Ajouter importations: [BrowserModule, HttpClientModule]
dans @NgModule .
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.
Maintenant, j'ai mis à jour Angular avec 8 et maintenant cela fonctionne
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 cefaux
)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