// Fundamental modules
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, InjectionToken } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
// Third party modules
import { RestangularModule, Restangular } from 'ngx-restangular';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import 'hammerjs';
import { MsalModule, MsalService, MsalConfig } from '@azure/msal-angular';
const baseUrl: string = environment.baseUrl;
const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
// Function for setting the default restangular configuration
export function RestangularConfigFactory(RestangularProvider, msalService) {
RestangularProvider.setBaseUrl(baseUrl);
RestangularProvider.addFullRequestInterceptor((element, operation, path, url, headers, params) => {
console.log(url);
const tokenStored = msalService.getCachedTokenInternal(environment.msalConfig.consentScopes);
if (tokenStored && tokenStored.token) {
return {
headers: Object.assign({}, headers,
{ 'Content-Type': 'application/json; charset=UTF-8', Authorization: `Bearer ${tokenStored.token}` })
};
} else {
msalService.acquireTokenSilent(environment.msalConfig.consentScopes).then(token => {
return {
headers: Object.assign({}, headers,
{ 'Content-Type': 'application/json; charset=UTF-8', Authorization: `Bearer ${token}` })
};
});
}
});
}
export const RestangularGraph = new InjectionToken<any>('RestangularGraph');
export function RestangularGraphFactory(restangular: Restangular, msalService) {
return restangular.withConfig((RestangularConfigurer) => {
RestangularConfigurer.setBaseUrl('https://graph.microsoft.com/v1.0');
RestangularConfigurer.addFullRequestInterceptor((element, operation, path, url, headers, params) => {
console.log(url);
const tokenStored = msalService.getCachedTokenInternal(environment.msalConfig.graphScopes);
if (tokenStored && tokenStored.token) {
return {
headers: Object.assign({}, headers,
{ 'Content-Type': 'application/json; charset=UTF-8', Authorization: `Bearer ${tokenStored.token}` })
};
} else {
msalService.acquireTokenSilent(environment.msalConfig.graphScopes).then(token => {
return {
headers: Object.assign({}, headers,
{ 'Content-Type': 'application/json; charset=UTF-8', Authorization: `Bearer ${token}` })
};
});
}
});
});
}
export function msalConfigFactory(): MsalConfig {
const config = environment.msalConfig;
config.popUp = !isIE;
config.storeAuthStateInCookie = isIE;
return config;
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
HttpClientModule,
NgbModule.forRoot(),
AppRoutingModule,
MsalModule,
RestangularModule.forRoot([MsalService], RestangularConfigFactory),
CoreModule,
SharedModule
],
providers: [
MasterDataService,
MsalService,
{ provide: MSAL_CONFIG, useFactory: msalConfigFactory},
{ provide: RestangularGraph, useFactory: RestangularGraphFactory, deps: [Restangular, MsalService]}],
bootstrap: [AppComponent]
})
export class AppModule { }
分析:
restangular 如果只是配置一个baseurl ,就直接定义一个RestangularConfigFactory,然后用forroot()方法在最顶层注册一下
RestangularModule.forRoot([MsalService], RestangularConfigFactory),
因为RestangularConfigFactory方法需要参数MsalService,所以在写的时候需要传入
源码:
static forRoot(config1?, config2?): ModuleWithProviders {
return {
ngModule: RestangularModule,
providers: [
{provide: CONFIG_OBJ, useValue: [config1, config2]},
{provide: RESTANGULAR, useFactory: RestangularFactory, deps: [CONFIG_OBJ]},
]
};
export const RESTANGULAR = new InjectionToken<string>('restangularWithConfig');
export function RestangularFactory([callbackOrServices, callback]) {
let arrServices = [];
let fn = callbackOrServices;
if (isArray(callbackOrServices)) {
arrServices = callbackOrServices;
fn = callback;
}
return {fn, arrServices};
}
setDefaultConfig() {
if (!this.configObj || !isFunction(this.configObj.fn)) {
return;
}
const arrDI = map(this.configObj.arrServices, (services: Type<any>) => {
return this.injector.get(services);
});
this.configObj.fn(...[this.provider, ...arrDI]);
}
forRoot的方法是将2个参数传入进去,封装成一个对象,最后调用setDefaultConfig去执行里面的RestangularConfigFactory方法
参数就是[MsalService]
那我们直接可以把forRoot自己写就可以注册第二个baseUrl
providers: [
MsalService,
{ provide: RestangularGraph, useFactory: RestangularGraphFactory, deps: [Restangular, MsalService]}]