如何开发独立Angular插件及迁移WPF套件至Angular v5并管控授权

一、开发独立Angular插件（基于不同源项目） #

要实现独立于主Angular站点的插件开发，Angular官方的Library机制是最贴合需求的方案——既能让插件项目完全独立维护，又能无缝集成到主项目中。下面是我在类似场景中实践过的具体步骤：

• 创建独立的插件工作区：
  用Angular CLI搭建一个不含主应用的专属工作区，专门用来开发插件：

  ng new plugin-workspace --create-application false
  cd plugin-workspace
  ng generate library customer-plugin
  

  这样customer-plugin就是一个完全独立的源项目，和你的主Angular站点代码彻底分离，方便单独迭代、版本管理。

• 规范插件的对外API：
  插件里需要暴露给主项目使用的组件、服务、模块，必须在projects/customer-plugin/src/public-api.ts中导出，比如：

  export * from './lib/customer-plugin.component';
  export * from './lib/customer-plugin.service';
  export * from './lib/customer-plugin.module';
  

  只有在这里导出的内容，主项目才能正确识别和引用。

• 构建与发布插件：
  开发完成后，先构建插件包：

  ng build customer-plugin
  

  因为你们是内网部署，建议搭建一个私有npm仓库（比如Verdaccio），把构建好的包发布到私有源：

  npm publish dist/customer-plugin --registry http://your-internal-registry-url
  

• 主项目集成插件：
  在主Angular站点项目中，从私有源安装插件：

  npm install customer-plugin --registry http://your-internal-registry-url
  

  然后在需要使用插件的模块中导入插件模块：

  import { CustomerPluginModule } from 'customer-plugin';
  
  @NgModule({
    imports: [CustomerPluginModule]
  })
  export class MainModule { }
  

  之后就能像使用本地组件一样调用插件里的功能了。

• 关键注意点：

  • 确保插件和主项目的Angular版本完全一致（你们用的是v5，所以插件也要基于Angular v5开发），避免版本兼容问题；
  • 插件内部使用ViewEncapsulation.Emulated或scoped样式，防止插件样式污染主项目的全局样式。

二、WPF迁移Angular v5+模块授权交付方案 #

从WPF迁移到Angular v5，同时要实现按模块授权交付、防止未授权使用，需要从开发架构设计和权限管控机制两方面同步入手：

开发层面：模块化拆分与按需构建 #

• 用路由懒加载拆分业务模块：
  把每个客户可选的功能做成独立的Angular模块，通过路由懒加载实现按需加载。示例代码如下：

  const routes: Routes = [
    { 
      path: 'inventory', 
      loadChildren: './inventory/inventory.module#InventoryModule',
      canActivate: [AuthGuard] // 先经过权限校验
    },
    { 
      path: 'sales', 
      loadChildren: './sales/sales.module#SalesModule',
      canActivate: [AuthGuard]
    }
  ];
  

  这样打包时每个模块会生成单独的chunk文件，交付时只需要包含客户购买的模块chunk，大幅减少部署包体积。

• 自定义构建配置：
  在angular.json中为每个模块配置单独的构建目标，或者通过webpack配置（Angular v5 CLI基于webpack）指定只打包特定模块。比如针对只购买inventory模块的客户，构建时只打包主应用核心代码+inventory模块的chunk。

• 公共代码抽离：
  把WPF中的公共逻辑（比如工具类、通用组件）抽离成Angular的共享库，所有业务模块依赖这个共享库，避免重复代码，也方便统一维护。

权限管控：防止未授权使用 #

• 后端主导权限校验：
  前端的权限判断只是辅助，核心校验必须在后端实现。用户登录后，后端返回该用户拥有的模块列表，前端根据这个列表动态生成路由、隐藏未授权的模块入口。同时，每个模块的API请求都要携带用户身份信息，后端验证该用户是否有权限访问该接口，无权限则返回403。

• 前端代码保护：

  • 开启Angular CLI自带的代码混淆，在angular.json的build配置中设置：

    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false // 关闭sourceMap，防止源码泄露
    

  • 对于关键的授权逻辑（比如模块加载判断），可以用简单的对称加密处理，比如把授权模块列表加密后存储在前端，启动时解密验证，增加篡改难度。

• 离线授权机制：
  因为是内网部署，可能无法实时联网验证，可采用离线授权文件方案：

  1. 后台生成包含用户ID、授权模块列表、有效期、硬件指纹的加密JSON文件；
  2. 用户部署时把该文件放在指定目录；
  3. 前端启动时读取该文件，解密后验证硬件信息（比如MAC地址、主机名）和授权内容，匹配成功才加载对应模块。

• 运行时拦截：
  即使用户通过修改前端代码强行加载未授权模块，后端也要拦截所有未授权的API请求，确保核心功能无法使用，前端再弹出未授权提示。

内容的提问来源于stack exchange，提问作者Brian Kitt