Asked  7 Months ago    Answers:  5   Viewed   19 times

I need to set some Authorization headers after the user has logged in, for every subsequent request.


To set headers for a particular request,

import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);

// HTTP POST using these headers
this.http.post(url, data, {
  headers: headers
})
// do something with the response

Reference

But it would be not be feasible to manually set request headers for every request in this way.

How do I set the headers set once the user has logged in, and also remove those headers on logout?

 Answers

16

To answer, you question you could provide a service that wraps the original Http object from Angular. Something like described below.

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';

@Injectable()
export class HttpClient {

  constructor(private http: Http) {}

  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('username:password')); 
  }

  get(url) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.get(url, {
      headers: headers
    });
  }

  post(url, data) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.post(url, data, {
      headers: headers
    });
  }
}

And instead of injecting the Http object you could inject this one (HttpClient).

import { HttpClient } from './http-client';

export class MyComponent {
  // Notice we inject "our" HttpClient here, naming it Http so it's easier
  constructor(http: HttpClient) {
    this.http = httpClient;
  }

  handleSomething() {
    this.http.post(url, data).subscribe(result => {
        // console.log( result );
    });
  }
}

I also think that something could be done using multi providers for the Http class by providing your own class extending the Http one... See this link: http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html.

Tuesday, June 1, 2021
 
cusejuice
answered 7 Months ago
89

simple...

problem is with directives: ''

as its an array it should be directives: [ ]

Update: In RC6 OR later version, you have @NgModule. In RC6 OR later version, you have to declare pipes and directives that you are gonna use within @NgModule as shown...

import { PeopleListComponent } from './people-list/people-list.component';

@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent,PeopleListComponent ],  //<<===here
  providers:    [],      
  bootstrap:    [ AppComponent ]
})

You can remove directives:'' from @Component of AppComponent

Thursday, July 29, 2021
 
ALH
answered 5 Months ago
ALH
98

To set all FormGroup values use, setValue:

this.myFormGroup.setValue({
  formControlName1: myValue1, 
  formControlName2: myValue2
});

To set only some values, use patchValue:

this.myFormGroup.patchValue({
  formControlName1: myValue1, 
  // formControlName2: myValue2 (can be omitted)
});

With this second technique, not all values need to be supplied and fields whos values were not set will not be affected.

Saturday, July 31, 2021
 
Jens
answered 5 Months ago
65

I think that you need the Accept header rather because of the 406 status code...

let authToken = localStorage.getItem('auth_token');
let headers = new Headers({ 'Accept': 'application/json' });
headers.append('Authorization', `Bearer ${authToken}`);

let options = new RequestOptions({ headers: headers });
return this._http
  .get(this._url,options)
  .map(res => console.log(res));

This allows you to tell the server which content type you expect in the response...

The Content-Type header is rather to specify the type of the content you sent in the request. In your case, there is no content...

Sunday, September 19, 2021
 
Deyson
answered 3 Months ago
34

Instead of just passing the function reference use arrow functions to retain this

.map((res) => this.extractData(res))
Tuesday, November 2, 2021
 
Gerardo
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share