Angular 6 - httpClient passing basic auth in httpO

问题:

I have a service in Angular 6 and I'm trying to change a record but it's saying I'm not authorized.

Right now I have this:

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

  update(id, title, content) {
    const updateData = { id: id, title: title, content: content };
      return this.http.put(`http://myurl/${id}`, updateData, httpOptions);
  }

My question is:

How to I add basic authorization to my httpOptions or do I add it direct to the update method?

回答1:

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

回答2:

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

回答3:

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

回答4:

httpClient passing basic auth in httpOptions is different in Angular 6

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

const httpOptions = {
  headers: httpHeaders
};

update(id, title, content) {
    const updateData = { id: id, title: title, content: content };
      return this.http.put(`http://myurl/${id}`, updateData, httpOptions);
  }

回答5:

import { HttpClient, HttpHeaders } from '@angular/common/http';

var headers = new HttpHeaders();

var token = localStorage.getItem('token');

headers.append('Content-Type', 'application/json');

headers.append("Authorization", "Basic " + token));

const httpOptions = { headers: headers };

回答6:

const httpOptions = {
  headers: new HttpHeaders(
    {
      'Content-Type': 'application/json',
      'Authorization': `Basic ` + btoa('user:password'),
    }
  )
};


return this.http.post<any>(
      `apilink`,{},
      httpOptions
    ).pipe(map(res => {
      return res;
}));