如何将不同环境中的clientId传递给AppModule

如何解决如何将不同环境中的clientId传递给AppModule

我使用 msal 进行身份验证。在我的 AppModule.ts（来自 the example)

    @NgModule({
  declarations: [
    AppComponent,HomeComponent,ProfileComponent
  ],imports: [
    browserModule,AppRoutingModule,MsalModule.forRoot( new PublicclientApplication({
      auth: {
        clientId: 'Enter_the_Application_Id_here',// This is your client ID
        authority: 'Enter_the_Cloud_Instance_Id_Here'/'Enter_the_Tenant_Info_Here',// This is your tenant ID
        redirectUri: 'Enter_the_Redirect_Uri_Here'// This is your redirect URI
      },cache: {
        cacheLocation: 'localStorage',storeAuthStateInCookie: isIE,// Set to true for Internet Explorer 11
      }
    }),null,null)
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

对于clientId，我不想在这里硬编码。它在一个配置文件中。问题是我有不同的环境，例如 dev/qa 和 prod 等。每个端点的 clientId 都不同。

如何将值而不是硬编码传递给 AppModule？

解决方法

您可以为“./src/environments/”下的每个阶段创建 environment.[stage].ts 文件。

// environment.ts
export const environment = {
  production: false,clientId: 'Enter_the_Application_Id_here',authority: 'Enter_the_Cloud_Instance_Id_Here',redirectUri: 'Enter_the_Redirect_Uri_Here'
}

// environment.qa.ts
export const environment = {
  production: true,redirectUri: 'Enter_the_Redirect_Uri_Here'
}

完成后，每个阶段应该有 N 个文件。例如：

environment.ts
environment.qa.ts
environment.prod.ts

通过对 angular.json 中的每个 [stage] 进行一些额外配置，您可以轻松地做到这一点：

import { environment } from './../environments/environment';

//inside app.module
   MsalModule.forRoot( new PublicClientApplication({
      auth: {
        clientId: environment.clientId,authority: environment.authority,redirectUri: environment.redirectUri
      },

angular.json 中的附加配置添加了一个 "fileReplacements" 以使用 environment.[stage].ts 替换 environment.ts：

"configurations": {
  "qa": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts","with": "src/environments/environment.qa.ts"
      }
    ],

现在您可以运行特定于阶段的构建：

ng build --configuration=qa

官方 angular 文档有一个关于这个主题的页面：https://angular.io/guide/build