导读
金融公司在多业务线多团队的背景下，想要给产品运营提供出一套多功能全方位的管理系统，既要让产品运营侧用的方便、用的爽，又要让开发侧同学开发成本低、上手便捷，于是我们在微前端架构的背景下，逐步落地到了金融的管理系统中。
本文意在讲解金融的实践情况，以供各位大牛参考和斧正，微前端的概念则顺带而言，请众看官掌眼。
应用场景
金融公司多个业务线，都有类似功能的管理后台诉求，这些诉求来自于各个团队，产品、运营、技术都会有管理后台系统的诉求。
同时我们希望提供出去一套简单易用系统，拥有统一的用户体验、统一的UI、统一的交互的管理后台系统，既要让系统的使用者觉得体验棒，又要让系统的开发者开发的爽。
微前端的介绍
微前端的思路是承接自微服务的理念。
如上图，微前端架构一般是这样的，下层是各个业务各个团队所提供的服务，中间是承接层做一些基础信息的校验、权限的获取和网关的对接，上层则是统一的拼接层，展示给用户 一个完整的管理系统。
微前端需要满足以下条件才是一个优秀的微前端架构：开发和部署独立，在工程上做到解耦；各子系统隔离，不能影响既有的子系统；技术栈无关性。
我们遵循着这样的条件，逐步的探索微前端的落地实践。
解决问题
各个团队之间要形成一个统一的管理后台，提供给运营和技术人员统一使用统一管理。要做到应用隔离、独立部署、系统路由、各个应用间的通信等功能完善。
目前在前端的架构上大部分分为两种架构，一种是SPA的架构，一个应用栈把所有的子应用都串起来，用户体验非常nice，缺点是整个大的应用是个整体，一旦应用复杂，则维护成本就会大大提高；第二种则是MPA的架构，MPA的优势是子系统拆分明确，可以单独维护发布，部署简单，但是要完成多个子系统的串联应用，则需要重复的刷新应用，对用户来说，体验上则差了许多。我们则需要在MPA和SPA中，找到一个方案，同时兼顾二者的优点，不断新增的系统，不再频繁的对接各种登录、网关和权限。
技术上的支持
1. 发布系统支持
多个系统的部署流程，需要统一推送至指定的Web服务上，这样才能做到多个子系统的统一拼接和管理。
2.前端桥接组件
微前端系统需要将主框架和子系统进行桥接，组装在一起，我们尝试了很多种方案，发现从前端层面的桥接最为简单有效，因此我们开发了 bms-same-layout 桥接组件；
组件通过子系统引用的方式来桥接公共区域，让开发者专注于开发主内容区域；
桥接组件通过域名和配置的判断，同时满足了开发、测试、线上环境的应用需求；
桥接组件兼容了移动端的使用习惯和交互样式，还同时做了内嵌小程序的支持。
3. 后端服务统一对接、登录统一校验、统一对接网关层
我们在Web服务层做了很多通用的聚合功能，减少了各子系统独自对接的成本；
聚合功能包括业务侧的对接、sso登录、csrf防御、基础信息校验、用户权限获取、上传文件等等功能；
这样会大大的降低子系统的开发成本，提高前端人效，我们只需要维护一套Web服务层即可。
4. 权限控制的统一管理
下图是对登录用户查看管理系统的分层图:
登录账户通过Web服务的网关层来获取账户的权限，系统通过获取到的权限去和系统的所有权限资源进行匹配，匹配成功的，则进行子系统组装，统一展示给用户使用。
我们对权限分为多层次的划分，大致分为了两部分：展示信息的权限、访问数据权限，展示信息权限部分是由子系统页面级权限和页面上的按钮级权限组成的，访问数据权限则是由接口权限和数据权限构成，接口权限由网关控制，而数据权限则由业务侧控制。
5. 菜单的维护配置（子系统和外链）
通过静态片段管理系统进行侧边栏菜单数据的配置。
通过配置系统可以自由的控制线上各子系统的聚合，由于有权限系统的权限控制，所以可以由各业务线的开发同学自行新增菜单，无需统一维护。
实践成果
微前端落地在金融管理后台之后，带来了以下利好：
左侧菜单可通过配置系统单独配置，和项目开发隔离开来，即使新系统项目上线失败，也不影响线上的既有系统；
通过权限资源的管理控制，不同权限的登录账户看到的系统是不同的，更易于做到职权分离。
统一维护的账号登录，用户登录后台之后只需要一次登录，即可在金融的各后台系统中进行操作，而无需来回切换各系统；子系统可单独发布部署，对于开发同学来说，大大的的降低了上线的风险。
中间是主应用区域，开发同学只需要关注业务的开发即可，不需要开发重复的功能，人效提高。在此架构下，我们又增加了一些有趣的小功能，来让系统更易用一些。
- 打开左下角的tab功能，即可在多个子系统之间自由切换，无需刷新页面，下图为审核人员，一边使用审核系统去做审核操作，一边通过订单系统查看客户信息的操作流程。
- 我们在此基础上做了移动端的支持，可以让有需要的系统在移动端快捷的使用查看
- 同时也做了小程序的支持，下图示例为日志系统，让我们的技术同学，在通勤的路上再也不用掏电脑查日志了；
- 目前的小程序还在尝试阶段，后续我们根据需要，也会逐步完善小程序的功能，让使用者体验更好。
未来展望
我们希望在更进一步的实现微前端，在Web服务层实现通过html entry的方式来嵌入页面更细力度的模块组合，这样再结合MPA+SPA的模式，会让整个系统更加灵活和易用。
作者简介：
冯德旺：58金融前端开发，主要负责58金融的消费金融、房金融和理财的前端系统架构和开发建设。
