restangular 如何定義多個baseurl

// 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]}]