V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
az22c
V2EX  ›  浏览器

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

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

    全都是浏览器 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:41 +08:00
    不是,上面说微前端的是啥意思,这是老旧系统的聚合,和微前端有啥关系,还能为了一个 sso 来个大翻新?
    az22c
        8
    az22c  
    OP
       2021-12-23 10:05:35 +08:00
    @coderfuns
    @ryncv
    @linzhipeng 新系统的确可以试试微前端。旧系统的确不合适这么改造
    l4ever
        9
    l4ever  
       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 系统的页面?
    0312birdzhang
        11
    0312birdzhang  
       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
    需要微应用。
    5sheep
        16
    5sheep  
       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 的,没办法改造。所以我这个系统玩不了两年就要崩了。
    5sheep
        36
    5sheep  
       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   ·   实用小工具   ·   2769 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:54 · PVG 09:54 · LAX 17:54 · JFK 20:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.