Autorisation au porteur du jeton Angulaire 5
Je suis confus sur la façon de créer un bon d'en-tête pour une simple requête Get Angulaire 5.
C'est ce que je dois faire dans Angulaire:
C'est ce que j'ai à ce jour:
getUserList(): Observable<UserList[]> {
const headers = new Headers();
let tokenParse = JSON.parse(this.token)
headers.append('Authorization', `Bearer ${tokenParse}`);
const opts = new RequestOptions({ headers: headers });
console.log(JSON.stringify(opts));
const users = this.http.get<UserList[]>(this.mainUrl, opts)
return users
.catch(this.handleError.handleError);
}
C'est la réponse à ma console.journal:
{"method":null,"headers":{"Authorization":["Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYwODZlM2FiYTk0ZjVhMjVmNDhiNzlkYmI2YWUwOWY4YzE2MTUyMzg2N2I5MDZiY2MzNWQyNWJiYTZmYTE4YjEwZjA1MjZiNThkZjE2Y2FjIn0.eyJhdWQiOiJmMDExY2M1OC00MGNlLTQzYTktOGY3MS04NDI0OTRlM2E5OTciLCJqdGkiOiJmMDg2ZTNhYmE5NGY1YTI1ZjQ4Yjc5ZGJiNmFlMDlmOGMxNjE1MjM4NjdiOTA2YmNjMzVkMjViYmE2ZmExOGIxMGYwNTI2YjU4ZGYxNmNhYyIsImlhdCI6MTUyMzU1MTQ0NSwibmJmIjoxNTIzNTUxNDQ1LCJleHAiOjE1MjM1NTQ0NDUsInN1YiI6IjIiLCJzY29wZXMiOlsiYXV0aGVudGljYXRlZCIsImFuZ3VkcnUiXX0.E-WdQTl7nPDW0gj0rohfql-QgnAinzvDxPR-pySMrG07XFY9tA6Ex7IL23pDBmKDmQO8RcZKa0L5r6SRQq9_iqzMWzn5Zxp94J9TJrpZ2KGMoLR_FbK_tpC5G5q5vUnCe3q34sH7cPdT_2cI704OWWaYmIUKKpXWUIG0PJw_uKSJ_uOifPv59RZGQkoaQ9gPywDKe-uamm1Faug-Kk2YnFMoEJq7ou19zyxgdpX80ZTPUae67uB0PGLRuvxfGaqVsJ8k0NunAY3-pyUnBwR_3eeuOxf4TyfW2aiOJ9kuPgsfV4Z1JD7nMpNtTHMJaXEyNkBW8RlYHD1pj4dkdnsDmw"]},"body":null,"url":null,"withCredentials":null,"responseType":null}
Il semble assez. Mais me donne cette erreur
OBTENIR http://druang.dd:8080/user-list?_format=json 403 (Interdit)
Il y a une autre idée pour résoudre ce mystère. Dans Sublime text, Si je mets la souris sur opts
il dit quelque chose comme:
ERREUR dans src/app/services/userlist.service.ts(33,59): erreur TS2345:
Argument de type 'RequestOptions" n'est pas assignable à paramètre de
le type " { en-têtes?: HttpHeaders | { [en-tête: string]: string | string[];
}; observer?: le "corps"; params?: Ht...'. Types de biens "en-têtes"
sont incompatibles.
De Type "en-Têtes" n'est pas cessible de type 'HttpHeaders | { [en-tête: string]: string | string[]; }'.
De Type "en-Têtes" n'est pas cessible de type '{ [en-tête: string]: string | string[]; }'.
L'indice de signature est manquante dans le type "en-Têtes".
Une idée??
Ici, c'est la pleine Repo Git
Merci pour votre aide!
- Je pense que vous êtes de l'importation de la mauvaise classe pour les en-Têtes essayez de vérifier angulaire de la documentation dans la version 5 le service http est déconseillée pour httpClient service mais la httpClient est dans @angulaire commun et de l'autre on est dans @angulaire/http vous ne pouvez pas mélanger les classes par rapport à ceux de cause il va provoquer des erreurs. Pour moi, vos erreurs dirait que vous êtes à l'aide de http à partir d' "@angulaire/common" et les en-Têtes de "@angulaire/http" à la place de la HttpHeaders de "@angulaire/common"
- Salut, merci @Unsi ce sont mes importation:
import { HttpClient, HttpHeaders } from '@angular/common/http';
selon l'angle de documentation - Excellent 😀 @angulaire/http il sera remplacé par @angulaire/common/http supprimé en ng 6, je suppose.
Vous devez vous connecter pour publier un commentaire.
Je vous suggère d'utiliser un HTTPInteceptor qui prendrait soin de l'ajout du jeton. Voici un excellent article à atteindre: https://www.illucit.com/angular/en-angular-5-httpinterceptor-add-bearer-token-to-httpclient-requests/
----- Une autre Façon de résoudre le problème. -----
Et ne pas oublier d'appeler et de s'abonner à votre Composant.
Bearer ${auth_token}
Deux choses:
headers.append(...)
ne pas muter les en-têtes de l'objet, de sorte que votre en-tête d'autorisation n'est pas envoyé. Ce que vous devez faireheaders = headers.append(...)
Essayer
this.http.get<UserList[]>(this.mainUrl, { headers: headers });
headers = headers.append
me donne: Ne peut pas attribuer les en-Têtes de parce que c'est une constante ou une propriété en lecture seuleconst headers
de laisser les en-têtes " ou neconst headers = new Headers().append('Authorization',
Porteur ${tokenParse}`);let
il dit:Type void is not assignable to type 'Headers'
const opts = new RequestOptions({ headers: headers });
j'ai eu :ERROR in src/app/services/userlist.service.ts(33,37): error TS2345: Argument of type '{ headers: void; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'void' is not assignable to type 'Headers'.
{headers:headers}
dans la requête http get, j'ai obtenu ceci:ERROR in src/app/services/userlist.service.ts(35,59): error TS2345: Argument of type '{ headers: void; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. Type 'void' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'.
const users = this.http.get<UserList[]>(this.mainUrl, { headers:new HttpHeaders().set('Authorization',
Porteur ${tokenParse})})
Pour
get
demandes, j'ai utilisé le code suivant et il fonctionneAngulaire 6 et 7, cette méthode peut être utilisée pour intercepter toutes les requête HTTP et ajouter le porteur du jeton.
Mise en œuvre tutoriel est disponible ici. Youtube, ce canal a tous les tutoriels.
Intercepteur composant
Garde composant
L'ajouter à l'application.les modules.ts
La garde est ajouté à l'itinéraire
Je ne suis pas très bon en programmation,mais avec un peu d'essayer et d'échec
si trouvé ceci:
Il n'importe pas vraiment si j'utilise
.set
ou.append
, à la fin de la journée, il travaille dans les deux cas...Je ne sais pas vraiment ce qui se passe, de sorte que, si quelqu'un veut l'expliquer dans les commentaires, vous êtes les bienvenus...
qui a travaillé
Tandis que @HassanRahman montre pour
get
demandes, pourpost
demandes,