Angular 6 использует Http Interceptor с сервисом конфигурации - PullRequest
Новая
       9

Angular 6 использует Http Interceptor с сервисом конфигурации

0 голосов
/ 21 октября 2018

Я использую Angular 6, и проблема заключается в том, что я пытаюсь использовать перехватчик в качестве поставщика модуля приложения вместе с APP_INITIALIZER для получения файла конфигурации json из локальной сети.

Мой фрагмент модуля приложения:

.. / src / app / app.module.ts (фрагмент провайдера) 

providers: [
  AppConfigService,
  {
    provide: APP_INITIALIZER,
    useFactory: initializeApp,
    deps: [AppConfigService], multi:  true
  },
  { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
  { provide: LOCALE_ID, useValue: 'ES' },
  Title,
]

Интересно, что если я удаляю перехватчики, код работает хорошо, принося файл конфигурации.Мой код для получения файла конфигурации:

.. / src / app / _services / app-config.service.ts 

import { Injectable } from '@angular/core';
import { Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment.dev';
import { IAppConfig } from '../_models/_interfaces/app-config.model';

@Injectable()
export class AppConfigService {

static settings: IAppConfig;

constructor(private http: HttpClient) {}

load() {
    const jsonFile = `../../assets/config/config.${environment.name}.json`;
    return new Promise<void>((resolve, reject) => {
        this.http.get(jsonFile).toPromise().then((response: Response) => {
           AppConfigService.settings = <IAppConfig>response;
           resolve();
        }).catch((response: any) => {
           reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
        });
    });
  }
}

Наконец, код перехватчика:

.. / src / app / _interceptors / token.interceptor.ts 

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../_services/auth.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(public auth: AuthService) {}

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

request = request.clone({
  setHeaders: {
    Authorization: `Bearer ${this.auth.getToken()}`
  }
});

return next.handle(request);

  }
}

Когда Angular компилирует приложение, оно возвращает:

Не удалось загрузить файл '../../assets/config/config.dev.json ': {}

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

Любой совет по этому поводу?

Заранее спасибо.

1 Ответ

0 голосов
/ 21 октября 2018

Когда вы используете HttpClient для получения файла конфигурации, ваш перехватчик также фильтрует этот запрос.В вашем коде перехватчик заменяет (не добавляя к существующим) все заголовки HTTP заголовком авторизации.Когда приложение Content-Type по умолчанию / json потеряно, запрос больше не работает.Сохраните и измените старые заголовки с помощью request.headers.append (...), прежде чем устанавливать их как клонированные.

ИЛИ

Определите исключение для вашего запроса файла в перехватчике.Один простой способ - проверить, какой URL используется в request.url 

if (request.url.indexOf('config') > -1) {
    requestModified = request.clone({
       url: request.url,
       headers: request.headers.set('Content-Type', 'application/json')
    });
}
...