Angulaire 6 - httpClient passant basic auth dans httpOptions

J'ai un service Angulaire 6 et je suis en train de modifier un enregistrement mais cela dit je ne suis pas autorisé.

Maintenant j'ai ceci:

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

  update(id, title, content) {
    const updateData = { id: id, title: title, content: content };
      return this.http.put(`http://myurl/${id}`, updateData, httpOptions);
  }

Ma question est:

Comment puis-je ajouter autorisation de base à mon httpOptions ou dois-je l'ajouter directement à la méthode de mise à jour?

InformationsquelleAutor MarkHill2018 | 2018-06-05
  1. 18

    Vous pouvez ajouter autorisation de base en ajoutant des en-têtes, comme ci-dessous:

    var headers_object = new HttpHeaders();
headers_object.append('Content-Type', 'application/json');
headers_object.append("Authorization", "Basic " + btoa("username:password"));

const httpOptions = {
  headers: headers_object
};
    • C'est ce que je recherchais, mais comment puis-je ajouter que cette: const httpOptions = { en-tête: la nouvelle HttpHeaders({'Content-Type': 'application/json'}) };
    • Consultez la mise à jour de réponse.
    • D'avoir une erreur: Argument de type '{ en-têtes: les en-Têtes; }' n'est pas assignable à paramètre de type '{ en-têtes?: HttpHeaders | { [en-tête: string]: string | string[]; };
    • Vous devez attribuer l'en-tête de la variable en paramètre d'en-tête. H doit être en minuscules. J'ai mis à jour la solution pour éviter la confusion.
    • new Headers(); devrait être new HttpHeaders()
    • Il a travaillé dans Angulaire 4. J'ai mis à jour la réponse Angulaire 5/6. Merci.
    • Oui, parce que l'OP est l'utilisation de v-5/6 que par question de détails
    • Oui, je n'ai pas remarque que.

    InformationsquelleAutor Prachi
  2. 6

    À la recherche à l'angle.io de la documentation, c'est assez simple.

    const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'Basic my-auth-token'
  })
};

    Et vous pouvez utiliser le httpOptions constante comme vous l'avez fait.

    Pour plus d'informations: https://angular.io/guide/http#adding-headers

    • Salut l'ami, j'ai 2 services par exemple, authservice de connexion et userService pour obtenir les données, après le login j'ai mis localstorage et de créer un jeton et dans userService j'ai essayer d'obtenir un jeton, mais sans succès const httpOptions = { en-tête: la nouvelle HttpHeaders({ 'Content-Type': 'application/json', 'Autorisation': 'Porteur' + localStorage.getItem('token') }) }; son n'obtenez pas de jeton, une idée ?
    InformationsquelleAutor Mehdi Benmoha
  3. 4

    Suffit d'ajouter votre jeton d'autorisation de dans les en-têtes, ce

    let httpHeaders = new HttpHeaders()
              .set('authorization', this.authorizationHeaderValue)
              .set('Content-Type', application/json);

    Les deux ont des méthodes telles que l'ensemble et ajouter. ensemble construit un nouveau corps avec une nouvelle valeur et ajouter construit un nouveau corps avec une valeur annexée

    PS: Ici je suis en supposant que la variable (ce.authorizationHeaderValue) de la valeur est la valeur comprise comme Bearer ou Basic ou tout ce qui est nécessaire, de les Modifier en conséquence.

    Pour en savoir plus, consultez ici

    • Downvoters, Pouvez-vous expliquer pourquoi?
    • c'est probablement la virgule sur la ligne 2
    • Ohh , c'était juste une faute de frappe erreur. Ne méritait pas downvote pour cela de toute façon merci de remarquer 🙂
    • Votre Authroization en-tête est mal. "Autorisation" et la valeur de a généralement le mot "Base" ou "Digest" ou "au Porteur" en face de la réelle jeton (pas le vide de l'espace). Si c'est un jeton OAuth, vous devez alors utiliser le "Porteur" en face de la authtoken
    • vous avez raison, mais je suis en supposant que (Comme best practice) pour être une chaîne de caractères y compris Bearer or Basic etc dans la variable nommée ici this.authToken. Semble qu'il est évident
    • Je me demandais si c'est ce que vous impliquant. Mais avec un nom de variable de "authToken" j'ai supposé que c'était JUSTE le jeton lui-même, de ne pas l'Autorisation d'en-tête string (je n'aurais probablement du nom de la variable "authorizationHeaderValue" ou quelque chose à cet effet.
    • Vous avez raison, le nom de Variable pourrait être mieux, au lieu de simplement authToken, Permettra de mettre à jour le nom de la variable comme vous l'avez suggéré. merci @KevinM
    • Désolé, senti comme si j'étais dans une revue de code 🙂
    • C'est improtant de toute façon, j'ai adoré!

    InformationsquelleAutor Pardeep Jain