Заголовок авторизации добавлен неправильно

Question

Я работаю с JWT и успешно создал приложение Express, которое хорошо справляется с ними, проверено с помощью Postman.Затем я отправился на фронтенд Angular 7 и наткнулся на проблему.Я успешно добавляю заголовки, но они не отображаются в реальном запросе:

Я регистрирую заголовки и вижу, что они установлены:

Но когда я смотрю на запрос, он не появляется:

Мой код выглядит так:

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private baseUrl = environment.apiUrl;

  constructor(private http: Http,
              private auth: AuthService) { }

  get(url: string) {
    return this.request(url, RequestMethod.Get);
  }

  post(url: string, body: Object) {
    return this.request(url, RequestMethod.Post, body);
  }

  put(url: string, body: Object) {
    return this.request(url, RequestMethod.Put, body);
  }

  delete(url: string) {
    return this.request(url, RequestMethod.Delete);
  }

  request(url: string, method: RequestMethod, body?: Object) {
  let headers = new Headers()
  headers.append('Content-Type', 'application/json');
  headers.append('Authorization', `Bearer ${this.auth.getToken()}`);

  console.log(headers);

  const requestOptions = new RequestOptions({
    url: `${this.baseUrl}/${url}`,
    method: method,
    headers: headers
  });

  if (body) {
    requestOptions.body = body;
  }

  const request = new Request(requestOptions);

  return this.http.request(request)
    .pipe(map((res: Response) => res.json()))
    .pipe(catchError((res: Response) => this.onRequestError(res)));
}

onRequestError(res: Response) {
  const statusCode = res.status;
  const body = res.json();


  const error = {
    statusCode: statusCode,
    error: body.error
  };

  console.log(error);

  return observaleThrowError(error || "Server error");
}
}

LoginComponent:

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  email: string;

  constructor(public api: ApiService,
    private auth: AuthService,
    private router: Router) { }

  ngOnInit() {
  }

  onSubmit(form: NgForm) {
    const values = form.value;

    const payload = {
      username: values.username,
      password: values.password
    }

    this.api.post('authenticate', payload).subscribe(data => {
      this.auth.setToken(data.token);
      this.router.navigate(['/contacts']);
    })
  }
}

Опять же, все работает отлично с Почтальоном.Любая идея о том, что идет не так?

Answer 1

Для аутентификации JWT в приложении Angular я предлагаю вам использовать перехватчики.

Вы определяете свой перехватчик так:

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

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
     intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     // add authorization header with jwt token if available
     const currentUser = JSON.parse(String(localStorage.getItem('currentUser')));
     if (currentUser && currentUser.Token) {
         request = request.clone({
         setHeaders: {
             Authorization: `Bearer ${currentUser.Token}`
         }
      });
      }
      return next.handle(request);
   }
}

В основном, что он делает, он использует сохраненный токен JWTв ваших клиентах localStorage и отправляет его с каждым HTTP-запросом на ваш бэкэнд.

Тогда вам просто нужно зарегистрировать его в себе app.module.ts

providers: [
  HttpClient,
  {
     provide: HTTP_INTERCEPTORS,
     useClass: JwtInterceptor,
     multi: true
  }
]