https://xiaoshuai1024.github.io/tags/%E5%BE%AE%E5%89%8D%E7%AB%AF/微前端 - Tag - 帅说帅话Hugo -- gohugo.ioenMon, 17 Mar 2025 21:00:00 +0800https://xiaoshuai1024.github.io/posts/micro-front-end/Mon, 17 Mar 2025 21:00:00 +0800Authorhttps://xiaoshuai1024.github.io/posts/micro-front-end/在一线互联网大厂的业务发展过程中，中后台系统往往随着业务迭代逐步扩张，长期积累后会形成多个独立部署、技术栈各异的子系统。 这些系统各自独立维护，不仅导致用户需要频繁切换账号、体验割裂，还增加了开发维护成本和权限管控难度。基于此，我们选择qiankun微前端框架，实现多系统统一接入与管理，以下是完整实践过程与复盘。 一、系统基本情况：接入背景与核心诉求 我们所对接的中后台系统，是经过多年业务沉淀形成的复杂体系，核心痛点集中在“分散管理、体验割裂、权限混乱”，具体情况如下： 权限管控诉求迫切：各子系统独立部署，用户权限需在每个系统单独配置，不仅增加运维成本，还存在权限不一致、管控不统一的安全隐患，亟需统一的权限入口和管控机制。 同时，需实现“一次登录、多系统通行”，减少用户切换成本，提升操作效率，保障系统数据安全。 技术栈杂乱无章：各子系统建设周期不同，技术栈差异极大，涵盖多种前端框架，具体分布如下： 技术栈的不统一，导致跨系统协作困难、代码无法复用，且老旧jQuery项目维护成本高，难以迭代优化，无法满足现有业务发展需求。 基于以上问题，我们确定微前端接入的核心目标：统一入口、统一权限、统一体验，同时兼容现有所有子系统，实现渐进式迭代优化。 二、基座开发与统一准备：筑牢接入基础 微前端接入的核心是“基座 + 子应用”的架构模式，其中基座作为统一入口，承担权限管控、子应用管理、数据通信等核心职责。 结合我们的技术栈（Vue3 + Node.js + Egg.js + SpringBoot），基座开发与统一准备主要分为3个核心环节，整体架构如下： 基座技术选型与开发：基座采用Vue3 + TypeScript开发，基于qiankun框架的registerMicroApps、start等核心API，实现子应用的注册、加载、卸载与通信，同时集成Element Plus实现统一的页面布局、导航栏、权限菜单。 基座核心职责是“统一管控”，不承担具体业务逻辑，重点保障稳定性和兼容性，适配不同技术栈的子应用接入。 BFF层接口打平：基于Egg.js开发BFF（Backend For Frontend）层，统一聚合各子系统的后端接口，解决不同子系统接口规范不统一的问题。 BFF层负责请求转发、数据格式化、接口容错处理，让基座和子应用只需对接统一的BFF接口，无需关注各子系统后端的差异，降低接入复杂度。 统一鉴权功能开发（与后端协同）：联合后端团队，基于SpringBoot开发统一鉴权服务，实现“一次登录、多系统通行”的单点登录（SSO）功能。 基座负责接收后端返回的权限信息，统一管理子应用的访问权限，控制子应用菜单的显示与隐藏；同时，BFF层拦截所有请求，验证用户token有效性，确保未授权用户无法访问子应用和接口。 此外，协同后端完善权限颗粒度，实现菜单级、按钮级权限管控，满足中后台系统的精细化权限需求。 三、子应用接入过程：问题与现场解决 在子应用接入过程中，由于技术栈差异大、部分子系统过于老旧，我们遇到了多种典型问题，以下是具体接入流程及问题解决方案，确保接入后系统稳定运行。 接入核心流程：基座注册子应用（registerMicroApps）→ 子应用改造（适配qiankun的entry、container、activeRule等配置，暴露bootstrap、mount、unmount生命周期钩子） → 联调测试 → 上线验证，整体流程简洁清晰，但不同技术栈子应用的改造难度差异较大。 样式冲突问题（最常见）：各子系统采用不同的UI框架（Element UI、Ant Design、Layui），且存在自定义样式命名不规范的情况，接入后出现样式污染、布局错乱。 解决方案：基座采用qiankun自带的样式隔离机制，优先使用shadowDom模式对子应用样式进行隔离；对于不兼容shadowDom的子应用，启用scoped样式+自定义前缀命名规范，避免样式命名冲突；对于冲突严重的子应用，单独配置sandbox参数，确保布局正常。 Store状态不同步问题：Vue子应用（Vue2/Vue3）的Vuex/Pinia状态、React子应用的Redux状态，无法与基座状态同步，导致用户信息、权限信息等全局数据无法共享。 解决方案：基于qiankun的全局通信机制（initGlobalState），在基座中维护全局状态（用户信息、权限、全局配置），子应用通过props接收全局状态，同时通过onGlobalStateChange监听状态变化、setGlobalState修改状态，实现基座与子应用、子应用之间的状态同步。 页面风格不一致问题：各子系统的导航、按钮、表单等组件风格差异较大，导致用户体验割裂，不符合中后台系统的统一体验要求。 解决方案：基座提供统一的UI组件库（Element Plus），要求新接入的子应用优先使用基座提供的组件；对于已上线的子应用，逐步迭代优化，替换为统一组件；对于无法快速改造的子应用，通过样式适配，尽量贴近统一风格。 老旧jQuery项目接入难题：部分jQuery + Layui的老旧项目，无法适配qiankun的接入规范，改造难度极大，且投入成本过高。 解决方案：采用“iframe嵌套”的折中方案，将老旧项目通过iframe嵌入基座，基座通过postMessage实现与iframe子应用的通信（如权限信息传递、页面跳转），暂时解决接入问题，后续逐步迭代替换。 同时，对iframe子应用进行权限管控，基座验证用户权限后，再加载iframe内容，确保数据安全。 四、持续优化：渐进迭代替换与长期维护 微前端接入并非一次性工程，尤其是面对复杂的中后台系统，无法通过一次改造完成所有优化，我们采用“渐进迭代”的思路，持续推进系统优化与老旧系统替换。 分阶段替换老旧系统：优先对业务高频、维护成本高的jQuery老旧项目进行改造，采用Vue3 + TypeScript重构，逐步替换为符合规范的子应用，接入qiankun基座，替代iframe嵌套方案。 改造过程中，采用“灰度发布”模式，确保业务不受影响，同时组织开发人员进行技术培训，统一技术栈与开发规范。 完善基座能力：持续迭代基座功能，新增子应用监控、性能统计、日志收集等功能，基于Egg.js BFF层实现子应用访问数据的采集与分析，及时发现接入过程中的性能瓶颈和异常问题。 同时，优化基座与子应用的通信效率，减少状态同步延迟，提升页面切换流畅度。 规范子应用开发标准：制定统一的子应用接入规范，明确技术栈选型（优先Vue3 + TypeScript）、接口对接规范、样式规范、状态管理规范，确保后续新增子应用接入高效、统一。 定期组织跨团队评审，检查子应用接入质量，避免出现新的样式冲突、状态同步等问题。 建立长期维护机制：成立微前端维护小组，负责基座迭代、子应用接入支持、问题排查，同时建立知识库，记录接入过程中的问题与解决方案，供团队成员参考，提升维护效率。 五、结语：微前端接入的价值与思考 本次复杂中后台系统微前端（qiankun）接入实践，成功解决了多系统分散管理、权限混乱、体验割裂的核心痛点，实现了“统一入口、统一权限、统一体验”的目标。