Предъявителя маркер авторизации угловые 5

Я не знаю, как создать хороший заголовок для простого запроса Get в Angular 5.

Это то, что мне нужно сделать в Angular: Введите описание изображения здесь

Вот что у меня есть до сих пор: 

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

Это ответ в моей консоли.журнал: 

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

Выглядит красиво. Но дает мне эту ошибку

GET http://druang.dd: 8080 / список пользователей?_format=json 403 (запрещено)

Есть еще один ключ к разгадке этой тайны. В возвышенном тексте, Если я наведу курсор мыши на opts, он скажет что-то вроде:

Ошибка в src / app / services / userlist.обслуживание.ts (33,59): ошибка TS2345: Аргумент типа 'RequestOptions' не присваивается параметру тип ' {заголовки?: HttpHeaders / {[заголовок: строка]: строка | строка[]; }; наблюдать?: "тело"; парамы?: ХТ...". Типы свойств "заголовки" несовместимость. Тип 'Headers' не присваивается типу ' HttpHeaders | {[header: string]: string | string [];}'. Тип 'Headers' не присваивается типу ' {[header: string]: string | string [];}'. Подпись индекса отсутствует в типе "заголовки".

Есть идеи?? Вот полное git repo Спасибо за вашу помощь!

3 3
header authorization bearer-token

3 ответа:

Я бы предложил вам использовать HTTPInteceptor, который бы позаботился о добавлении маркера. Вот отличная статья, чтобы достичь этого: https://www.illucit.com/angular/en-angular-5-httpinterceptor-add-bearer-token-to-httpclient-requests/

----- Еще один способ решения проблемы. -----

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

И не забудьте позвонить и подписаться в вашем компоненте.

4

Две вещи:

  1. headers.append(...) не изменяет объект headers, поэтому заголовок авторизации не отправляется. Вам нужно это сделать headers = headers.append(...)

  2. Попробуй this.http.get<UserList[]>(this.mainUrl, { headers: headers });

2

Я не очень хорошо программирую,но с небольшим количеством попыток и неудач. если найдено это: 

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

На самом деле не имеет значения, использую ли я .set или .append, в конце концов, это работает в обоих случаях...

Я действительно не знаю, что происходит, так что, если кто-то хочет объяснить это в комментариях, пожалуйста...
0