3
votes

Angular 7 - Envoyer un jeton dans un service Web de publication

J'essaye d'envoyer un en-tête de jeton dans un http.post. J'essaye ce code mais retourne dans le journal du navigateur:

Accès refusé

const httpOptions = {
      headers: new HttpHeaders({
        "Authorization": "Token " + localStorage.getItem("token")
      })
    };

      getCron() {
        console.log(httpOptions);
        return this.http.post(
          "URL", httpOptions);
      }

console.log renvoie le jeton correct, donc ce n'est pas l'erreur. L'erreur est que je ne sais pas comment ajouter exactement un jeton d'en-tête dans l'appel. La question est donc: comment puis-je ajouter ce jeton dans l'appel?

angular

6 commentaires

Avez-vous vérifié si vous aviez un jeton dans votre stockage local?

Oui. J'imprime console.log (localStorage.getItem ("token")) et j'ai le token.

@ElHombreSinNombre je pense que votre code essaie bien json parse valeur de stockage local

Ça ne marche pas. SyntaxError: jeton e inattendu dans JSON à la position 0

J'ai essayé cette "Autorisation": `Token $ {JSON.parse (window.localStorage.getItem (" token ") ||" ")}` ?

Qu'en est-il également des autres options telles que type de contenu, type d'application

5 Réponses :

0
votes

Essayez ceci:

this.http.get(url, { headers: this.headers }).subscribe(...);

Appelez ensuite la requête http en utilisant de nouveaux en-têtes:

headers = new HttpHeaders({ 'Authorization': 'Bearer ' + localStorage.getItem("token") });

1 commentaires

Voici la différence entre 401 et 403: une réponse 401 Unauthorized doit être utilisée pour une authentification manquante ou mauvaise, et une réponse 403 Forbidden doit être utilisée par la suite, lorsque l'utilisateur est authentifié mais n'est pas autorisé à effectuer l'opération demandée sur la ressource donnée . Donc bisacally vous êtes authentifié mais pas autorisé à faire certaines opérations, veuillez vérifier avec votre code serveur peut-être vous manquez quelque chose.

0
votes

Dans Angular, le meilleur moyen est de créer un intercepteur HTTP qui intercepte toutes les requêtes HTTP et les modifie pour inclure des en-têtes HTTP supplémentaires. Pour commencer, créez un service Angular et faites-le implémenter le HttpInterceptor.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(){

  }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        Authorization: `Bearer ${localStorage.get('token')}`
      }
    });

    return next.handle(req);
  }
}

Essayez ce service de code:

ng g service interceptors/auth

Source: https: // moyen .com / @ milosbejda / ajout-en-tête-d'autorisation-à-http-request-in-angular-4-and-5-777b2ce05424

0 commentaires

0
votes

Essayez ceci:

 import { Http, Headers, RequestOptions} from '@angular/http';

 var headers = new Headers();
 headers.append('Authorization', 'Bearer ' + localStorage.getItem("token"));
 headers.append('Content-Type', 'application/json');
 let options = new RequestOptions({ headers: headers });
 this.http.post(url, options).map(...);

6 commentaires

importer {RequestOptions} depuis '@ angular / http'; let options = new RequestOptions ({headers: headers}); erreur sur {headers: headers}

J'ai modifié ma réponse. qu'est-ce qu'une erreur à {headers: Header}?

erreur: {horodatage: "2019-01-10T10: 30: 04.597 + 0000", état: 403, erreur: "Interdit", message: "Accès refusé", chemin: "URL"} en-têtes: HttpHeaders {normalizedNames: Map ( 0), lazyUpdate: null, lazyInit: ƒ} message: "Réponse d'échec HTTP pour l'URL: 403 OK" nom: "HttpErrorResponse" ok: faux état: 403 statusText: "OK"

Cette erreur n'est pas due à {headers: headers}. Habituellement, 403 est pour refuse d'autoriser

Vous pouvez ignorer ceci: let options = new RequestOptions ({headers: headers}); ligne aussi.

Pour résoudre ce problème, veuillez vérifier si vous avez ajouté l'annotation @CrossOrigin dans votre service backend pour autoriser les demandes provenant de différentes origines, comme celle que vous envoyez depuis l'application Angular. En outre, vous pouvez vérifier l'API à l'aide de Postman, vous pouvez avoir une meilleure idée

3
votes

Ceci est dû au fait que la méthode post () accepte un corps de requête comme deuxième argument, les options vers http doivent être le troisième argument.

const httpOptions = {
      headers: new HttpHeaders({
        "Authorization": "Token " + localStorage.getItem("token")
      })
    };

      getCron() {
        console.log(httpOptions);
        return this.http.post(
          "URL", null, httpOptions); // replace the null with a body
      }

Si vous n'avez aucune donnée à publier , vous voudrez peut-être changer le point de terminaison en un GET au lieu d'un POST.

0 commentaires

0
votes

Utilisez des intercepteurs pour ajouter un jeton à chaque requête HTTP. Stockez le jeton dans un objet utilisateur et utilisez un service d'authentification pour le récupérer.

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthenticationService } from '../service/Authentication/authentication-service.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({ headers: request.headers.append('Authorization', 'Bearer '+ currentUser.token) });  
           
        }

        return next.handle(request`enter code here`);
    }
}

0 commentaires