HTTP Client Request for an AWS API Gateway

Question

I have an angular frontend using typescript and I am trying to make a http request to a AWS API-Gateway. Now the problem is, I need to write the following javascript code as typescript code and send a http request but I do not know how.

The Request to the AWS API gateway needs an AWS Cognito jwtToken (in this case its "accessToken"). I also need to pass the "type", which is the name of the function to be executed on the API (in this case 'POST'). I also need to pass a string which chooses what data I receive.

Auth.currentSession().then(tok => {
      const accessToken = tok.getIdToken().getJwtToken();
      console.log('from floorview: ' + accessToken);

      function requestItem(source) {

        $.ajax({
          type: 'POST',
          url: 'https://XXXXXXXXXX.execute-api.eu-central-1.amazonaws.com/prop/dashboard',
          headers: {
            Authorization: accessToken
          },
          data: JSON.stringify({
            Source: source.toString(),
            tableName: 'h16b-testset',
            operation: 'read'
          }),
          dataType: 'json',
          contentType: 'application/json',
          success: completeRequest,
          error: function ajaxError(jqXHR, textStatus, errorThrown) {
            console.error('Error requesting ride: ', textStatus, ', Details: ', errorThrown);
            console.error('Response: ', jqXHR.responseText);
            alert('An error occured when requesting your unicorn:\n' + jqXHR.responseText);
          }
        }).then(r => console.log(r));
      }

      requestItem(996);

      function completeRequest(result) {
        console.log('Response received from API: ', result);
      }

    });
  }

Now my problem is, how do I write this javascript code as typescript code while using angulars HTTPClient. If there is another method then please tell me. I always get 401s or 403s when I try to run this code using an HTTPClient.

Auth.currentSession().then(tok => {
      const accessToken = tok.getAccessToken();
      const jwt = accessToken.getJwtToken();

      this.authKey = jwt;


      const params = new HttpParams().set('Source', '996');
      params.append('tableName', 'h16b-testset');
      params.append('operation', 'read');
      const headers = new HttpHeaders().set('Authorization', this.authKey);
      headers.append('content-type', 'application/json');

      this.http.request(
        'POST',
        'https://XXXXXXXX.execute-api.eu-central-1.amazonaws.com/prop/dashboard',
        {
          headers,

          responseType: 'json'
        }
      ).subscribe(
        res => {
          console.log('hallo' + res);
        },
        err => {
          console.log('error occured with httpclient: ' + err.message);
        }
      );
    });

Answer 1

You can write something like the following (using concatMap operator):

import { from } from 'rxjs';
import { concatMap } from 'rxjs/operators';

export class AuthService {

  constructor(private http: HttpClient) {
    from(Auth.currentSession())
    .pipe(concatMap(tok => this.requestItem(tok, 996)))
    .subscribe(
        result => console.log('Response received from API: ', result),
        err => {
          console.log('error occured with httpclient: ' + err.message);
        }
     );
  }

  requestItem(token, source) : Observable<any> {
    this.http.post(url, {
            Source: source.toString(),
            tableName: 'h16b-testset',
            operation: 'read'
          }, 
         headers,
         params
    );
  }
}

Answer 2

Rewrite your http client as:

    this.http.post(
          'https://XXXXXXXX.execute-api.eu-central-1.amazonaws.com/prop/dashboard',
          {
            Source: '<id>',
            tableName: 'h16b-testset',
            operation: 'read'
          },
          {
              headers: new HttpHeaders({'Content-type': 'application/json', 'Authorization': '<token>'})
          }
    ).subscribe(res=> console.log(res), failure => console.error(failure))

This way you will send source in body of request and with authorization token in header.

For more info about HttpClient please see https://angular.io/guide/http .