怎么在页面上集成各个业务系统的菜单?彦祖们 贵司是如何做的 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
az22c
V2EX    浏览器

怎么在页面上集成各个业务系统的菜单?彦祖们 贵司是如何做的

  •  1
     
  •   az22c 2021-12-23 09:32:07 +08:00 4968 次点击
    这是一个创建于 1455 天前的主题,其中的信息可能已经有所发展或是发生改变。

    全都是浏览器 web 架构。以前旧的各大业务系统已经是做好的,一开始是互相用户数据隔离的。

    现在是“单点登录”已经做好了一段时间。有一个管理平台统一接管用户体系角色体系菜单体系等等的数据。

    老板还是觉得单点登录仍不够方便(装逼)切换到另外一个业务系统需要打开新的标签页,每个业务系统的菜单样式各自不同。

    所以想把不同业务系统的菜单都集成到同一个菜单里面,点击就能直接切换显示不同业务系统里面的菜单页面,不用弹出新的标签页

    (像阿里云 web 客户端这种,就是弹出标签页的方案,并不是我们目前想要的。阿里云 web 客户端就是每个业务系统规模很大,几百个菜单都是归属于同一个系统的,但是用户能感知到的相关的业务系统数目不会很多,这样用户也能忍受次数不是很多的新标签页打开。)

    (iframe 切换显示菜单页面,的确符合这个需求,目前也是使用这种来实现。但是觉得 iframe 迟早要彻底凉凉啊。而且很多 iframe 相关 api 被禁用了,导致这种方案 bug 很多)

    38 条回复    2023-02-24 13:19:31 +08:00
    murmur
        1
    murmur  
       2021-12-23 09:36:08 +08:00
    没做,iframe 是各种不靠谱,尤其是现在要求 https ,老系统什么都没法动,进了 iframe 资源都加载不了
    duduaba
        2
    duduaba  
       2021-12-23 09:44:18 +08:00
    这不就是前端"微服务"要做的事,你看看 qiankun 或者 single-spa 可以做到,各个子业务不要菜单,然后基座里引入菜单。
    chihiro2014
        3
    chihiro2014  
       2021-12-23 09:44:47 +08:00
    前几天刚解禁 iframe 的问题。。。相当难搞
    ryncv
        4
    ryncv  
       2021-12-23 09:44:54 +08:00
    这是需要微前端架构了,阿里的 qiankun 可以试一下。
    linzhipeng
        5
    linzhipeng  
       2021-12-23 09:48:36 +08:00
    micro-app github
    chihiro2014
        6
    chihiro2014  
       2021-12-23 09:49:36 +08:00
    我们的登录验证模块是以 jar 包的形式导入的。各个系统用的都是同一套,都是基于 session 和 cookie 。这就导致 iframe 出现跨域问题,要么选择浏览器版本降低到 chrome 50 以下,要么选择换方案。最后是改写了登录模块,加入了 token ,然后把 token 放在 queryString 里面,再让前端塞到 requestHeader 。。。解决登录验证问题
    murmur
        7
    murmur  
       2021-12-23 09:49:4 +08:00
    不是,上面说微前端的是啥意思,这是老旧系统的聚合,和微前端有啥关系,还能为了一个 sso 来个大翻新?
    az22c
        8
    az22c  
    OP
       2021-12-23 10:05:35 +08:00
    @coderfuns
    @ryncv
    @linzhipeng 新系统的确可以试试微前端。旧系统的确不合适这么改造
    luckyc
        9
    luckyc  
       2021-12-23 10:25:25 +08:00
    A 系统点击 B 系统时, 带上参数
    参数内包含了两个系统的身份识别, 比如用户 id,
    B 系统解析 A 系统传递的参数. 获取用户身份.

    严谨一点就是 A 系统生成 ticket, B 系统后端根据 ticket 从 A 系统查用户信息
    az22c
        10
    az22c  
    OP
       2021-12-23 10:53:43 +08:00
    > A 系统点击 B 系统时, 带上参数

    @l4ever 那在页面上,怎么从显示 A 系统改为显示 B 系统的页面?
    1daydayde
        11
    1daydayde  
       2021-12-23 11:58:29 +08:00
    魔改 cas (单点登录)页面,ul-li 完事,又不是不能用(手动狗头
    gxm44
        12
    gxm44  
       2021-12-23 12:01:42 +08:00   1
    qiankun 可以,就是坑太多,还真不如 iframe ,https 的问题反代下就好了
    libook
        13
    libook  
       2021-12-23 12:30:36 +08:00   1
    我们切微前端架构了。

    iframe 应该不会凉,只是安全方面加强了,相应的便捷程度就下降了,如果问题不多可以前期用 iframe 顶一下,后面块顶不住了换微前端。
    dengji85
        14
    dengji85  
       2021-12-23 14:09:58 +08:00
    每个业务系统的前端框架也不同,有些老的是 iframe ,现在整合用 iframe 没问题,要是有些是拿不出单个页面显示还得改造业务系统,难,我也有方面需求,mak
    xiang0818
        15
    xiang0818  
       2021-12-23 14:10:46 +08:00
    需要微应用。
    sivl6p
        16
    sivl6p  
       2021-12-23 15:21:58 +08:00
    就是用一个主网站(即门户系统)去集成几个老系统。
    最终让这些个系统看起来想一个系统一样,所有系统都用同一个后台。
    用户只在主网站登录,权限、角色、菜单管理也都在主网站进行。其它子系统只作为纯业务系统。
    今年我的主要工作就是在干这个。。。 真挺神奇的,咱们的需求都一样啊。

    我们也是用的 iframe ,项目已经跑了几个月了,用户既可以使用集成的新平台,又可以像以前一样使用老系统,完美兼容。
    听说两年后 chrome 会完全禁止跨域设置 cookie ,不管服务器怎么配置响应头不管用。不知道是不是真的。
    murmur
        17
    murmur  
       2021-12-23 15:35:33 +08:00
    @xiang0818 来仔细说说,我看了 qiankun ,那东西得配置导出函数把,我们做的东西有的是 jsp 、aspx 做的模板引擎,连个 js 都找不到,怎么配置他的导出函数

    楼主的需求是把不限制技术栈的东西整合到一起,类似企业门户,而不是手握代码的一堆 webpack 近现代项目
    ezreal
        18
    ezreal  
       2021-12-23 15:45:02 +08:00   1
    浏览器插件或者猴子脚本,或者打包好无依赖的脚本注入到每个项目?可以从前向后慢慢过渡,项目多一个个加还是麻烦的。
    meshell
        19
    meshell  
       2021-12-23 16:30:54 +08:00
    我这边的做法就是:有一个叫管理中心的后台里面负责接入各种业务的后台,管理中心里面提供菜单,权限,角色,用户,用应管理这些基础管理。然后管理中心后台提供 API ,比如说菜单 API 等等。然后出一个 SDK ,业务后台集成这个 SDK 。
    az22c
        20
    az22c  
    OP
       2021-12-23 16:32:30 +08:00
    > 我们做的东西有的是 jsp 、aspx 做的模板引擎

    @murmur 我这边也有基于.net 的,也有基于 webpack 的 vue 这些的
    az22c
        21
    az22c  
    OP
       2021-12-23 16:34:52 +08:00
    > “浏览器插件或者猴子脚本,或者打包好无依赖的脚本注入到每个项目?可以从前向后慢慢过渡,项目多一个个加还是麻烦的。"

    @ezreal目前也是在尝试给每个系统注入相同的大菜单。但是点击菜单跳转的时候,应该是需要刷新页面的。用的 iframe 可以局部刷新
    az22c
        22
    az22c  
    OP
       2021-12-23 16:37:29 +08:00
    > 我这边的做法就是:有一个叫管理中心的后台里面负责接入各种业务的后台

    @meshell 你这个是集成数据吧,我这边目前已经完成这个集成了。目前能够统一登陆,也能够经过跳转登陆各个业务系统。

    我想做的是集成页面
    ddch1997
        23
    ddch1997  
       2021-12-23 16:50:26 +08:00
    巧了,我们这边的 zf 门户改造也是这么集成旧系统,前端解决方案到现在都没法给出来
    meshell
        24
    meshell  
       2021-12-23 17:48:46 +08:00
    @az22c 意思就是 A 的菜单 集成到 B 里面或者其它里面?
    4771314
        25
    4771314  
       2021-12-23 17:51:51 +08:00
    微前端走起
    az22c
        26
    az22c  
    OP
       2021-12-23 17:55:57 +08:00 via Android
    @meshell 继承为全局统一的菜单
    cxe2v
        27
    cxe2v  
       2021-12-23 17:56:49 +08:00
    微前端,你需要魔改你的老系统
    iwasthere
        28
    iwasthere  
       2021-12-23 18:18:01 +08:00 via iPhone
    qiankun 目前在多开和子系统带有 fixed 时不太好解决
    meshell
        29
    meshell  
       2021-12-23 20:43:56 +08:00
    @az22c 在管理中心做一个集成全是菜单的页面不行,管理中心反正啥应用的数据都有。
    zqx
        30
    zqx  
       2021-12-24 06:24:54 +08:00 via Android   1
    把菜单和路由管理做成组件,最好是技术栈无关的,每个老系统都引入这个组件并调成一样的布局。
    首页做一个新的门户系统,包括登录逻辑。
    nginx 给每个老系统分发入口路径,所有系统的域名都是门户系统的,根据路径不同代理到不同老系统。
    最终效果是,用户进入门户,点击不同菜单项,网页加载不同 HTML ,整体布局不变,内容区域变成各系统,因为域名一致,也实现了免登录。
    老系统内部的二级三级菜单,也可以集成到门户中。
    chlinlearn
        31
    chlinlearn  
       2021-12-24 08:55:02 +08:00
    用 nginx 作跳转它不能实现这个?
    NjcyNzMzNDQ3
        32
    NjcyNzMzNDQ3  
       2021-12-24 09:16:18 +08:00   1
    同一个世界、同一个需求

    我们是如果新项目框架 vue 、react 可以用 qiankun 。
    老项目 mvc 的 jsp 、php 还用 iframe ,用 postMessage 做跨域数据通信。

    门户菜单打算由子系统通过跨域数据通信共享( postMessage )回传给门户。
    权限控制没想好,因为子系统业务场景都不一样,没办法用一套权限模板。
    Joker123456789
        33
    Joker123456789  
       2021-12-24 10:35:24 +08:00
    请求多个 接口,把得到的菜单 汇总后,统一渲染
    a90120411
        34
    a90120411  
       2021-12-24 11:16:47 +08:00
    原有项目有 JSP 、asp.net 、还有前端后端分离的。这情况用 iframe 可能是现阶段最优解决方案了。
    az22c
        35
    az22c  
    OP
       2022-07-24 12:37:39 +08:00
    @5sheep
    @ddch1997
    大佬们,这个项目还有在弄吗?现在浏览器厂商正式确定不给使用第三方 cookie 了。我这边内嵌的那些旧系统都是原本用 cookie 的,没办法改造。所以我这个系统玩不了两年就要崩了。
    sivl6p
        36
    sivl6p  
       2023-02-23 16:51:48 +08:00   1
    @az22c 项目目前还在正常运行。
    前端 iframe 集成,底层技术是 js 跨域通讯。 像一下弹框,打开 tab 页面,模态窗口,都可以做到完美兼容。某些极端情况通过重写旧系统的视图引擎解决。
    cookie 通过后端代理加上对应响应头
    用户权限 加一个主数据系统、加一个特殊的 sso ,可以做到 在新平台内打开旧系统页面时,使用的是新平台的组织架构和权限数据。直接访问旧系统时,使用旧系统的权限数据,这对需要重构组织架构是有用的。
    az22c
        37
    az22c  
    OP
       2023-02-24 13:01:43 +08:00
    @5sheep 我们公司是这样的,门户系统是 company.com 。老系统因历史原因是 company2.com ,iframe 嵌套在门户系统的里面。

    老系统用的是.net 和 cookie 维护用户状态,iframe 里面不让发送第三方 cookie ,导致老系统在嵌在门户 iframe 内时不能登录
    az22c
        38
    az22c  
    OP
       2023-02-24 13:19:31 +08:00
    @5sheep 不知道你有没有做过门户系统前端部分的开发,调试起来贼麻烦。每个老系统都要制作一个假的 https 证书
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1224 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 17:34 PVG 01:34 LAX 09:34 JFK 12:34
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86