web-dev-qa-db-fra.com

Jeton porteur d'autorisation angulaire 5

Je ne comprends pas comment créer un bon en-tête pour une simple requête Get dans Angular 5. 

C’est ce que je dois faire dans Angular:  enter image description here

C'est ce que j'ai jusqu'ici: 

  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);         
  }

Voici la réponse dans mon console.log: 

{"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}

C'est joli. Mais me donne cette erreur

GET http: //druang.dd: 8080/user-list? _Format = json 403 (Interdit)

Il existe un autre indice pour résoudre ce mystère. Dans Sublime text, si je mets la souris sur opts, elle dit quelque chose comme: 

ERREUR dans src/app/services/userlist.service.ts (33,59): erreur TS2345: L'argument de type 'RequestOptions' n'est pas assignable au paramètre de type '{en-têtes ?: HttpHeaders | {[en-tête: chaîne]: chaîne | chaîne[]; }; observer ?: "corps"; params ?: Ht ... '. Types de biens 'en-têtes' sont incompatibles . Le type 'En-têtes' n'est pas assignable au type 'HttpHeaders | {[en-tête: chaîne]: chaîne | chaîne[]; } '. Le type 'En-têtes' n'est pas assignable au type '{[en-tête: chaîne]: chaîne | chaîne[]; } '. La signature d'index est manquante dans le type 'En-têtes'.

Toute idée ?? Voici le rapport complet Git Merci pour votre aide!

angularheaderauthorizationbearer-token
7
ValRob

Je vous suggérerais d'utiliser un HTTPInteceptor qui se chargerait de l'ajout du jeton. Voici un excellent article pour y parvenir: 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. -----

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

getLoggedInUser(auth_token): Observable<any> { const headers = new Headers({ 'Content-Type': 'application/json', 'Authorization': auth_token }) return this.http.get(apiUrl, { headers: headers }) }

Et n'oubliez pas d'appeler et de vous abonner à votre composant.

7
Nagy Gergő

Deux choses:

  1. headers.append(...) ne mute pas l'objet en-tête, votre en-tête d'autorisation n'est donc pas envoyé. Vous devez faire headers = headers.append(...) 

  2. Essayez this.http.get<UserList[]>(this.mainUrl, { headers: headers });

4
GreyBeardedGeek

J'ai utilisé le code suivant et ça marche

importer {HttpClient, HttpHeaders} à partir de '@ angular/common/http';

getServerList(){
    var reqHeader = new HttpHeaders({ 
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('mpManagerToken'))
     });
    return this.http.get<Server[]>(`${environment.apiUrl}/api/Servers/GetServerList`, { headers: reqHeader });
}
2
Hassan Rahman

Je ne suis pas très bon en programmation, mais avec un peu d'essais et d'échecs Si trouvé ceci: 

  getUserList(): Observable<UserList[]> {
    let tokenParse = JSON.parse(this.token)    
    // let myHeaders = new Headers();
    // myHeaders.set('Authorization', `Bearer ${tokenParse}`);
    // let options = new RequestOptions({ headers: myHeaders});
    const users = this.http.get<UserList[]>(this.mainUrl, { headers:new HttpHeaders().append('Authorization', `Bearer ${tokenParse}`)})
    // const users = this.http.get<UserList[]>(this.mainUrl, options);
    return users
            .catch(this.handleError.handleError);         
  }

Peu importe que j'utilise .set ou .append, en fin de compte, cela fonctionne dans les deux cas ... 

Je ne sais pas vraiment ce qui se passe, alors si quelqu'un veut l'expliquer dans les commentaires, vous êtes le bienvenu ... 

0
ValRob