微前端架构下,主应用如何快速获取子应用的路由结构?

2023-07-08 15:34:18 +08:00
 artshooter

背景:某后台管理系统用 乾坤微前端框架,进行了拆分。 拆分后 主应用负责登陆/菜单展示等基础功能;子应用负责展示模块内的页面。

问题:当模块内需要增加菜单时,需要在主/子应用内 都增加相同菜单配置。 (主应用里的 用于展示在菜单栏,子应用里的 用于注册这个菜单路由。) 感觉这样操作很繁琐。 在多人协同开发时,主应用中的改动还容易冲突。

诉求:

  1. 增/改 菜单路径时,只需要修改子应用内的代码,即可实现在菜单栏中展示新的菜单。
  2. 只通过 修改主应用或者运维配置 来实现诉求 1 (因为子应用很多,如果是通过修改子应用实现的话,改动很大且重复

当前想法: 将后台系统的菜单结构缓存在浏览器中,在进入子应用时 更新菜单结构; 主应用利用缓存中的菜单结构进行菜单栏展示; 若浏览器缓存中无菜单结构,则使用主应用代码中的菜单结构展示,并缓存。

当前遇到的问题: 无法 “在进入子应用时 更新菜单结构” 。 因为在进入子应用时,只能根据子应用的地址 获取出子应用的 html ,app.js 等打包后的代码。 app.js 中的代码经过了混淆处理 无法解析出子应用的 router 。

额外信息: 前端框架 vue2 ,子应用的 gitlab-ci 是直接使用的公共模版 所有的子应用的 ci/cd 流程一次修改 多处生效, 子应用数量大约有十几个, 不用考虑浏览器兼容 最新的 chrome 能实现即可。

998 次点击
所在节点    程序员
7 条回复
RealJacob
2023-07-08 15:45:27 +08:00
不认为做到浏览器缓存里是件好事,看起来只是很临时的方案。当然只用 qiankun 应该是做不到这个描述的,可以在一个运维系统中管理子应用配置(包括 router 的配置以及其他的配置),而不是在主应用中 hard code 维护这些配置或者在浏览器缓存里维护。每次进到主应用调用接口获取配置,加载对应子应用
RealJacob
2023-07-08 15:48:06 +08:00
@RealJacob 补充下,不是不能 hardcode ,如果针对不常变化的主子应用,hardcode 肯定也是合适的,但针对你这个场景,时不时增加一个子应用入口,还是配置化更合理。多调一个接口的成本,减少了管理成本,新增子应用基座也无需改动
flyqie
2023-07-08 16:07:17 +08:00
楼上 +1

建议直接抽出来一个配置中心。
artshooter
2023-07-08 17:29:56 +08:00
好的,受教了。感谢
@RealJacob @flyqie
xuanbg
2023-07-08 18:25:44 +08:00
微前端的话,就没什么主从关系,所有应用都是平等的。你可以指定一个入口应用,然后在入口应用实现登录和个人中心功能。访问其他应用的话,url 带着 token 过去就行了。
musi
2023-07-08 18:57:45 +08:00
可以在打包的时候生成一份路由表,前端直接加载就行了
artshooter
2023-07-08 23:12:06 +08:00
@xuanbg 嗯 ,只是语癖上 把那个入口应用叫做主应用了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/955108

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX