![](/img/trans.png)
[英]Angular 8 APP_INITIALIZER service start before loading config file
[英]Angular: Load config file before sending http request within the APP_INITIALIZER
在我的SPA中,我正在使用APP_INITIALIZER令牌,该令牌应按照给定的顺序执行以下操作。 1)加载与环境相关的配置文件(DEV,QA,PROD)。 2)使用配置文件中的API URL发出对身份验证令牌的HTTP请求3)使用配置文件中的API URL并将令牌附加到HTTP请求(这在令牌拦截器中发生)以加载其他配置数据)
之前我用硬编码的URL实现了2和3,然后一切正常。 当我将API Urls移动到配置并尝试从配置文件加载它们时,令牌端点在配置文件请求得到解决之前就已执行,因此url变得不确定。
请参见下面的代码:
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
]
});
@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)}`);
});
}
}
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,但是我不确定如何处理它。
也许您可以控制.then回调中的顺序:
appConfig.load()
.then(()=>
Promise.all[
authService.authenticateClient(),
appService.getClientConfig()
]
.then....)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.