Как отправить токен JWT в качестве заголовка авторизации в angular 6 - PullRequest
Новая
       30

Как отправить токен JWT в качестве заголовка авторизации в angular 6

0 голосов
/ 23 сентября 2018

В настоящее время я использовал этот статический код в компонентном файле .ts, но этот не работает.Возвращает неавторизованным (401).Но когда я передаю токен как строку запроса, он работает нормально.Пожалуйста, дайте рабочий пример для файла компонента .ts. 

    import { HttpClient, HttpResponse ,HttpHeaders} from '@angular/common/http';


    var t=`eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTUzNzcxNTMyNSwiZXhwIjoxNTM3NzE4OTI1LCJuYmYiOjE1Mzc3MTUzMjUsImp0aSI6IlBKWVhnSkVyblQ0WjdLTDAiLCJzdWIiOjYsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.1vz5lwPlg6orzkBJijsbBNZrnFnUedsGJUs7BUs0tmM`;

    var headers_object = new HttpHeaders();
        headers_object.append('Content-Type', 'application/json');
        headers_object.append("Authorization", "Bearer " + t);

        const httpOptions = {
          headers: headers_object
        };


   this.http.post(
                  'http://localhost:8000/api/role/Post', {limit:10}, httpOptions
                 ).subscribe(resp => {
                  this.roles = console.log(resp)
                  }
                );

Ответы [ 3 ]

0 голосов
/ 23 сентября 2018

Проблема с вашим кодом в том, что класс HttpHeaders является неизменным, поэтому при вызове append он фактически возвращает новый экземпляр с указанным значением, но не изменяет исходный объект.

Попробуйте это 

var headers_object = new HttpHeaders().set("Authorization", "Bearer " + t);

Для Content-Type по умолчанию установлено значение json HttpClient

Если вам нужно отправить токен авторизации во всех вызовах API, то лучшеиспользуйте перехватчик, предложенный Мартином

0 голосов
/ 04 декабря 2018

Пожалуйста, создайте объект HttpHeaders как этот (вместо добавления), 

var t="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTUzNzcxNTMyNSwiZXhwIjoxNTM3NzE4OTI1LCJuYmYiOjE1Mzc3MTUzMjUsImp0aSI6IlBKWVhnSkVyblQ0WjdLTDAiLCJzdWIiOjYsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.1vz5lwPlg6orzkBJijsbBNZrnFnUedsGJUs7BUs0tmM";

    var headers_object = new HttpHeaders({
      'Content-Type': 'application/json',
       'Authorization': "Bearer "+t)
    });

        const httpOptions = {
          headers: headers_object
        };


   this.http.post(
                  'http://localhost:8000/api/role/Post', {limit:10}, httpOptions
                 ).subscribe(resp => {
                  this.roles = console.log(resp)
                  }
                );
0 голосов
/ 23 сентября 2018

Добавьте AuthInterceptor, который перехватит все ваши http-запросы и добавит токен к его заголовкам: 

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.token; // you probably want to store it in localStorage or something

    if (!token) {
      return next.handle(req);
    }

    const req1 = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`),
    });

    return next.handle(req1);
  }

}

Затем зарегистрируйте его в вашем AppModule: 

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

Подробнеео перехватчиках:

https://angular.io/guide/http#intercepting-requests-and-responses

...