передать имя пользователя и пароль в REST API в Angular6

Question

У меня есть два API, и я выполняю следующие шаги:

1. Нажав на первый API, чтобы получить ID и токен
2. Используя идентификатор, токен в качестве имени пользователя и пароля, чтобы попасть на второйAPI вместе с телом запроса

Я уже пробовал слишком много опций, и все они, кажется, работают нормально с более старыми версиями angular.

Проблема Когда я делаю первый вызов API (пинг), он возвращает идентификатор и токен.Мне нужно вызвать другой api2, передавая его как имя пользователя и пароль (я дал эти восстановленные значения как имя пользователя / пароль в POSTman).Я также попытался установить заголовок авторизации, но он не сработал и выдает 401

Я уже просмотрел много примеров, но они не соответствуют угловой версии

My-http-interceptor.ts

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

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
constructor() { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

console.log("intercepted request ... ");

// Clone the request to add the new header.

const authReq = req.clone({ headers: req.headers.set( 'Authorization', 'Basic dmlld2VyLTFAaXR0aWFtLmNvbTp2aWV3ZXIx')});
console.log("Sending request with new header    now ...");
//  console.log(authReq)
//send the newly created request
return next.handle(authReq)
}
}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyHttpInterceptor } from './my-http-interceptor'
import { AppComponent } from './app.component';

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule
],
providers: [
{
  provide: HTTP_INTERCEPTORS,
  useClass: MyHttpInterceptor,
  multi: true
}
],
bootstrap: [AppComponent]
})

класс экспорта AppModule {}

App.compoent.ts

 import { Component } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import {RequestOptions, Request, RequestMethod,Http,Headers} from '@angular/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  constructor(public http: HttpClient) {}

  public ping() {
    this.http.get('https://Api1.com')
      .subscribe(  
        data => console.log(data));}

   public api2(){
     this.http.get('https://Api2.com')
      .subscribe(  
         data => console.log(data));}
   }



}

app.component.html

<button (click)="ping()">Method 1</button>
<button (click)="api2()">Method 2</button>