Кутовий - встановлення заголовків для кожного запиту

Мені потрібно встановити деякі заголовки авторизації після входу користувача для кожного наступного запиту.

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

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 -в-кутовий-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 })
]);

Це повинно включати "Мій спеціальний заголовок" у кожному дзвінку.

Оновлення:

Щоб мати змогу змінити заголовок у будь-який час замість вищевказаного коду, ви також можете використати наступний код, щоб додати новий заголовок:

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

для видалення ви можете зробити

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

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

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

Наведене вище рішення все ще не є повністю дійсним у контексті typecript. _defaultHeaders захищений і не повинен використовуватися так. Я б рекомендував вищезазначене рішення для швидкого виправлення, але для довгого запуску краще написати власну обгортку навколо http-дзвінків, яка також обробляє auth. Візьміть наступний приклад з auth0, який є кращим і чистішим.

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

Оновлення - червень 2018 року. Я бачу, що багато людей ідуть на рішення, але я б порадив інакше. Примітка заголовка в усьому світі надсилатиме маркер автентифікації на кожен дзвінок api, що виходить із вашого додатка. Таким чином, виклики api, що надходять на сторонні плагіни, такі як домофон або zendesk або будь-який інший api, також матимуть ваш заголовок авторизації. Це може призвести до великих вад безпеки. Отже, використовуйте перехоплювач у всьому світі, але перевіряйте вручну, чи вихідний дзвінок спрямований до кінцевої точки api вашого сервера чи ні, а потім додайте заголовок auth.

Хоча я відповідаю на це дуже пізно, але це може допомогти комусь іншому. Для введення заголовків до всіх запитів, коли @NgModuleвони використовуються, можна зробити наступне:

(Я тестував це в кутовій 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, розширивши Httpпровайдера Angular 2 та просто замініть constructorта 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);
    };
  }
}

Потім налаштуйте свій основний так, 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/

Для кута 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 в якості постачальника для 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 {
}

Краще пізно, ніж ніколи ... =)

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

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/ є менший дублюваний код .

Зауважте, що в моєму випадку я використовую файли cookie для аутентифікації. Мені потрібен заголовок для 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 (або іншої).

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

Звичайно, ви можете екстерналізувати ці заголовки за типовими параметрами або будь-яким у вашому класі. Це в API-експорті 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