web-dev-qa-db-fra.com

Angular 7 n'envoie pas l'en-tête correct sur demande

Je ne peux pas envoyer les rubriques correctes dans un angle 7! J'utilise passeport sur mon backend:

"app.get('/api/users', passport.authenticate('jwt', {session: false}), (req, res, next) => {... bla bla bla...}."

Quand j'essaye d'envoyer un jeton valide de postier à mon chemin/api/utilisateurs, tout fonctionne correctement, mais quand je le fais d'angulaire, pas. (* Angular ne montre pas d'erreur!) Supposons que 'Bearer validToken' est un jeton valide C'est ainsi que j'envoie les en-têtes:

getAll() {

const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer validToke.' 
  });
};

return this.http.get<user[]>(`http://localhost:3000/api/users`, httpOptions);
}

Je peux m'authentifier d'angular et obtenir le jeton Bearer, tout fonctionne correctement, je peux obtenir la liste des utilisateurs si je supprime passport.authenticate ('jwt', {session: false})

Merci pour la lecture!

angularhttp-headersjwtpassport.jsangular7
4
Augusto

J'ai pu résoudre ce problème en créant un intercepteur: 

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

    import { AuthenticationService } from '../_services/authentication.service';

    @Injectable()
    export class JwtInterceptor implements HttpInterceptor {
      constructor(private authenticationService: AuthenticationService) {}

      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.authenticationService.currentUserValue;
        if (currentUser && currentUser.token) {
          request = request.clone({
            setHeaders: {
              Authorization: `${currentUser.token}`
            }
          });
        }

        return next.handle(request);
      }
    }

Merci

1
Augusto

Tout semble être correct pour moi - mais j'ai quelques changements mineurs dans votre code 

Ne liez pas HttpOptions directement liez la HttpHeaders dans la requête, vérifiez le code ci-dessous

getAll() {

const httpHeaders = new HttpHeaders ({
     'Content-Type': 'application/json',
     'Authorization': 'Bearer validToke.' 
   });

return this.http.get<user[]>(`http://localhost:3000/api/users`, { headers: httpHeaders });
}

Maintenant, cela ajoutera vos en-têtes pour la demande - si vous utilisez pour obtenir des données de domaine différent - essayez d’ajouter des cors sur votre serveur - le navigateur prélude la demande en tant que HttpOptions et la lie sous le nom HttpGet 

J'espère que ça marche - codage heureux !!

2
Rahul