[发明专利]一种基于qiankun和Web Component的微前端架构及其构建方法

权利要求书

1.一种基于qiankun和Web Component的微前端架构的构建方法，其特征在于，所述微前端架构的构建方法包括基于qiankun构建微服务架构和基于Web Component构建通用组件库；

其中，所述微服务架构包括主应用和若干子应用，各子应用注册到主应用中，所述主应用被配置作为入口实现对各子应用的访问；

所述通用组件库被配置为Web Component组件库，用于为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，至少支持React组件、Vue组件和Angular组件；

基于Web Component构建通用组件库的构建流程为：

a．构建组件库步骤，在服务器创建组件库目录，定义访问组件库的URL，通过nginx配置将URL代理到服务器组件库路径；

步骤a，构建组件库步骤中还包括：创建组件库git仓库，使用git作为组件库的版本控制工具；

b．构建组件模板步骤，创建组件项目，定义MyComponent继承HTMLElement,定义标签名，创建shadow root,创建组件挂载容器，createApp创建应用实例；

c．开发、部署组件步骤，从gitlab拉取组件库代码到本地，在组件库中新增待开发组件目录，引入组件开发模板，在模板上进行组件开发；提交代码到gitlab，通过jenkins自动化部署工具配置相关命令，拉取仓库代码，使用构建工具构建组件，发送到线上组件库目录中；

d．在上层应用中应用组件库步骤，在上层应用中通过script标签引入组件库中对应组件的URL，系统发起XHR请求，服务端返回组件数据，按组件中定义的标签名在上层应用中进行引用。

2.如权利要求1所述的微前端架构的构建方法，其特征在于，所述主应用被配置为按如下流程构建：创建主应用项目，搭建主应用HTML框架，创建子应用容器，注册子应用，并启动主应用服务。

3.如权利要求1所述的微前端架构的构建方法，其特征在于，用户在进入主应用以及主应用跳转到子应用时设有权限认证流程。

4.如权利要求3所述的微前端架构的构建方法，其特征在于，所述权限认证流程为：

首先检查主应用是否获取到用户信息，

如果没有用户信息则跳转到登录子应用，

如果获取到用户信息，则向后端发送鉴权请求，参数为用户ID，验证用户是否具有应用的权限，如果有则跳转到对应应用，如果没有则前端展示没有权限提示框并返回登录子应用。

5.如权利要求1所述的微前端架构的构建方法，其特征在于，各子应用注册到主应用中过程中包括子应用的配置流程为：

各子应用在子应用的入口文件中导出主应用需要的生命周期函数bootstrap、mount、unmount，供主应用调用；

且在各子应用的打包配置中，各子应用输出的包名设置为在主应用注册的时的子应用名称。

6.如权利要求1所述的微前端架构的构建方法，其特征在于，步骤a，构建组件库步骤中还包括：创建组件库git仓库，使用git作为组件库的版本控制工具。

7.一种基于qiankun和Web Component的微前端架构，其特征在于，所述微前端架构包括微服务架构和通用组件库，所述微前端架构按照如权利要求1至6任一项所述的构建方法构建得到。