微前端配置总结
查阅微前端集成前端代码,梳理整个逻辑,有以下几个关键点:
- 登陆时需要同时发起登陆边界系统的请求,保证同一个用户在两个系统都存在,登陆后都有权限
- 主应用增加子应用umi静态配置、路由配置、菜单配置,运行时在生命周期函数中切换请求前端前缀
- 子应用配置umi静态配置,运行时在生命周期函数中切换请求前端前缀
- 主应用和子应用通过公共model通信,告诉子应用是否应该隐藏某些UI,以及切换不同应用公共权限请求的前缀
bug解决
问题描述:
主应用顶部导航栏的显示,依赖后端返回的菜单权限数据,如果在子应用界面直接刷新,主应用中保存在内存中的菜单权限数据会被清空,此时路由为子应用路由,主应用拦截请求权限数据的wrapper未挂在子应用路由匹配策略中,将不会请求信的权限数据,此时顶部导航栏会显示为空。
问题分析:
在拦截路由时进行权限数据的请求,对于单体应用是合适的,因为全部的界面都有对应的路由,但是对于微前端框架,存在未匹配上的路由。
解决思路:
- 缓存菜单权限至localstorage中(未采用)
- 在顶部导航的组件中添加逻辑,如果菜单权限数据为空,则说明为未匹配上的路由,则代码自动请求一次(点对点的处理)
- 在主应用路由配置中在子应用的特定路由模糊匹配中增加wrapper拦截(目前尝试无法解决问题,原因不详,不了解wrapper拦截的实现原理逻辑)