В этой статье объясняется, как реализовать токен обновления с помощью HttpInterceptor в новой платформе Angular.

В Angular версии 4.3 появилась самая долгожданная функция: интерфейс HttpInterceptor. До этой версии не было возможности изменить или перехватить HTTP-запрос глобально.

Чем полезны HTTP-перехватчики? HTTP-перехватчики используются для добавления настраиваемой логики для ведения журнала, изменения ответа, обработки ошибок, но одним из распространенных случаев является автоматическое присоединение информации аутентификации к запросу и обновление токена, чтобы поддерживать сеанс пользователя в активном состоянии.

Создать перехватчик

В этом руководстве предполагается, что в вашем приложении уже есть служба аутентификации и вы храните токен JWT в локальном хранилище.

Первый шаг - создать перехватчик. Для этого давайте создадим класс Injectable, который реализует HttpInterceptor и выявляет возможные ошибки.

// src/app/services/token-interceptor.service.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler,HttpEvent, HttpInterceptor } from '@angular/common/http';
import { AuthenticationService } from '../authentication.service';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class RefreshTokenInterceptor implements HttpInterceptor {

  constructor(public auth: AuthenticationService) {}

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

    return next.handle(request)
       .catch(error => {
           return Observable.throw(error);
       });
    }
}

Я хочу упомянуть, что вы должны использовать новый HttpClient, импортированный из @ angular / common / http, потому что старый http-клиент не запускает HttpInterceptor.

Поиск неавторизованных ответов

Когда срок действия токена доступа истекает, обычно сервер отправляет ответ 401 Unauthorized. В этом случае нам нужно снова войти в систему пользователя, чтобы продолжить использование приложения с новым токеном доступа.

Во избежание рекурсии важно проверить, не является ли неудачный запрос самим запросом токена обновления. Кроме того, нам нужно проверить, выполняется ли запрос токена обновления или нет, потому что мы не хотим, чтобы другие вызовы приходили и вызывали refreshToken снова. Другие важные шаги прокомментированы в коде:

Заключение

Новый HttpInterceptor - это мощная и полезная функция, и это лучшее место, где мы можем перехватывать и / или изменять исходящие запросы или входящие ответы.