umi plugin-qiankun阅读总结

497 阅读2分钟
微前端配置总结

查阅微前端集成前端代码,梳理整个逻辑,有以下几个关键点:

  1. 登陆时需要同时发起登陆边界系统的请求,保证同一个用户在两个系统都存在,登陆后都有权限
  2. 主应用增加子应用umi静态配置、路由配置、菜单配置,运行时在生命周期函数中切换请求前端前缀
  3. 子应用配置umi静态配置,运行时在生命周期函数中切换请求前端前缀
  4. 主应用和子应用通过公共model通信,告诉子应用是否应该隐藏某些UI,以及切换不同应用公共权限请求的前缀
bug解决
问题描述:

主应用顶部导航栏的显示,依赖后端返回的菜单权限数据,如果在子应用界面直接刷新,主应用中保存在内存中的菜单权限数据会被清空,此时路由为子应用路由,主应用拦截请求权限数据的wrapper未挂在子应用路由匹配策略中,将不会请求信的权限数据,此时顶部导航栏会显示为空。

问题分析:

在拦截路由时进行权限数据的请求,对于单体应用是合适的,因为全部的界面都有对应的路由,但是对于微前端框架,存在未匹配上的路由。

解决思路:
  1. 缓存菜单权限至localstorage中(未采用)
  2. 在顶部导航的组件中添加逻辑,如果菜单权限数据为空,则说明为未匹配上的路由,则代码自动请求一次(点对点的处理)
  3. 在主应用路由配置中在子应用的特定路由模糊匹配中增加wrapper拦截(目前尝试无法解决问题,原因不详,不了解wrapper拦截的实现原理逻辑)