Angular 2 интерцептор

1379
views

 

angular 2 интерцепторОдной из самых распространенных задач при разработке SPA (Single Page Application) является установка постоянных хедеров во всех http запросах к API. Например отправка jwt-токена в методах для авторизированного пользователя. Но в Angular 2 http — интерцепторы не поддерживаются, как это было в Angular первой версии. Как же все таки реализовать в одном месте настройку хедеров для всех запросов приложения? Об этом я расскажу далее.

С Angular 2 приложение теперь состоит из компонентов, и Http является одним из них. И так как глобально задавать настройки запросов нельзя, необходимо создать сервис, который будет оболочкой для Http компонента.

Создадим сервис

Для этого создадим файл http-client.ts.

В нем импортируем компоненты ангулара.

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

Создадим новый класс и укажем, что он может быть экспортирован.

@Injectable()
export class HttpClient {
  constructor(http: Http) {
    this.http = http;
  }
}

Чтобы сервис мог сам внедрять зависимости, необходимо добавлять декоратор @Injectable. Разработчики рекомендуют добавлять этот декоратор вообще для всех сервисов, так как никогда не знаешь, понадобится ли когда-нибудь зависимости внутри сервиса или нет.

Теперь добавим в него функцию, которая будет задавать заголовки (headers) к http запросам.

createAuthorizationHeader(headers:Headers) {
    headers.append('Authorization', 'Bearer ' + localStorage.getItem('Token'); //Вместо localStorage можно использовать сервис авторизации, с методом, который возвращает токен
  }

Теперь остается прописать методы, которые будут использоваться в дальнейшем. Например добавим методы GET и POST.

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

Так как в Angular 2 отправляемые данные должны быть строкой, а не объектом, то добавим в post метод преобразование объекта в строку.

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

Если необходимы другие методы (put, patch, delete и т.д.), то их можно добавить по аналогии с методом post из примера.

В итоге мы получим такой сервис:

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

@Injectable()
export class HttpClient {
  constructor(http: Http) {
    this.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, obj) {
    let headers = new Headers();
    let data = JSON.stringify(obj);
    this.createAuthorizationHeader(headers);
    return this.http.post(url, data, {
      headers: headers
    });
  }
}

Использование сервиса в компонентах

Теперь мы можем импортировать этот сервис вместо штатного ангуларовского http компонента. Выглядеть это будет примерно таким образом:

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

export classMyComponent {
  constructor(httpClient: HttpClient) {
    this.httpClient = httpClient;
  }

  handleSomething() {
    this.httpClient.post(url, data).subscribe(...);
  }
}

 Вывод

Добавив такой простой сервис в приложение, можно легко использовать API для авторизированных пользователей, не прописывая каждый раз заголовок с JWT-токеном. Помимо токена, в таком сервисе можно задать другие необходимые заголовки, например Content-Type.

Если вам полезен данный материал, подписывайтесь на мой блог, чтобы получать уведомления о новых публикациях на темы: верстки, javascript и разработки кроссплатформенных мобильных приложений.

Подписаться на блог по эл. почте