时间戳

首页 > 解决方案 > 角度动态配置

angular - 角度动态配置

问题描述

全部，

我有一个关于如何为我的 Angular Web 应用程序提供一些运行时配置选项的问题。以下是详细信息，但我所追求的是能够一次编译我的 Angular Web 应用程序，然后将其部署到多个环境中，并且只需要更改端点。

我发现，一旦将下面的 JSON 文件导入 app.module.ts 文件并在编译时引用，这些值就会被硬编码到应用程序中，因此当我将应用程序移至我们的测试时服务器并尝试运行应用程序，一旦发生 MSAL 身份验证并将其重定向回错误的 Uri。

基本上它不是在运行时读取 auth-config.json 文件，而是在编译时读取。有没有办法让它在运行时读取它？

我正在使用 Microsoft 的包进行 MSAL / Azure AD 身份验证。

它使用一个名为 auth-config.json 的 json 文件。这是它的一个片段

{
    "configuration": {
        "redirectUri": "https://SomeWebSiteName-D.domainname.com",
        "postLogoutRedirectUri": " https://SomeWebSiteName-D.domainname.com "
    },
    "apiBaseUrl": "https://SomeWebSiteNameAPI-D.domainname.com/api/"
}

这个 json 文件像这样导入到 app.module.ts 文件中。

import * as auth from '../assets/config/auth-config.json';

然后使用它来配置 MSAL 包。这是引用其中一些数据的函数之一。

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: auth.credentials.clientId,
      authority: 'https://login.microsoftonline.com/' + auth.credentials.tenantId,
      redirectUri: auth.configuration.redirectUri
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11
    },
  });
}

稍后在 App.module.ts 文件中，上述函数在

@NgModule
  providers: [
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory,
    }

标签： angulartypescriptmsal

解决方案

Angular 提供了如何管理特定环境变量的解决方案。

您在environments某处有一个文件夹，其中包含 2 个文件。您可以在此处指定此类导入。根据您的文件，如果您的环境发生变化（ Angular Docs），angular.json这些将自动交换。

所以这是你写它的地方：

// environment.ts
export const environment = {
    "configuration": {
        "redirectUri": "https://SomeWebSiteName-D.domainname.com",
        "postLogoutRedirectUri": " https://SomeWebSiteName-D.domainname.com "
    },
    "apiBaseUrl": "https://SomeWebSiteNameAPI-D.domainname.com/api/"
}

// environment.<specific_environment>.ts
export const environment = {
    "configuration": {
        "redirectUri": "different keys",
        "postLogoutRedirectUri": "..."
    },
    ...
}

// msal-instance.factory.ts
import {environment} from '../path/to/environment';
environment.configuration;

更新：根据您的要求在评论中提供示例

要在运行时更改环境，您有多种选择。我将在这里概述一个示例；

interface Environment {
  configuration: {
    redirectUri: string,
    postLogoutRedirectUri: string,
  },
  apiBaseUrl: string;
}

const environments: Record<string, Environment> = {
  production: {
    "configuration": {
      "redirectUri": "https://SomeWebSiteName-D.domainname.com",
      "postLogoutRedirectUri": "https://SomeWebSiteName-D.domainname.com"
    },
    "apiBaseUrl": "https://SomeWebSiteNameAPI-D.domainname.com/api/"
  }
}

export let environment: Environment;

export const updateEnvironment = (env: string) => {
  environment = environments[env];
}

// 'production' may be an environment variable instead of directly being a string
updateEnvironment('production');

推荐阅读