建信消金微前端架构改造
2025.10 - 2025.11·前端架构师qiankun微前端Monorepo鉴权
问题
消费金融公司有多个彼此独立的业务系统(智能客服、文本客服等),客户希望从一个统一门户进入,但各系统技术栈与发布节奏不同,直接合并代码会导致频繁冲突、互相阻塞发布。真正的难点不在「把多个应用塞进一个页面」,而在三件更实际的事:一是跨终端鉴权不互通——子应用各自维护登录态,用户在门户登入了,进入子系统却要再登一次;二是样式互相污染——各子应用都按自身视口做 rem 适配,嵌入后基准字号不同,导致全局样式错乱;三是存量系统接入成本——不能要求既有系统改代码。
方案
架构选型
基于乾坤(qiankun)搭建适配金融场景的微前端架构。选它的核心理由是以配置文件驱动子应用加载——接入方只需在配置里声明入口与生命周期,业务代码零侵入。
统一入口
把分散系统收敛到同一门户,运维侧只需维护一份入口配置即可掌握所有子应用的挂载关系,发布与回滚不再需要跨团队协调代码合并。
跨端鉴权链路
打通门户与子应用的登录态传递,进入子系统无需二次登录;同时配合按钮级权限控制与动态路由,保证不同角色在不同系统里看到一致的权限边界。
样式隔离与 rem 冲突定位
这是排查最久的一环。最终定位到根因是 rem 适配基准在各子应用间不一致,在嵌入容器宽度不同的情况下会放大成全局错乱。修复方式是统一 rem 基准的取值来源,使字号计算只依赖一致的容器宽度,从根上消除跨应用的连锁反应。
落地范围
完成对外系统全集成,支撑智能客服、文本客服等核心业务真正跑在统一门户上。
成果
新系统接入无需改动既有代码,跨端鉴权与 rem 样式冲突两个长期问题得到根治;智能客服、文本客服等核心业务顺利上线并支撑多部门使用,门户成为统一入口后各系统的发布节奏相互独立。