Angular: авторизация, рефрешим токен и HttpInterceptor

Начнем с конфигурации Interceptor`ов:

//core.module.ts
//imports....

@NgModule({
  providers: [
    AuthService,
    {
      provide: HTTP_INTERCEPTORS,
      // Этим interceptor`ом будем добавлять auth header
      useClass: ApplyTokenInterceptor,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      // этим будем соответственно рефрешить
      useClass: RefreshTokenInterceptor,
      multi: true
    }
  ],
  exports: [HttpClientModule]
})

export class CoreModule {
  //@Optional() @SkipSelf() - если вдруг мы попытаемся импортировать CoreModule в AppModule и например UserModule - получим ошибку
  constructor(@Optional() @SkipSelf() parentModule: CoreModule,
    userService: UserService,
    inj: Injector,
    auth: AuthService,
    http: HttpClient) {

    //Получаем интерцепторы которые реализуют интерфейс AuthInterceptor
    let interceptors = inj.get<AuthInterceptor[]>(HTTP_INTERCEPTORS)
      .filter(i => { return i.init; });
    //передаем http сервис и сервис авторизации.
    interceptors.forEach(i => i.init(http, auth));

    userService.init();

    if (parentModule) {
      //если мы здесь, значит случайно включили CoreModule в двух и более местах
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }
}

export interface AuthInterceptor {
    init(http: HttpClient, auth: AuthRefreshProvider);
}

export const HTTP_INTERCEPTORS = new InjectionToken<HttpInterceptor[]>('HTTP_INTERCEPTORS');

@Injectable()
export class ApplyTokenInterceptor implements HttpInterceptor, AuthInterceptor {

    //circular dependency Error! 
    public constructor(private http: HttpClient) {
		//....
    }
	
	//....
}

@Injectable()
export class ApplyTokenInterceptor implements HttpInterceptor, AuthInterceptor {
    public constructor(private injector: Injector) {
		//circular dependency Error! 
		injector.get(HttpClient);
    }
	
	//....
}

//auth.service.ts
export class AuthService implements AuthRefreshProvider {
    constructor(client: HttpClient) { }
}

//apply.interceptor.ts
export class ApplyTokenInterceptor implements HttpInterceptor, AuthInterceptor {
    //circular dependency Error! потому, что AuthService имеет зависимость с HttpClient
    public constructor(private auth: AuthService ) { }
}

@Injectable()
export class ApplyTokenInterceptor implements HttpInterceptor, AuthInterceptor {

  private http: HttpClient;

  constructor(private injector: Injector) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    //забираем HttpClient в при каждом перехвате запроса
    if (!http) {
      this.http = injector.get(HttpClient);
    }
  }
}

@NgModule({
  providers: [
    AuthService,
    UserService,
        export class CoreModule {
  {
    provide: APP_INITIALIZER,
    // можно сразу инициировать рефреш: (a) => a.renewAuth()
    // важно! renewAuth должен вернуть Promise, а не Observable т.к инициализация работает 
    // только с промисами
    //но очень важно делать это через экспортную функцию, дабы не сломать AOT сборку
    useFactory: refreshToken,
    deps: [AuthService],
    multi: true
  },
  {
    provide: HTTP_INTERCEPTORS,
    useClass: ApplyTokenInterceptor,
    multi: true
  },
  {
    provide: HTTP_INTERCEPTORS,
    useClass: RefreshTokenInterceptor,
    multi: true
  }
  ],
  exports: [HttpClientModule]
})
export class CoreModule {
  // some code
}

export function refreshToken(auth: AuthService) {
    return () => {
        // return own subject to complete this initialization step in any case
        // otherwise app will stay on preloader if any error while token refreshing occurred
        const subj = new Subject();
        auth.renewAuth()
        .finally(() => {
            subj.complete();
        })
        .catch((err, caught: Observable<any>) => {
            // do logout, redirect to login will occurs at UserService with onLoggedOut event
            auth.logout();
            return ErrorObservable.create(err);
        })
        .subscribe();
        // need to return Promise!!
        return subj.toPromise();
    };
  }

//auth.service.ts

public renewAuth(): Observable < string > {
  if(!this.isNeedRefreshToken()) {
  return Observable.empty<string>();
}
return this._http.post<string>(`https://${authConfig.domain}/oauth/token`,
  {
    client_id: authConfig.clientID,
    grant_type: 'refresh_token',
    refresh_token: localStorage.getItem('refresh_token')
  }).do(res => this.onAuthRenew(res));
}

public isNeedRefreshToken(): boolean {
  //expires_at - время когда токен должен истечь, записано при логине или после очередного рефреша 
  let expiresAtString = localStorage.getItem('expires_at');
  if (!expiresAtString) {
    return false;
  }

  const expiresAt = JSON.parse(expiresAtString);
  //считаем, что токен нужно рефрешить не когда он уже истек, а за минуту до его невалидности
  let isExpireInMinute = new Date().getTime() > (expiresAt - 60000);
  return isExpireInMinute;
}

export class ApplyTokenInterceptor implements HttpInterceptor, AuthInterceptor {

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

    //т.к HttpInterceptor перехватывает абсолютно все запросы мы должны гарантировать, что Authorization заголовок будет
    //добавлен только к запросам на наш API
    if (!req.url.includes('api/')) {
      return next.handle(req);
    }

    //клонироуем запрос, что бы добавить новый заголовок 
    const authReq = req.clone({
      headers: req.headers.set('Authorization', this.auth.authHeader)
    });
    //передаем клонированный запрос место ориганального
    return next.handle(authReq);
  }
}

• Если renewAuth() по каким то причинам не смог обновить токен, можем, к примеру перенаправить юзера на страницу логина;
• В случае если с запросом на рефреш пока все хорошо — тобишь пока он в процессе, будем запоминать все запросы которые вернули 401ую пока токен рефрешился, т.к сервер авторизации может быть на другом хосте и может задержать ответ по каким то причинам, а наш сервер будет сыпать 401ые. При этом код инициирующий запрос (код компонента к примеру) не должен получать 401ые ошибки и при этом подписка инициирующего запрос кода не должна слететь и при этом мы не должны нарушить стандратное поведение RxJs, тобишь запрос должен быть отправлен только после того как вызывающий компонент сделает подписку (subscribe()).
  
  

          let first = service.getData();
  	//далее мы можем к примеру добавить еще один запрос и выполнить их паралельно
  	let second = service.getData();
  	let concatenated = first.concat(second);
  	concatenated.subscribe(); //и только после вызова subscribe должен уйти запрос.
  

  
  
• После того как токен успешно рефрешнулся — повторяем запросы которые были зафейлены пока был рефреш.

//для удобства объявим тип который содержит инфу о запросе который вернул 401ую и наш "внутренний" подписчик
//"внутренний" - потому что мы будем обворачивать Observable который зашел к нам из инициатора
type CallerRequest = {
    subscriber: Subscriber<any>;
    failedRequest: HttpRequest<any>;
};
 
@Injectable()
export class RefreshTokenInterceptor implements HttpInterceptor, AuthInterceptor {

   private auth: AuthRefreshProvider;
private http: HttpClient;
private refreshInProgress: boolean;
private requests: CallerRequest[] = [];
	
init(http: HttpClient, auth: AuthRefreshProvider) { /*some init;*/ }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  //перехватываем только "наши" запросы
  if(!req.url.includes('api/')) {
  return next.handle(req);
}

//оборачиваем Observable из вызывающего кода своим, внутренним Observable
// далее вернем вызывающему коду Observable, который под нашим контролем здесь
let observable = new Observable<HttpEvent<any>>((subscriber) => {
  //как только вызывающий код сделает подписку мы попадаем сюда и подписываемся на наш HttpRequest
  //тобишь выполняем оригинальный запрос
  let originalRequestSubscription = next.handle(req)
    .subscribe((response) => {
      //оповещаем в инициатор (success) ответ от сервера 
      subscriber.next(response);
    },
    (err) => {
      if (err.status === 401) {
        //если споймали 401ую - обрабатываем далее по нашему алгоритму
        this.handleUnauthorizedError(subscriber, req);
      } else {
        //оповещаем об ошибке
        subscriber.error(err);
      }
    },
    () => {
      //комплит запроса, отрабатывает finally() инициатора
      subscriber.complete();
    });

    return () => {
      // на случай если в вызывающем коде мы сделали отписку от запроса
      // если не сделать отписку и здесь, в dev tools браузера не увидим отмены запросов, т.к инициатор (например Controller) делает отписку от нашего враппера, а не от исходного запроса
      originalRequestSubscription.unsubscribe();
    };
  });

//вернем вызывающему коду Observable, пусть сам решает когда делать подписку.
return observable;
}

//private handleUnauthorizedError
//private repeatFailedRequests
//private repeatRequest
}

private handleUnauthorizedError(subscriber: Subscriber < any >, request: HttpRequest<any>) {

  //запоминаем "401ый" запрос
  this.requests.push({ subscriber, failedRequest: request });
  if(!this.refreshInProgress) {
    //делаем запрос на восстанавливение токена, и установим флаг, дабы следующие "401ые"
    //просто запоминались но не инициировали refresh
    this.refreshInProgress = true;
    this.auth.renewAuth()
      .finally(() => {
        this.refreshInProgress = false;
      })
      .subscribe((authHeader) =>
        //если токен рефрешнут успешно, повторим запросы которые накопились пока мы ждали ответ от рефреша
        this.repeatFailedRequests(authHeader),
        () => {
          //если по каким - то причинам запрос на рефреш не отработал, то делаем логаут
          this.auth.logout();
        });
  }
}

private repeatFailedRequests(authHeader) {

    this.requests.forEach((c) => {
      //клонируем наш "старый" запрос, с добавлением новенького токена
      const requestWithNewToken = c.failedRequest.clone({
        headers: c.failedRequest.headers.set('Authorization', authHeader)
      });
      //и повторяем (помним с.subscriber - subscriber вызывающего кода)
      this.repeatRequest(requestWithNewToken, c.subscriber);
    });
    this.requests = [];
  }

private repeatRequest(requestWithNewToken: HttpRequest < any >, subscriber: Subscriber<any>) {

    //и собственно сам процесс переотправки
    this.http.request(requestWithNewToken).subscribe((res) => {
      subscriber.next(res);
    },
      (err) => {
        if (err.status === 401) {
          // if just refreshed, but for unknown reasons we got 401 again - logout user
          this.auth.logout();
        }
        subscriber.error(err);
      },
      () => {
        subscriber.complete();
      });
  }