Angular - Defina cabeçalhos para cada solicitação

Preciso definir alguns cabeçalhos de autorização após o login do usuário, para cada solicitação subseqüente.

Para definir cabeçalhos para uma solicitação específica,

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

Referência

Mas não seria viável definir manualmente cabeçalhos de solicitação para cada solicitação dessa maneira.

Como definir os cabeçalhos depois que o usuário efetuar login e também removê-los no logout?

Para responder, você pergunta que poderia fornecer um serviço que agrupa o Httpobjeto original do Angular. Algo como descrito abaixo.

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

E em vez de injetar o Httpobjeto, você pode injetar este ( 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 );
    });
  }
}

Eu também acho que algo poderia ser feito usando vários provedores para a Httpclasse, fornecendo sua própria classe estendendo a Http... Consulte este link: http://blog.thoughtram.io/angular2/2015/11/23/multi-providers -em-angular-2.html .

Os interceptores HTTP agora estão disponíveis através do novo HttpClientfrom @angular/common/http, a partir das versões Angular 4.3.x e além .

É muito simples adicionar um cabeçalho para cada solicitação agora:

import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';

export class AddHeaderInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Clone the request to add the new header
    const clonedRequest = req.clone({ headers: req.headers.set('Authorization', 'Bearer 123') });

    // Pass the cloned request instead of the original request to the next handle
    return next.handle(clonedRequest);
  }
}

Existe um princípio de imutabilidade , é por isso que a solicitação precisa ser clonada antes de definir algo novo.

Como editar cabeçalhos é uma tarefa muito comum, na verdade há um atalho para ele (ao clonar a solicitação):

const clonedRequest = req.clone({ setHeaders: { Authorization: 'Bearer 123' } });

Depois de criar o interceptador, você deve registrá-lo usando o HTTP_INTERCEPTORSfornecimento.

import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AddHeaderInterceptor,
    multi: true,
  }],
})
export class AppModule {}

A extensão BaseRequestOptionspode ser de grande ajuda nesse cenário. Confira o seguinte código:

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, Headers, Http, BaseRequestOptions} from 'angular2/http';

import {AppCmp} from './components/app/app';


class MyRequestOptions extends BaseRequestOptions {
  constructor () {
    super();
    this.headers.append('My-Custom-Header','MyCustomHeaderValue');
  }
} 

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(RequestOptions, { useClass: MyRequestOptions })
]);

Isso deve incluir 'Meu cabeçalho personalizado' em todas as chamadas.

Atualizar:

Para poder alterar o cabeçalho a qualquer momento, em vez do código acima, você também pode usar o código a seguir para adicionar um novo cabeçalho:

this.http._defaultOptions.headers.append('Authorization', 'token');

para excluir você pode fazer

this.http._defaultOptions.headers.delete('Authorization');

Também há outra função que você pode usar para definir o valor:

this.http._defaultOptions.headers.set('Authorization', 'token');

A solução acima ainda não é completamente válida no contexto datilografado. _defaultHeaders está protegido e não deve ser usado assim. Eu recomendaria a solução acima para uma solução rápida, mas, a longo prazo, é melhor escrever seu próprio wrapper em torno de chamadas http, que também lida com auth. Veja o exemplo a seguir de auth0, que é melhor e limpo.

https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts

Atualização - junho de 2018 Vejo muitas pessoas optando por esta solução, mas aconselho o contrário. Anexar cabeçalho globalmente enviará o token de autenticação para todas as chamadas da API que saem do seu aplicativo. Portanto, as chamadas da API que acessam plugins de terceiros, como interfone ou zendesk ou qualquer outra API, também carregam seu cabeçalho de autorização. Isso pode resultar em uma grande falha de segurança. Então, em vez disso, use o interceptador globalmente, mas verifique manualmente se a chamada de saída está direcionada para o terminal da API do servidor ou não e, em seguida, anexe o cabeçalho de autenticação.

Embora eu esteja respondendo muito tarde, isso pode ajudar outra pessoa. Para injetar cabeçalhos em todas as solicitações quando@NgModule usado, pode-se fazer o seguinte:

(Eu testei isso no Angular 2.0.1)

/**
 * Extending BaseRequestOptions to inject common headers to all requests.
 */
class CustomRequestOptions extends BaseRequestOptions {
    constructor() {
        super();
        this.headers.append('Authorization', 'my-token');
        this.headers.append('foo', 'bar');
    }
}

Agora, @NgModulefaça o seguinte:

@NgModule({
    declarations: [FooComponent],
    imports     : [

        // Angular modules
        BrowserModule,
        HttpModule,         // This is required

        /* other modules */
    ],
    providers   : [
        {provide: LocationStrategy, useClass: HashLocationStrategy},
        // This is the main part. We are telling Angular to provide an instance of
        // CustomRequestOptions whenever someone injects RequestOptions
        {provide: RequestOptions, useClass: CustomRequestOptions}
    ],
    bootstrap   : [AppComponent]
})

Em Angular 2.1.2eu aproximei isso estendendo o Http angular:

import {Injectable} from "@angular/core";
import {Http, Headers, RequestOptionsArgs, Request, Response, ConnectionBackend, RequestOptions} from "@angular/http";
import {Observable} from 'rxjs/Observable';

@Injectable()
export class HttpClient extends Http {

  constructor(protected _backend: ConnectionBackend, protected _defaultOptions: RequestOptions) {

    super(_backend, _defaultOptions);
  }

  _setCustomHeaders(options?: RequestOptionsArgs):RequestOptionsArgs{
    if(!options) {
      options = new RequestOptions({});
    }
    if(localStorage.getItem("id_token")) {

      if (!options.headers) {

        options.headers = new Headers();


      }
      options.headers.set("Authorization", localStorage.getItem("id_token"))
    }
    return options;
  }


  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    options = this._setCustomHeaders(options);
    return super.request(url, options)
  }
}

então, em meus fornecedores de aplicativos, pude usar uma fábrica personalizada para fornecer 'Http'

import { RequestOptions, Http, XHRBackend} from '@angular/http';
import {HttpClient} from './httpClient';
import { RequestOptions, Http, XHRBackend} from '@angular/http';
import {HttpClient} from './httpClient';//above snippet

function httpClientFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions): Http {
  return new HttpClient(xhrBackend, requestOptions);
}

@NgModule({
  imports:[
    FormsModule,
    BrowserModule,
  ],
  declarations: APP_DECLARATIONS,
  bootstrap:[AppComponent],
  providers:[
     { provide: Http, useFactory: httpClientFactory, deps: [XHRBackend, RequestOptions]}
  ],
})
export class AppModule {
  constructor(){

  }
}

agora não preciso declarar todos os métodos Http e posso usá- httplos normalmente em todo o meu aplicativo.

Crie uma classe Http personalizada estendendo o Httpprovedor Angular 2 e simplesmente substitua o método constructore requestna sua classe Http personalizada. O exemplo abaixo adiciona Authorizationcabeçalho em cada solicitação http.

import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpService extends Http {

  constructor (backend: XHRBackend, options: RequestOptions) {
    let token = localStorage.getItem('auth_token'); // your custom token getter function here
    options.headers.set('Authorization', `Bearer ${token}`);
    super(backend, options);
  }

  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    let token = localStorage.getItem('auth_token');
    if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
      if (!options) {
        // let's make option object
        options = {headers: new Headers()};
      }
      options.headers.set('Authorization', `Bearer ${token}`);
    } else {
    // we have to add the token to the url object
      url.headers.set('Authorization', `Bearer ${token}`);
    }
    return super.request(url, options).catch(this.catchAuthError(this));
  }

  private catchAuthError (self: HttpService) {
    // we have to pass HttpService's own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }
}

Em seguida, configure seu main app.module.tspara fornecer XHRBackendcomo o ConnectionBackendprovedor e a RequestOptionssua classe Http personalizada:

import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { HttpService } from './services/http.service';
...
@NgModule({
  imports: [..],
  providers: [
    {
      provide: HttpService,
      useFactory: (backend: XHRBackend, options: RequestOptions) => {
        return new HttpService(backend, options);
      },
      deps: [XHRBackend, RequestOptions]
    }
  ],
  bootstrap: [ AppComponent ]
})

Depois disso, agora você pode usar seu provedor http personalizado em seus serviços. Por exemplo:

import { Injectable }     from '@angular/core';
import {HttpService} from './http.service';

@Injectable()
class UserService {
  constructor (private http: HttpService) {}

  // token will added automatically to get request header
  getUser (id: number) {
    return this.http.get(`/users/${id}`).map((res) => {
      return res.json();
    } );
  }
}

Aqui está um guia completo - http://adonespitogo.com/articles/angular-2-extending-http-provider/

Para o Angular 5 e superior, podemos usar o HttpInterceptor para generalizar as operações de solicitação e resposta. Isso nos ajuda a evitar duplicar:

1) Cabeçalhos comuns

2) Especificando o tipo de resposta

3) Solicitação de consulta

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {

  requestCounter: number = 0;
  constructor() {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      responseType: 'json',
      setHeaders: {
        Authorization: `Bearer token_value`,
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    });

    return next.handle(request).do((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // do stuff with response if you want
      }
    }, (err: any) => {
      if (err instanceof HttpErrorResponse) {
        // do stuff with response error if you want
      }
    });
  }
}

Podemos usar esta classe AuthHttpInterceptor como um provedor para os HttpInterceptors:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing-module';
import { AuthHttpInterceptor } from './services/auth-http.interceptor';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true
    }
  ],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Antes tarde do que nunca ... =)

Você pode adotar o conceito de extended BaseRequestOptions(a partir daqui https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options ) e atualizar os cabeçalhos "on the fly "(não apenas no construtor). Você pode usar a substituição de propriedade "cabeçalhos" getter / setter da seguinte maneira:

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

@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions {

    private superHeaders: Headers;

    get headers() {
        // Set the default 'Content-Type' header
        this.superHeaders.set('Content-Type', 'application/json');

        const token = localStorage.getItem('authToken');
        if(token) {
            this.superHeaders.set('Authorization', `Bearer ${token}`);
        } else {
            this.superHeaders.delete('Authorization');
        }
        return this.superHeaders;
    }

    set headers(headers: Headers) {
        this.superHeaders = headers;
    }

    constructor() {
        super();
    }
}

export const requestOptionsProvider = { provide: RequestOptions, useClass: DefaultRequestOptions };

Foi assim que eu fiz para definir o token com cada solicitação.

import { RequestOptions, BaseRequestOptions, RequestOptionsArgs } from '@angular/http';

export class CustomRequestOptions extends BaseRequestOptions {

    constructor() {
        super();
        this.headers.set('Content-Type', 'application/json');
    }
    merge(options?: RequestOptionsArgs): RequestOptions {
        const token = localStorage.getItem('token');
        const newOptions = super.merge(options);
        if (token) {
            newOptions.headers.set('Authorization', `Bearer ${token}`);
        }

        return newOptions;
    }
}

E registre-se em app.module.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Aqui está uma versão aprimorada da resposta aceita, atualizada para a final do Angular2:

import {Injectable} from "@angular/core";
import {Http, Headers, Response, Request, BaseRequestOptions, RequestMethod} from "@angular/http";
import {I18nService} from "../lang-picker/i18n.service";
import {Observable} from "rxjs";
@Injectable()
export class HttpClient {

    constructor(private http: Http, private i18n: I18nService ) {}

    get(url:string):Observable<Response> {
        return this.request(url, RequestMethod.Get);
    }

    post(url:string, body:any) {   
        return this.request(url, RequestMethod.Post, body);
    }

    private request(url:string, method:RequestMethod, body?:any):Observable<Response>{

        let headers = new Headers();
        this.createAcceptLanguageHeader(headers);

        let options = new BaseRequestOptions();
        options.headers = headers;
        options.url = url;
        options.method = method;
        options.body = body;
        options.withCredentials = true;

        let request = new Request(options);

        return this.http.request(request);
    }

    // set the accept-language header using the value from i18n service that holds the language currently selected by the user
    private createAcceptLanguageHeader(headers:Headers) {

        headers.append('Accept-Language', this.i18n.getCurrentLang());
    }
}

É claro que deve ser estendido para métodos como deletee, putse necessário (ainda não os necessito neste momento do meu projeto).

A vantagem é que há menos código duplicado nos métodos get/ post/ ....

Observe que, no meu caso, eu uso cookies para autenticação. Eu precisava do cabeçalho para i18n (o Accept-Languagecabeçalho) porque muitos valores retornados por nossa API são traduzidos no idioma do usuário. No meu aplicativo, o serviço i18n contém o idioma atualmente selecionado pelo usuário.

Que tal Manter um Serviço Separado, como segue

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


            @Injectable()
            export class HttpClientService extends RequestOptions {

                constructor(private requestOptionArgs:RequestOptions) {
                    super();     
                }

                addHeader(headerName: string, headerValue: string ){
                    (this.requestOptionArgs.headers as Headers).set(headerName, headerValue);
                }
            }

e quando você chama isso de outro lugar, use this.httpClientService.addHeader("Authorization", "Bearer " + this.tok);

e você verá o cabeçalho adicionado, por exemplo: - Autorização da seguinte forma

Após alguma investigação, achei a maneira final e mais fácil de estender a BaseRequestOptionsque prefiro.
A seguir, apresentamos as maneiras pelas quais tentei desistir por algum motivo:
1. estenda BaseRequestOptionse inclua cabeçalhos dinâmicos constructor(). Não pode funcionar se eu entrar. Será criado uma vez. Portanto, não é dinâmico.
2. estender Http. Mesmo motivo acima, não consigo adicionar cabeçalhos dinâmicos constructor(). E se eu reescrever o request(..)método e definir cabeçalhos, assim:

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
 let token = localStorage.getItem(AppConstants.tokenName);
 if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
  if (!options) {
    options = new RequestOptions({});
  }
  options.headers.set('Authorization', 'token_value');
 } else {
  url.headers.set('Authorization', 'token_value');
 }
 return super.request(url, options).catch(this.catchAuthError(this));
}

Você só precisa sobrescrever esse método, mas nem todos os métodos get / post / put.

3.E minha solução preferida é estender BaseRequestOptionse substituir merge():

@Injectable()
export class AuthRequestOptions extends BaseRequestOptions {

 merge(options?: RequestOptionsArgs): RequestOptions {
  var newOptions = super.merge(options);
  let token = localStorage.getItem(AppConstants.tokenName);
  newOptions.headers.set(AppConstants.authHeaderName, token);
  return newOptions;
 }
}

essa merge()função será chamada para cada solicitação.

Embora eu esteja respondendo isso muito tarde, mas se alguém estiver procurando uma solução mais fácil.

Podemos usar angular2-jwt. angular2-jwt é útil anexar automaticamente um JSON Web Token (JWT) como um cabeçalho de autorização ao fazer solicitações HTTP de um aplicativo Angular 2.

Podemos definir cabeçalhos globais com opção de configuração avançada

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
    tokenName: 'token',
        tokenGetter: (() => sessionStorage.getItem('token')),
        globalHeaders: [{'Content-Type':'application/json'}],
    }), http, options);
}

E enviando por token de solicitação como

    getThing() {
  let myHeader = new Headers();
  myHeader.append('Content-Type', 'application/json');

  this.authHttp.get('http://example.com/api/thing', { headers: myHeader })
    .subscribe(
      data => this.thing = data,
      err => console.log(error),
      () => console.log('Request Complete')
    );

  // Pass it after the body in a POST request
  this.authHttp.post('http://example.com/api/thing', 'post body', { headers: myHeader })
    .subscribe(
      data => this.thing = data,
      err => console.log(error),
      () => console.log('Request Complete')
    );
}

Eu gosto da ideia de substituir as opções padrão, essa parece ser uma boa solução.

No entanto, se você estiver disposto a estender o Http classe. Não deixe de ler isso!

Algumas respostas aqui estão realmente mostrando sobrecarga incorreta de request() método, o que pode levar a erros difíceis de capturar e comportamento estranho. Eu já me deparei com isso.

Esta solução é baseada na request()implementação do método em Angular 4.2.x, mas deve ser compatível com o futuro:

import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';

import {
  ConnectionBackend, Headers,
  Http as NgHttp,
  Request,
  RequestOptions,
  RequestOptionsArgs,
  Response,
  XHRBackend
} from '@angular/http';


import {AuthenticationStateService} from '../authentication/authentication-state.service';


@Injectable()
export class Http extends NgHttp {

  constructor (
    backend: ConnectionBackend,
    defaultOptions: RequestOptions,
    private authenticationStateService: AuthenticationStateService
  ) {
    super(backend, defaultOptions);
  }


  request (url: string | Request, options?: RequestOptionsArgs): Observable<Response> {

    if ('string' === typeof url) {

      url = this.rewriteUrl(url);
      options = (options || new RequestOptions());
      options.headers = this.updateHeaders(options.headers);

      return super.request(url, options);

    } else if (url instanceof Request) {

      const request = url;
      request.url = this.rewriteUrl(request.url);
      request.headers = this.updateHeaders(request.headers);

      return super.request(request);

    } else {
      throw new Error('First argument must be a url string or Request instance');
    }

  }


  private rewriteUrl (url: string) {
    return environment.backendBaseUrl + url;
  }

  private updateHeaders (headers?: Headers) {

    headers = headers || new Headers();

    // Authenticating the request.
    if (this.authenticationStateService.isAuthenticated() && !headers.has('Authorization')) {
      headers.append('Authorization', 'Bearer ' + this.authenticationStateService.getToken());
    }

    return headers;

  }

}

Observe que estou importando a classe original dessa maneira import { Http as NgHttp } from '@angular/http'; para evitar conflitos de nome.

O problema abordado aqui é que o request()método possui duas assinaturas de chamada diferentes. Quando o Requestobjeto é passado em vez da URL string, o optionsargumento é ignorado pelo Angular. Portanto, os dois casos devem ser tratados adequadamente.

E aqui está o exemplo de como registrar essa classe substituída no contêiner DI:

export const httpProvider = {
  provide: NgHttp,
  useFactory: httpFactory,
  deps: [XHRBackend, RequestOptions, AuthenticationStateService]
};


export function httpFactory (
  xhrBackend: XHRBackend,
  requestOptions: RequestOptions,
  authenticationStateService: AuthenticationStateService
): Http {
  return new Http(
    xhrBackend,
    requestOptions,
    authenticationStateService
  );
}

Com essa abordagem, você pode injetar Httpclasse normalmente, mas sua classe substituída será injetada magicamente. Isso permite que você integre sua solução facilmente, sem alterar outras partes do aplicativo (polimorfismo em ação).

Basta adicionar httpProviderà providerspropriedade dos metadados do seu módulo.

O mais simples de todos

Crie um config.tsarquivo

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

export class Config {
    url: string = 'http://localhost:3000';
    httpOptions: any = {
        headers: new HttpHeaders({
           'Content-Type': 'application/json',
           'Authorization': JSON.parse(localStorage.getItem('currentUser')).token
        })
    }
}

Em seguida, no seu service, basta importar o config.tsarquivo

import { Config } from '../config';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class OrganizationService {
  config = new Config;

  constructor(
    private http: HttpClient
  ) { }

  addData(data): Observable<any> {
     let sendAddLink = `${this.config.url}/api/addData`;

     return this.http.post(sendAddLink , data, this.config.httpOptions).pipe(
       tap(snap => {
      return snap;
        })
    );
 } 

Eu acho que foi o mais simples e o mais seguro.

Houve algumas alterações no angular 2.0.1 e superior:

    import {RequestOptions, RequestMethod, Headers} from '@angular/http';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpModule }     from '@angular/http';
    import { AppRoutingModule } from './app.routing.module';   
    import { AppComponent }  from './app.component';

    //you can move this class to a better place
    class GlobalHttpOptions extends RequestOptions {
        constructor() { 
          super({ 
            method: RequestMethod.Get,
            headers: new Headers({
              'MyHeader': 'MyHeaderValue',
            })
          });
        }
      }

    @NgModule({

      imports:      [ BrowserModule, HttpModule, AppRoutingModule ],
      declarations: [ AppComponent],
      bootstrap:    [ AppComponent ],
      providers:    [ { provide: RequestOptions, useClass: GlobalHttpOptions} ]
    })

    export class AppModule { }

Consegui escolher uma solução mais simples> Adicionar novos cabeçalhos às opções padrão mesclar ou carregar por sua função api get (ou outra).

get(endpoint: string, params?: any, options?: RequestOptions) {
  if (!options) {
    options = new RequestOptions();
    options.headers = new Headers( { "Accept": "application/json" } ); <<<<
  }
  // [...] 
}

Claro que você pode externalizar esses cabeçalhos nas opções padrão ou em qualquer outra classe da sua classe. Isso está na API de classe de exportação api.ts @Injectable () gerada pelo Ionic {}

É muito rápido e funciona para mim. Eu não queria o formato json / ld.

Você pode usar canActiveem suas rotas, assim:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService, private router: Router) {}

  canActivate() {
    // If user is not logged in we'll send them to the homepage 
    if (!this.auth.loggedIn()) {
      this.router.navigate(['']);
      return false;
    }
    return true;
  }

}

const appRoutes: Routes = [
  {
    path: '', redirectTo: '/deals', pathMatch: 'full'
  },
  {
    path: 'special',
    component: PrivateDealsComponent,
    /* We'll use the canActivate API and pass in our AuthGuard.
       Now any time the /special route is hit, the AuthGuard will run
       first to make sure the user is logged in before activating and
       loading this route. */
    canActivate: [AuthGuard]
  }
];

Retirado de: https://auth0.com/blog/angular-2-authentication