在Angular6中将用户名和密码传递给REST API

我有两个API并执行以下步骤：

点击第一个API获取ID和令牌

使用ID、token作为用户名和密码，与请求主体一起点击第二个API

我已经尝试了太多的选项，它们似乎都可以很好地使用angular的旧版本

问题 当我进行第一次api调用（ping）时，它返回ID和令牌。我需要调用另一个api2，将其作为用户名和密码传递（我在POSTman中以用户名/密码的形式给出了这些返回值）。我也试着设置一些授权标题，但它不起作用，抛出401

我已经看过很多例子了，但这些都不符合角度的版本

我的http拦截器.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)
}
}

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

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



}

导出类AppModule{}

App.component.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)
}
}

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

 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>

方法1
方法2

您从这里获得参考..尝试过了，运气不好@VikasSo当您与Postman一起测试时，您的API工作正常？问题在于您的API或前端代码？如果您能分享您得到的错误以及有关后端的更多信息，这将非常有帮助。您使用的是express.js还是Spring boot？