时间戳

首页 > 解决方案 > 为不同用户创建动态角度应用程序

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

问题描述

我正在开发一个 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';
}

标签： angulartypescriptdynamicfrontendglobal-variables

解决方案

  1. 如果有一个Angular 应用程序实例，假设您的所有客户都使用 shared-front-end.com，那么我建议您在登录时将徽标路径、颜色主题等作为用户配置文件的一部分。
  2. 如果 Angular 应用程序有多个实例，这意味着您要将相同的前端部署到每个客户端的不同位置，并且所有实例的后端都是相同的，那么我建议从编译的 environment.ts 文件继续到运行时配置文件和：
  • 如果徽标和颜色主题不经常更改，则您的运行时配置文件可以包含该实例的徽标路径和颜色主题。
  • 否则，如果 logo 和颜色主题经常更改，则在每个实例的配置文件中放置一个唯一的 clientId，每个实例都必须对后端进行初始 http 调用，以获取基于 clientId 的 logo 路径和颜色主题.

推荐阅读