Угловой - Установить заголовки для каждого запроса

Мне нужно установить некоторые заголовки авторизации после того, как пользователь вошел в систему, для каждого последующего запроса.

Чтобы установить заголовки для конкретного запроса,

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

Ссылка

Но было бы невозможно вручную установить заголовки запросов для каждого запроса таким образом.

Как установить заголовки после входа пользователя в систему, а также удалить эти заголовки при выходе?

Чтобы ответить на ваш вопрос, вы можете предоставить сервис, который оборачивает оригинальный Httpобъект из Angular. Нечто подобное описано ниже.

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

И вместо инъекции Httpобъекта вы можете добавить этот ( 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 );
    });
  }
}

Я также думаю, что что-то можно сделать, используя несколько провайдеров для Httpкласса, предоставив свой собственный класс, расширяющий Httpодин ... Смотрите эту ссылку: http://blog.thoughtram.io/angular2/2015/11/23/multi-providers -in-angular-2.html .

HTTP перехватчики теперь доступны через новый HttpClientиз @angular/common/http, в угловых версиях 4.3.x и за ее пределами .

Теперь довольно просто добавить заголовок для каждого запроса:

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

Существует принцип неизменности , поэтому запрос необходимо клонировать, прежде чем устанавливать на него что-то новое.

Поскольку редактирование заголовков является очень распространенной задачей, на самом деле для этого есть ярлык (при клонировании запроса):

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

После создания перехватчика, вы должны зарегистрировать его, используя HTTP_INTERCEPTORSпровайдера.

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

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

Расширение BaseRequestOptionsможет оказать большую помощь в этом сценарии. Проверьте следующий код:

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

Это должно включать «My-Custom-Header» в каждом вызове.

Обновить:

Чтобы иметь возможность изменить заголовок в любое время, вместо кода выше, вы также можете использовать следующий код для добавления нового заголовка:

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

удалить вы можете сделать

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

Также есть еще одна функция, которую вы можете использовать для установки значения:

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

Вышеупомянутое решение все еще не полностью верно в контексте машинописи. _defaultHeaders защищен и не должен использоваться таким образом. Я бы порекомендовал вышеупомянутое решение для быстрого исправления, но в долгосрочной перспективе лучше написать свою собственную оболочку для вызовов http, которая также обрабатывает аутентификацию. Возьмите следующий пример из auth0, который лучше и чище.

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

Обновление - июнь 2018 г. Я вижу, что многие люди выбирают это решение, но я бы посоветовал иначе. Добавление заголовка глобально будет отправлять токен авторизации на каждый вызов API, исходящий из вашего приложения. Поэтому вызовы API, передаваемые сторонним плагинам, таким как внутренняя связь, Zendesk или любой другой API, также будут содержать ваш заголовок авторизации. Это может привести к серьезному недостатку безопасности. Поэтому вместо этого используйте перехватчик глобально, но проверьте вручную, направлен ли исходящий вызов к конечной точке API вашего сервера, и затем присоедините заголовок аутентификации.

Хотя я отвечаю на это очень поздно, но это может помочь кому-то еще. Чтобы внедрить заголовки во все запросы, когда они @NgModuleиспользуются, можно сделать следующее:

(Я проверял это в 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');
    }
}

Теперь @NgModuleсделайте следующее:

@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]
})

В Angular 2.1.2Я подошел к этому, расширив угловую Http:

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

затем в моих провайдерах приложений я смог использовать собственную фабрику для предоставления 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(){

  }
}

Теперь мне не нужно объявлять каждый метод Http, и я могу использовать его httpкак обычно для всего приложения.

Создайте пользовательский класс Http, расширив Angular 2 HttpProvider, и просто переопределите метод constructorand requestв своем пользовательском классе Http. В приведенном ниже примере Authorizationзаголовок добавляется в каждый 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);
    };
  }
}

Затем настройте ваш main app.module.tsдля предоставления в XHRBackendкачестве ConnectionBackendпровайдера и RequestOptionsвашего пользовательского класса Http:

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

После этого вы можете теперь использовать свой собственный провайдер http в своих сервисах. Например:

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

Вот исчерпывающее руководство - http://adonespitogo.com/articles/angular-2-extending-http-provider/

Для Angular 5 и выше мы можем использовать HttpInterceptor для обобщения операций запроса и ответа. Это помогает нам избежать дублирования:

1) Общие заголовки

2) Указание типа ответа

3) Запрос запроса

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

Мы можем использовать этот класс AuthHttpInterceptor в качестве поставщика для HttpInterceptor:

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

Лучше поздно, чем никогда ... =)

Вы можете взять концепцию расширенного BaseRequestOptions(отсюда https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options ) и обновить заголовки «на лету». "(не только в конструкторе). Вы можете использовать переопределение свойства «заголовки» getter / setter следующим образом:

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

Так я делал для установки токена при каждом запросе.

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

И зарегистрируйтесь в app.module.ts

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

Вот улучшенная версия принятого ответа, обновленная для финала 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());
    }
}

Конечно, он должен быть расширен для таких методов, как deleteи putпри необходимости (они мне пока не нужны на данном этапе моего проекта).

Преимущество состоит в том, что в методах get/ post/ ... меньше дублирующегося кода .

Обратите внимание, что в моем случае я использую куки для аутентификации. Мне нужен заголовок для i18n ( Accept-Languageзаголовок), потому что многие значения, возвращаемые нашим API, переводятся на язык пользователя. В моем приложении сервис i18n содержит язык, выбранный пользователем.

Как насчет поддержания отдельного сервиса, как следует

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

и когда вы звоните это из другого места, используйте this.httpClientService.addHeader("Authorization", "Bearer " + this.tok);

и вы увидите добавленный заголовок, например: - Авторизация следующим образом

После некоторого расследования я обнаружил, что последний и самый простой способ - это расширение, BaseRequestOptionsкоторое я предпочитаю.
Ниже приведены способы, по которым я пытался и по какой-то причине отказаться:
1. расширить BaseRequestOptionsи добавить динамические заголовки constructor(). Это не может работать, если я войду. Он будет создан один раз. Так что это не динамично.
2. продлить Http. По той же причине, что и выше, я не могу добавить динамические заголовки в constructor(). И если я переписываю request(..)метод и устанавливаю заголовки, вот так:

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

Вам просто нужно переписать этот метод, но не все методы get / post / put.

3. И мое предпочтительное решение - расширить BaseRequestOptionsи переписать 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;
 }
}

эта merge()функция будет вызываться для каждого запроса.

Хотя я отвечаю на это очень поздно, но если кто-то ищет более простое решение.

Мы можем использовать angular2-jwt. angular2-jwt полезен для автоматического подключения веб-токена JSON (JWT) в качестве заголовка авторизации при выполнении HTTP-запросов из приложения Angular 2.

Мы можем установить глобальные заголовки с расширенной опцией конфигурации

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

И отправка за запрос токена вроде

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

Мне нравится идея переопределить параметры по умолчанию, это кажется хорошим решением.

Тем не менее, если вы собираетесь расширить Httpкласс. Обязательно прочитайте это до конца!

Некоторые ответы здесь на самом деле показывают неправильную перегрузку request()метода, что может привести к трудно обнаруживаемым ошибкам и странному поведению. Я наткнулся на это сам.

Это решение основано на request()реализации метода в Angular 4.2.x, но должно быть совместимым с будущим:

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;

  }

}

Обратите внимание, что я импортирую оригинальный класс таким образом import { Http as NgHttp } from '@angular/http';, чтобы предотвратить конфликт имен.

Проблема, решаемая здесь, состоит в том, что request()метод имеет две разные сигнатуры вызовов. Когда Requestобъект передается вместо URL string, этот optionsаргумент игнорируется Angular. Таким образом, оба случая должны быть правильно обработаны.

И вот пример того, как зарегистрировать этот переопределенный класс в контейнере 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
  );
}

При таком подходе вы можете вводить Httpкласс обычным способом, но вместо этого ваш переопределенный класс будет вводиться магическим образом. Это позволяет вам легко интегрировать ваше решение, не изменяя другие части приложения (полиморфизм в действии).

Просто добавьте httpProviderв providersсвойство метаданных вашего модуля.

Самый простой из всех

Создать config.tsфайл

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

Затем по вашему service, просто импортируйте config.tsфайл

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

Я думаю, что это было самым простым и самым безопасным.

Произошли некоторые изменения для угловых 2.0.1 и выше:

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

У меня есть возможность выбрать более простое решение> Добавить новые заголовки к параметрам слияния по умолчанию или загрузить с помощью вашей функции API (или другой).

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

Конечно, вы можете использовать этот заголовок в параметрах по умолчанию или в вашем классе. Это в сгенерированном Ionic API-интерфейсе класса экспорта api.ts @Injectable () {}

Это очень быстро, и это работает для меня. Я не хотел формат JSON / LD.

Вы можете использовать canActiveв своих маршрутах, например, так:

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

Взято из: https://auth0.com/blog/angular-2-authentication