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

说明书

本发明公开了一种基于qiankun和Web Component的微前端架构及其构建方法，微前端架构的构建方法包括基于qiankun构建微服务架构和基于Web Component构建通用组件库；微服务架构包括主应用和若干子应用，各子应用注册到主应用中，主应用被配置作为入口实现对各子应用的访问；通用组件库被配置为Web Component组件库，为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，至少支持React组件、Vue组件和Angular组件。这种微前端模式通过分解复杂应用，使每个子应用的功能更简洁，子应用的依赖独立，可以将子应用分配给不同的开发人员去维护，相较于整个开发团队维护一个大型复杂应用而言，减小了开发时可能会产生的代码冲突，降低了开发和维护的难度。

技术领域

本发明属于前端开发应用领域，尤其涉一种基于qiankun和Web Component的微前端架构及其构建方法。

背景技术

微服务是一种开发软件的架构和组织形式，可将应用拆分成多个小型模块，每个模块可以独立进行开发、构建、部署。微服务架构使功能独立的模块松散耦合，降低了软件的开发难度，提高了软件的可维护性和后期的可拓展性。

后端领域的微服务架构已经存在成熟的解决方案，而前端领域微服务架构近年来才逐渐兴起，各大团队都处于探索阶段。前端开发面临以下几点问题：

（1） 前端技术日新月异，快速更迭的技术造成了前端项目中并存使用不同技术、开发框架的系统，给后期系统集成、维护造成困难。已有采用nginx代理到不同应用这种运维层面上的解决方案，但这种方式切换应用时会触发浏览器刷新，影响用户体验；

（2） 随着业务量的不断增加，前端项目逐渐演变成复杂的巨石前端项目，协同开发时容易引发冲突，难以维护和扩展。

（3） 前端开发重复性工作较多，提高代码复用性是前端领域不断在探索的问题。在大型项目中实现组件化，必须确保组件与系统之间不会相互影响，目前的组件化方案依赖框架，且难以实现组件与系统完全隔离。

发明内容

本发明的目的在于，为克服现有技术缺陷，提供了一种基于qiankun和WebComponent的微前端架构的构建方法，通过本发明微前端架构的构建方法中对前端应用的拆解设计，实现了对庞大的前端应用进行拆解形成独立子应用集成到主应用上的目的。

本发明目的通过下述技术方案来实现：

一种基于qiankun和Web Component的微前端架构的构建方法，所述微前端架构的构建方法包括基于qiankun构建微服务架构和基于Web Component构建通用组件库；其中，所述微服务架构包括主应用和若干子应用，各子应用注册到主应用中，所述主应用被配置作为入口实现对各子应用的访问；所述通用组件库被配置为Web Component组件库，用于为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，至少支持React组件、Vue组件和Angular组件。

根据一个优选的实施方式，所述主应用被配置为按如下流程构建：创建主应用项目，搭建主应用HTML框架，创建子应用容器，注册子应用，并启动主应用服务。

根据一个优选的实施方式，用户在进入主应用以及主应用跳转到子应用时设有权限认证流程。

根据一个优选的实施方式，所述权限认证流程为：首先检查主应用是否获取到用户信息，如果没有用户信息则跳转到登录子应用，如果获取到用户信息，则向后端发送鉴权请求，参数为用户ID，验证用户是否具有该应用的权限，如果有则跳转到对应应用，如果没有则前端展示没有权限提示框并返回登录子应用。

根据一个优选的实施方式，各子应用注册到主应用中过程中包括子应用的配置流程为：