为不同用户创建动态 angular 应用程序

Question

我正在开发 Angular 前端应用程序，它显示 UI 具有一致的布局和界面，但具有独特的公司徽标、颜色和其他变量。目标是创建一个可供多家公司使用的 Web 应用程序。每家公司都以相同的方式使用该应用程序并具有相同的 UI 但其独特的公司徽标、颜色...显示。

由于可扩展性，每个公司都无法构建自己的应用程序，因此必须在登录时动态分配所有内容。

目前每个公司都有其唯一的登录名，所以我的想法是在前端创建不同的配置文件，然后在登录后向后端发送一个调用以获取必须显示的配置文件。但是我正在尝试找到创建这样一个系统的最佳方法。

目前我有一个供整个应用程序使用的全局常量文件。这些值需要是动态的。 （也许是多个全局常量文件？）

export class GlobalConstants {
  public static displayName = 'Company A';
  public static logo = '../../../../assets/companya/logo.png';
  public static primaryColor = '#311b92';
  public static secundaryColor = '#200b92';
}

Answer 1

1. 如果 Angular 应用程序只有一个实例 ，假设您的所有客户端都使用 shared-front-end.com，那么我建议您收到登录时将徽标路径、颜色主题等作为用户配置文件的一部分。
2. 如果 Angular 应用程序有多个实例 ，这意味着您要将相同的前端部署到每个客户端和后端的不同位置end 对于所有实例都是相同的，那么我建议从编译的 environment.ts 文件转到运行时配置文件并且：

• 如果徽标和颜色主题不经常更改，那么您的运行时配置文件可以包含该实例的徽标路径和颜色主题。
• 否则，如果徽标和颜色主题经常更改，则在每个实例的配置文件中放置一个唯一的 clientId，每个实例都必须对后端进行初始 http 调用以获取徽标路径和基于 clientId 的颜色主题。