Question

在我的SPA中，我正在使用APP_INITIALIZER令牌，该令牌应按照给定的顺序执行以下操作。 1）加载与环境相关的配置文件（DEV，QA，PROD）。 2）使用配置文件中的API URL发出对身份验证令牌的HTTP请求 3）使用配置文件中的API URL，并将令牌附加到HTTP请求（此操作在令牌拦截器中进行）以加载其他一些配置数据）

之前我用硬编码的URL实现了2和3，然后一切正常。当我将API Urls移至配置并尝试从配置文件加载它们时，令牌端点在配置文件请求得到解决之前就已执行，因此url变得不确定。

请参见下面的代码：

app.module.ts

export function initializeData(appConfig: AppConfig, authService: AuthService, appService: AppService, globalService: GlobalService) {
  return () => {
    try {
      return Promise.all([appConfig.load(), authService.authenticateClient(), appService.getClientConfig()]).then(() => {
        console.log('success')
        return Promise.resolve();
      }, (err) => {
        alert(err.error.error_description);
        return Promise.reject(err);
      });
    } catch (e) {
      alert(e.message);
      console.log(e);
    }

  }
}

@NgModule({
.............
.............
providers: [
    AppConfig,
    AuthService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeData,
      deps: [AppConfig, AuthService, TranslateService, AppService, GlobalService],
      multi: true
    },
    AppService
]
});

app.config.ts：

@Injectable()
export class AppConfig {
  static settings: IAppConfig;
  constructor(private http: HttpClient) { }
  load() {
    const jsonFile = `assets/config/config.${environment.name}.json`;

    return new Promise((resolve, reject) => {
      this.http.get(jsonFile).pipe(map((res: IAppConfig) => {
        AppConfig.settings = <IAppConfig>res;
        return AppConfig.settings;
      })).subscribe(() => {
        resolve();
        })
    }).catch ((response: any) => {
        console.log(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
      });
  }
}

auth.service.ts（令牌端点）：

authenticateClient(){
    let body = new HttpParams()
      .set('client_id', AppConfig.settings.apiServer.client_id)
      .set('grant_type', AppConfig.settings.apiServer.grant_type)
      .set('scope', AppConfig.settings.apiServer.scope);

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    };

    let authGatewayUrl: string = AppConfig.settings.apiServer.tokenUrl + window.location.search;

    return  this.http.post<any>(authGatewayUrl, body, httpOptions).toPromise().then(
        data => {
          this.token.next(data); 
          return this.token;
        },
        error => {
          return Promise.reject(error);
        }
      );  
  }

现在，当我在app.config.ts和auth.service.ts中添加断点时，在后面的文件AppConfig.Settings.apiServer.tokenUrl中，在解析应用程序配置文件之前会被命中。因此，它变得不确定。

我该如何解决？我知道我应该使用switchmap，但是我不确定如何处理它。

Answer 1

也许您可以在.then回调中控制序列：

appConfig.load()
  .then(()=>
     Promise.all[
       authService.authenticateClient(),
       appService.getClientConfig()
     ]
     .then....)

角度：在APP_INITIALIZER

app.module.ts

app.config.ts：

auth.service.ts（令牌端点）：

1 个答案: