Как заполнить параметры конфигурации Adal8Service с помощью параметров конфигурации в Angular 7 и загрузить при загрузке приложения

Question

Я использую import { Adal8Service, Adal8HTTPService } from 'adal-angular8'; для Azure аутентификации. Я использую ниже в app.module.ts:

export function appInit(appConfigService: AppInitService) {
  return (): any => {
    appConfigService.getApplicationConfig().subscribe((res) =>{
      sessionStorage.setItem("appConfig",JSON.stringify(res));
      timeout(500);
    });
  }
}

мой getApplicationConfig () ниже:

public getApplicationConfig() {
    return this.http.get('assets/config.json');}

и в providers [] ниже:

 AuthenticationService,
    AppInitService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInit,
      deps: [AppInitService],
      multi: true
    },
    Adal8Service, 
    { provide: Adal8HTTPService, 
      useFactory: Adal8HTTPService.factory, 
      deps: [HttpClient, Adal8Service],
      multi: true 
    },

Здесь функция appInit не блокирует (даже удаляя таймаут ()) загрузку приложения и переходит к this.adalService.init(this.adalConfig); this.adalService.handleWindowCallback(); (где this.adalConfig = sessionStorage.getItem("appConfig")).

Если я обновлю sh страница, затем я правильно перенаправляюсь на страницу входа в систему Azure Ad, или если я жестко кодирую configOptions из this.adalService.init("HARDOCDE all values"), тогда все работает нормально. Как заставить приложение блокировать конфигурацию. Я сохраняю значения конфигурации в /assets/config.json. Я не уверен, что я здесь делаю не так. Я попытался прочитать файл «json», но снова мне нужно изменить его, прежде чем приступить к производству. Как заставить приложение ждать, есть также другие значения конфигурации для приложения, хранящиеся в файле /assets/config.json. Правильно ли я использую APP_INITIALIZER? Пожалуйста, укажите мне правильное направление.

Answer 1

Проблема не связана с ADAL, а связана с тем, как асинхронные функции работают в javascript. Чтобы заблокировать выполнение функции, вы можете либо записать функцию, которая ожидает, пока ответ не будет возвращен HTTP-запросом, либо вы можете использовать библиотеку, например waitfor-ES6 , которая может помочь вам в этом.

Изменение должно быть выполнено на

export function appInit(appConfigService: AppInitService) {
  return (): any => {
    response = yield wait.for(appConfigService.getApplicationConfig);
    sessionStorage.setItem("appConfig",JSON.stringify(response));
  }
}

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