为不同用户创建动态角度应用

如何解决为不同用户创建动态角度应用

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

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

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

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

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

解决方法

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

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