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!
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
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 !!