Angular 6 - httpClient passing basic auth in httpOptions

Looking at the angular.io documentation, it's pretty straightforward.

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'Basic my-auth-token'
  })
};

And you can use the httpOptions constant as you did.

For more information: https://angular.io/guide/http#adding-headers

PS: This is a method for small or quick apps if you want to build more robust apps, consider using an HTTP interceptor that automatically adds the Authorization header on the fly.


You can add basic authorization by appending it in headers, as below:

var headers_object = new HttpHeaders();
headers_object.append('Content-Type', 'application/json');
headers_object.append("Authorization", "Basic " + btoa("username:password"));

const httpOptions = {
  headers: headers_object
};

Just add your token/authorization in the headers like this -

let httpHeaders = new HttpHeaders()
              .set('authorization', this.authorizationHeaderValue)
              .set('Content-Type', application/json); 

Both have methods such as set and append. set constructs a new body with a new value and append constructs a new body with an appended value

PS: Here I am assuming the variable (this.authorizationHeaderValue) value is included value like Bearer or Basic or whatever needed, Change it accordingly.

For more read here

  • https://www.concretepage.com/angular-2/angular-httpclient-get-example#parameters