CN114070618B - 基于微前端的数据处理方法及系统 - Google Patents

基于微前端的数据处理方法及系统 Download PDF

Info

Publication number
CN114070618B
CN114070618B CN202111353427.6A CN202111353427A CN114070618B CN 114070618 B CN114070618 B CN 114070618B CN 202111353427 A CN202111353427 A CN 202111353427A CN 114070618 B CN114070618 B CN 114070618B
Authority
CN
China
Prior art keywords
application
sub
client
page
acquisition request
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202111353427.6A
Other languages
English (en)
Other versions
CN114070618A (zh
Inventor
李尊状
郝长征
孙强
候金明
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nanjing Zhongfu Information Technology Co Ltd
Original Assignee
Nanjing Zhongfu Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Nanjing Zhongfu Information Technology Co Ltd filed Critical Nanjing Zhongfu Information Technology Co Ltd
Priority to CN202111353427.6A priority Critical patent/CN114070618B/zh
Publication of CN114070618A publication Critical patent/CN114070618A/zh
Application granted granted Critical
Publication of CN114070618B publication Critical patent/CN114070618B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L63/00—Network architectures or network communication protocols for network security
    • H04L63/08—Network architectures or network communication protocols for network security for authentication of entities
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L63/00—Network architectures or network communication protocols for network security
    • H04L63/08—Network architectures or network communication protocols for network security for authentication of entities
    • H04L63/0807—Network architectures or network communication protocols for network security for authentication of entities using tickets, e.g. Kerberos
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L63/00—Network architectures or network communication protocols for network security
    • H04L63/08—Network architectures or network communication protocols for network security for authentication of entities
    • H04L63/0815—Network architectures or network communication protocols for network security for authentication of entities providing single-sign-on or federations
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Signal Processing (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Computing Systems (AREA)
  • Computer Security & Cryptography (AREA)
  • Computer Hardware Design (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明提供了一种基于微前端的数据处理方法及系统，涉及数据处理技术领域，所有子应用的数据获取请求统一经过主应用的转发，使得客户端不会跨域，主应用的客户端和子应用的客户端可以共享同一套cookie，还可以达到负载均匀的效果；同时主应用还可以对所有子应用进行统一管理和维护。另外，通过JWT方式鉴权，不用二次登录，且cookie中存储的是基于用户登录信息生成的令牌，与现有技术中用户名和密码明文显示或隐式存在的方式相比，提高了用户信息的安全性。

Description

基于微前端的数据处理方法及系统
技术领域
本发明涉及数据处理技术领域，尤其是涉及一种基于微前端的数据处理方法及系统。
背景技术
微前端(Micro-Frontends)将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。
现有的微前端框架主要采用如下方案：
通过iframe嵌套的方式，主应用和子应用之间的数据交互是通过dom节点获取iframe的window的对象操作的。单点登录的方式分为两种：一种是主应用将用户名和密码进行URL(Uniform Resource Locator，统一资源定位器)参数拼接，子应用通过获取URL参数再登录的方式；一种是主应用把用户名和密码存在window对象上，子应用通过获取主应用数据进行二次登录的方式。
然而上述方案存在如下问题：每个子应用的用户权限菜单都是独立存在，无法做到统一管理和维护；由于用户名和密码都是明文显示或隐式存在的，安全度低，很容易导致用户信息泄露。
发明内容
本发明的目的在于提供一种基于微前端的数据处理方法及系统，以实现所有子应用的统一管理和维护，提高用户信息的安全性。
本发明实施例提供了一种基于微前端的数据处理方法，应用于基于微前端的数据处理系统，所述基于微前端的数据处理系统包括主应用和多个相互隔离的子应用；所述方法包括：
所述主应用的客户端当获取到用户登录信息时，将所述用户登录信息发送至所述主应用的服务端；
所述主应用的服务端当接收到所述用户登录信息时，验证所述用户登录信息的合法性，当所述用户登录信息合法时，根据所述用户登录信息和JWT生成规则生成令牌，并将所述令牌保存在所述主应用的客户端所在的客户端设备的cookie中；
当从所述主应用的客户端页面跳转至第一子应用的客户端页面，且所述第一子应用的客户端与其服务端进行数据交互时，所述第一子应用的客户端从所述客户端设备的cookie中获取所述令牌，并将携带有所述令牌和所述第一子应用对应的目标应用标识的数据获取请求发送至所述主应用的服务端；其中，所述第一子应用为多个所述子应用之一；
所述主应用的服务端当接收到所述数据获取请求时，将所述数据获取请求转发至与所述目标应用标识对应的所述第一子应用的服务端；
所述第一子应用的服务端当接收到所述数据获取请求时，通过JWT对所述令牌进行合法性校验，并当所述令牌合法时，将与所述数据获取请求对应的目标数据返回至所述第一子应用的客户端。
进一步地，所述方法还包括通过如下步骤实现从所述主应用的客户端页面跳转至第一子应用的客户端页面：
所述主应用的客户端当监听到第一子应用的客户端页面跳转操作时，向所述主应用的服务端发送静态资源获取请求，所述静态资源获取请求中携带有与所述第一子应用对应的目标应用标识；
所述主应用的服务端当接收到所述静态资源获取请求时，将所述静态资源获取请求转发至与所述目标应用标识对应的所述第一子应用的客户端；
所述第一子应用的客户端当接收到所述静态资源获取请求时，通过所述第一子应用的服务端获取与所述静态资源获取请求对应的目标资源，并将所述目标资源返回至所述主应用的客户端；
所述主应用的客户端当接收到所述目标资源时，基于所述目标资源跳转至所述第一子应用的客户端页面。
进一步地，所述方法还包括：
所述第一子应用的客户端当监听到页面调整操作时，通过postmessage发送第一广播消息至所述主应用的客户端；
所述主应用的客户端当接收到所述第一广播消息时，根据所述第一广播消息中携带的第一消息类型，确定所述第一子应用的客户端不需要进行页面跳转，并根据所述第一广播消息中的第一广播内容对所述第一子应用的当前客户端页面进行页面调整。
进一步地，所述主应用和各个所述子应用采用iframe嵌套的方式运行；所述方法还包括：
所述第一子应用的客户端当监听到页面跳转操作时，通过postmessage发送第二广播消息至所述主应用的客户端；
所述主应用的客户端当接收到所述第二广播消息时，根据所述第二广播消息中携带的第二消息类型，确定所述第一子应用的客户端需要进行页面跳转，并根据所述第二广播消息中的第二广播内容执行页面跳转操作。
进一步地，所述第二消息类型为应用内跳转类型；所述根据所述第二广播消息中携带的第二消息类型，确定所述第一子应用的客户端需要进行页面跳转，并根据所述第二广播消息中的第二广播内容执行页面跳转操作，包括：
根据所述第二广播消息中携带的应用内跳转类型，确定所述第一子应用的客户端需要进行应用内页面跳转；
当所述第一子应用的客户端支持路由跳转时，通过postmessage发送第三广播消息至所述第一子应用的客户端；以使所述第一子应用的客户端基于所述第三广播消息中的第三消息类型和第三广播内容进行内部路由变更，以进行所述第一子应用的目标页面的资源按需加载，所述资源按需加载指加载所述第一子应用的目标页面自有的静态资源。
进一步地，所述方法还包括：
所述主应用的客户端判断是否接收到所述第一子应用的客户端发送的第四广播消息，所述第四广播消息中的第四消息类型用于指示所述第一子应用的客户端页面已加载完毕；
当判断结果为是时，确定所述第一子应用的客户端支持路由跳转。
进一步地，所述第二消息类型为应用间跳转类型；所述根据所述第二广播消息中携带的第二消息类型，确定所述第一子应用的客户端需要进行页面跳转，并根据所述第二广播消息中的第二广播内容执行页面跳转操作，包括：
根据所述第二广播消息中携带的应用间跳转类型，确定所述第一子应用的客户端需要进行应用间页面跳转；
根据所述第二广播消息中的第二广播内容，确定目的路由；
将iframe的当前路由变更为所述目的路由，以跳转至第二子应用的目标页面。
本发明实施例还提供了一种基于微前端的数据处理系统，包括主应用和多个相互隔离的子应用；
所述主应用的客户端用于当获取到用户登录信息时，将所述用户登录信息发送至所述主应用的服务端；
所述主应用的服务端用于当接收到所述用户登录信息时，验证所述用户登录信息的合法性，当所述用户登录信息合法时，根据所述用户登录信息和JWT生成规则生成令牌，并将所述令牌保存在所述主应用的客户端所在的客户端设备的cookie中；
第一子应用的客户端用于当与所述第一子应用的服务端进行数据交互时，从所述客户端设备的cookie中获取所述令牌，并将携带有所述令牌和所述第一子应用对应的目标应用标识的数据获取请求发送至所述主应用的服务端；其中，所述第一子应用为多个所述子应用之一；
所述主应用的服务端还用于当接收到所述数据获取请求时，将所述数据获取请求转发至与所述目标应用标识对应的所述第一子应用的服务端；
所述第一子应用的服务端用于当接收到所述数据获取请求时，通过JWT对所述令牌进行合法性校验，并当所述令牌合法时，将与所述数据获取请求对应的目标数据返回至所述第一子应用的客户端。
进一步地，所述主应用和各个所述子应用采用iframe嵌套的方式运行；
所述第一子应用的客户端还用于当监听到页面跳转操作时，通过postmessage发送第二广播消息至所述主应用的客户端；
所述主应用的客户端还用于当接收到所述第二广播消息时，根据所述第二广播消息中携带的第二消息类型，确定所述第一子应用的客户端需要进行页面跳转，并根据所述第二广播消息中的第二广播内容执行页面跳转操作。
进一步地，所述第二消息类型为应用内跳转类型；
所述主应用的客户端还用于根据所述第二广播消息中携带的应用内跳转类型，确定所述第一子应用的客户端需要进行应用内页面跳转；当所述第一子应用的客户端支持路由跳转时，通过postmessage发送第三广播消息至所述第一子应用的客户端；以使所述第一子应用的客户端基于所述第三广播消息中的第三消息类型和第三广播内容进行内部路由变更，以进行所述第一子应用的目标页面的资源按需加载，所述资源按需加载指加载所述第一子应用的目标页面自有的静态资源。
本发明实施例提供的基于微前端的数据处理方法及系统中，基于微前端的数据处理系统包括主应用和多个相互隔离的子应用；主应用的客户端当获取到用户登录信息时，将用户登录信息发送至主应用的服务端；主应用的服务端当接收到用户登录信息时，验证用户登录信息的合法性，当用户登录信息合法时，根据用户登录信息和JWT生成规则生成令牌，并将令牌保存在主应用的客户端所在的客户端设备的cookie中；当从主应用的客户端页面跳转至第一子应用的客户端页面，且第一子应用的客户端与其服务端进行数据交互时，第一子应用的客户端从客户端设备的cookie中获取令牌，并将携带有令牌和第一子应用对应的目标应用标识的数据获取请求发送至主应用的服务端；其中，第一子应用为多个子应用之一；主应用的服务端当接收到数据获取请求时，将数据获取请求转发至与目标应用标识对应的第一子应用的服务端；第一子应用的服务端当接收到数据获取请求时，通过JWT对令牌进行合法性校验，并当令牌合法时，将与数据获取请求对应的目标数据返回至第一子应用的客户端。这样所有子应用的数据获取请求统一经过主应用的转发，使得客户端不会跨域，主应用的客户端和子应用的客户端可以共享同一套cookie，还可以达到负载均匀的效果；同时主应用还可以对所有子应用进行统一管理和维护。另外，通过JWT方式鉴权，不用二次登录，且cookie中存储的是基于用户登录信息生成的令牌，与现有技术中用户名和密码明文显示或隐式存在的方式相比，提高了用户信息的安全性。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种基于微前端的数据处理系统的结构示意图；
图2为本发明实施例提供的一种基于微前端的数据处理系统中的主应用的客户端界面示意图；
图3为本发明实施例提供的一种基于微前端的数据处理系统中主应用进行请求代理的示意图；
图4为本发明实施例提供的一种基于微前端的数据处理系统的通信流程示意图；
图5为本发明实施例提供的另一种基于微前端的数据处理系统的通信流程示意图；
图6为本发明实施例提供的一种基于微前端的数据处理方法的流程示意图。
具体实施方式
下面将结合实施例对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
目前web微前端框架主要通过iframe嵌套的方式，主应用和子应用之间的数据交互是通过dom节点获取iframe的window的对象操作的。这种方式存在如下缺点：每个子应用的用户权限菜单都是独立存在，无法做到统一管理和维护；由于用户名和密码都是明文显示或隐式存在的，安全度低，很容易导致用户信息泄露。基于此，本发明实施例提供的一种基于微前端的数据处理方法及系统，可以实现所有子应用的统一管理和维护，提高用户信息的安全性。
为便于对本实施例进行理解，首先对本发明实施例所公开的一种基于微前端的数据处理系统进行详细介绍。
参见图1所示的一种基于微前端的数据处理系统的结构示意图，该系统包括主应用110和多个相互隔离的子应用120。需要说明的是，虽然图1中仅示出了4个子应用120，但本发明的保护范围不限于此，子应用120的数量可以根据实际需求设置。
主应用110拥有登录、用户管理、角色管理、权限管理、菜单管理、日志管理等系统层面的功能模块；子应用120不限制技术栈，具备完全的自主权。本发明实施例的特点是将庞大的整体拆成可控制的小块(子应用)，明确它们之间的依赖关系，每个子应用的代码量更小、更内聚、可维护性高；低耦合，每个子应用可单独开发，渐进升级、更新部分功能。主应用110的客户端界面如图2所示，用户登录主应用110的客户端后，会显示具有操作权限的各个子应用120(如图2中的APP1、APP2、APP3)，用户可以通过点击子应用120的图标，进入相应子应用120的客户端页面。
参见图3所示的一种基于微前端的数据处理系统中主应用进行请求代理的示意图，网关即为主应用的后端(主应用的服务端具有网关功能)，所有请求都统一走网关代理，每个子应用接入主应用服务时，都会配置应用标识，该应用标识可以但不限于为子应用名称，通过这个应用标识，网关就可以把对应的请求转发到对应子应用的前端/后端(客户端/服务端)。这种网关代理方式的优点在于前端不会跨域，所有的前端可以共享同一套cookie；还可以达到负载均匀的效果。
具体地，图3中的前端请求分为两类，一类是主应用的前端(客户端)发送的静态资源获取请求，静态资源获取请求用于加载子应用的页面，其具体形式可以为网关/project/web/***；另一类是子应用的前端(客户端)发送的API后台接口调用请求(数据获取请求)，子应用的前端通过API后台接口调用请求与其后端(服务端)进行数据交互，API后台接口调用请求的具体形式可以为网关/project/apis/***；其中project为应用标识。网关(主应用的后端)可以将静态资源获取请求转发给对应project的前端，对应project的前端可以通过对应project的后端获取资源，并将资源返回给主应用的前端。网关还可以将API后台接口调用请求转发给对应project的后端，对应project的后端获取数据后返回给对应project的前端(即发送API后台接口调用请求的子应用的前端)。
本发明实施例提供的基于微前端的数据处理系统通过JWT(JSON web tokens)方式鉴权，主应用登录成功后，主应用的服务端将返回token(令牌，用户唯一标识)至主应用的客户端，并可以字段“admin-token”存到主应用的客户端所在的客户端设备的cookie里面，供子应用的客户端使用。主应用的服务端中的相应代码如下：
所有子应用的客户端在与其服务端进行数据交互时，都会先从上述cookie里获取“admin-token”放在请求头里。子应用的客户端中的相关代码如下：
服务端获取token后，可以通过鉴权系统解析出用户的所有信息、是否合法访问等，解析结果可以如下：
Request Headers view source
Accept:application/json,text/plain,*/*
Accept-Encoding:gzip,deflate,br
Accept-Language:zh-CN,zh；q＝0.9,en；q＝0.8
Authorization:ey JhbGcioiJIUzI1NiIsInppcCI6IkRFRiJ9/eNqqV···
这种鉴权方式的优点在于不用二次登录，token相比于传统的cookie和session在网络传输中性能更好，耦合度更低。
基于上述内容，可以得到如下方案：基于微前端的数据处理系统包括主应用和多个相互隔离的子应用；
主应用的客户端用于当获取到用户登录信息时，将用户登录信息发送至主应用的服务端；
主应用的服务端用于当接收到用户登录信息时，验证用户登录信息的合法性，当用户登录信息合法时，根据用户登录信息和JWT生成规则生成令牌，并将令牌保存在主应用的客户端所在的客户端设备的cookie中；
第一子应用的客户端用于当与第一子应用的服务端进行数据交互时，从客户端设备的cookie中获取令牌，并将携带有令牌和第一子应用对应的目标应用标识的数据获取请求发送至主应用的服务端；其中，第一子应用为多个子应用之一；
主应用的服务端还用于当接收到数据获取请求时，将数据获取请求转发至与目标应用标识对应的第一子应用的服务端；
第一子应用的服务端用于当接收到数据获取请求时，通过JWT对令牌进行合法性校验，并当令牌合法时，将与数据获取请求对应的目标数据返回至第一子应用的客户端。
这样所有子应用的数据获取请求统一经过主应用的转发，使得客户端不会跨域，主应用的客户端和子应用的客户端可以共享同一套cookie，还可以达到负载均匀的效果；同时主应用还可以对所有子应用进行统一管理和维护。另外，通过JWT方式鉴权，不用二次登录，且cookie中存储的是基于用户登录信息生成的令牌，与现有技术中用户名和密码明文显示或隐式存在的方式相比，提高了用户信息的安全性。
本发明实施例中，应用之间的通信采用postmessage指定广播的方式，主应用的客户端中的相关代码如下：
window.addEventListener('message',this.postMessage)
主应用的客户端在进行应用间通信之前，会先定义好消息类型，主应用的客户端接收消息时先根据消息类型判断是否存在页面跳转，只有消息类型符合才进行相应的数据处理。
具体地，参见图4所示的一种基于微前端的数据处理系统的通信流程示意图，具体的通信流程如下：子应用的客户端通过postmessage发送广播给主应用的客户端；主应用的客户端实时监听广播，检索广播的消息类型，根据消息类型判断是否需要进行页面跳转，当判断结果为是时，主应用的客户端进行路由跳转(路由变更)，从而实现子应用页面的资源加载，完成子应用页面实例化；当判断结果为否时，主应用的客户端执行对应的操作方法。
本实施例中，广播中包括消息类型和广播内容，广播按照消息类型可以分为两大类，一类不需要进行页面跳转，只存在页面变化，目的是变更页面功能，其广播内容可以包括预先约定好的指定方法或指定状态，例如子应用的客户端想使用全屏功能，则所发的广播中的消息类型可以为控制窗口类型，广播内容可以包括全屏状态。另一类需要进行页面跳转，如从一个子应用的当前页面跳转至该子应用的另一页面，或者从一个子应用的当前页面跳转至其他应用(主应用或其他子应用)的另一页面，其广播内容可以包括目的路由。
这种通信方式的好处有两点：一是可以解决跨域问题，不管是挂在网关的服务还是自定义私服都可以收发消息；二是子应用之间交互可以不通过主应用代理转发，直接给对应子应用发消息即可。
本实施例中，主应用和子应用采用iframe嵌套的方式运行，iframe天然支持样式隔离和全局变量隔离。考虑到iframe的通信成本较高，对iframe加载上做了优化，通过路由跳转的方式来切换页面，从而可以提高性能，减少通信成本，增加用户体验。具体过程如图5所示，主应用的客户端在确定需要进行页面跳转后，再次判断是否为应用间跳转，当判断结果为是时，变更iframe的URL地址(由当前路由变更为目的路由)，从而实现子应用页面的资源加载，完成子应用页面实例化；当判断结果为否时，再判断子应用的客户端是否支持路由跳转，如果不支持，变更iframe的URL地址，从而实现子应用页面的资源加载，完成子应用页面实例化；如果支持，则通知子应用的客户端进行路由变更，由子应用的客户端进行内部路由变更，实现子应用页面的资源按需加载，完成子应用页面实例化。资源按需加载指只会加载跳转后的页面自有的静态资源，保留前一页面中公用的静态资源。
判断子应用的客户端是否支持路由跳转的方式如下：定义一个通知可以路由变更的消息类型，当子应用的页面加载完毕后，通过广播告知主应用的客户端可以进行路由变更，主应用的客户端通过判断子应用的客户端是否进行了广播告知，确定子应用的客户端是否支持路由跳转。
对于上述系统的开发和部署：主应用和子应用独立，只要主应用不关闭，子应用可用单独开发、版本升级、启停服务，而不会对其他子应用造成影响。子应用可以随意部署在不同的服务器上，只要把开启好的服务注册到同一个网关服务器(主应用的服务端)就可以了。这样可以增量升级，且代码模块清晰，易扩展，便于维护。
上述系统中的每个子应用可以独立打包测试。因为独立开发，耦合度低，这种模式能减少测试成本。
本发明实施例提供的基于微前端的数据处理系统中，各子应用可以独立开发、维护、部署、测试，高内聚、低耦合、可维护性高、灵活性高；采用iframe加载子应用，此方法有着天然的样式隔离和变量的优点；采用路由跳转的方式优化了现有框架iframe通信成本高、性能差的问题。
基于上述基于微前端的数据处理系统，本发明实施例还提供了一种基于微前端的数据处理方法，参见图6所示的一种基于微前端的数据处理方法的流程示意图，该方法包括如下步骤：
步骤S602，主应用的客户端当获取到用户登录信息时，将用户登录信息发送至主应用的服务端。
步骤S604，主应用的服务端当接收到用户登录信息时，验证用户登录信息的合法性，当用户登录信息合法时，根据用户登录信息和JWT生成规则生成令牌，并将令牌保存在主应用的客户端所在的客户端设备的cookie中。
步骤S606，当从主应用的客户端页面跳转至第一子应用的客户端页面，且第一子应用的客户端与其服务端进行数据交互时，第一子应用的客户端从客户端设备的cookie中获取令牌，并将携带有令牌和第一子应用对应的目标应用标识的数据获取请求发送至主应用的服务端；其中，第一子应用为多个子应用之一。
步骤S608，主应用的服务端当接收到数据获取请求时，将数据获取请求转发至与目标应用标识对应的第一子应用的服务端。
步骤S610，第一子应用的服务端当接收到数据获取请求时，通过JWT对令牌进行合法性校验，并当令牌合法时，将与数据获取请求对应的目标数据返回至第一子应用的客户端。
这样所有子应用的数据获取请求统一经过主应用的转发，使得客户端不会跨域，主应用的客户端和子应用的客户端可以共享同一套cookie，还可以达到负载均匀的效果；同时主应用还可以对所有子应用进行统一管理和维护。另外，通过JWT方式鉴权，不用二次登录，且cookie中存储的是基于用户登录信息生成的令牌，与现有技术中用户名和密码明文显示或隐式存在的方式相比，提高了用户信息的安全性。
进一步地，上述方法还包括通过如下步骤实现从主应用的客户端页面跳转至第一子应用的客户端页面：
主应用的客户端当监听到第一子应用的客户端页面跳转操作时，向主应用的服务端发送静态资源获取请求，静态资源获取请求中携带有与第一子应用对应的目标应用标识；
主应用的服务端当接收到静态资源获取请求时，将静态资源获取请求转发至与目标应用标识对应的第一子应用的客户端；
第一子应用的客户端当接收到静态资源获取请求时，通过第一子应用的服务端获取与静态资源获取请求对应的目标资源，并将目标资源返回至主应用的客户端；
主应用的客户端当接收到目标资源时，基于目标资源跳转至第一子应用的客户端页面。
进一步地，上述方法还包括：
第一子应用的客户端当监听到页面调整操作时，通过postmessage发送第一广播消息至主应用的客户端；
主应用的客户端当接收到第一广播消息时，根据第一广播消息中携带的第一消息类型，确定第一子应用的客户端不需要进行页面跳转，并根据第一广播消息中的第一广播内容对第一子应用的当前客户端页面进行页面调整。
进一步地，上述主应用和各个子应用采用iframe嵌套的方式运行；上述方法还包括：
第一子应用的客户端当监听到页面跳转操作时，通过postmessage发送第二广播消息至主应用的客户端；
主应用的客户端当接收到第二广播消息时，根据第二广播消息中携带的第二消息类型，确定第一子应用的客户端需要进行页面跳转，并根据第二广播消息中的第二广播内容执行页面跳转操作。
进一步地，上述第二消息类型为应用内跳转类型；根据第二广播消息中携带的第二消息类型，确定第一子应用的客户端需要进行页面跳转，并根据第二广播消息中的第二广播内容执行页面跳转操作，包括：
根据第二广播消息中携带的应用内跳转类型，确定第一子应用的客户端需要进行应用内页面跳转；
当第一子应用的客户端支持路由跳转时，通过postmessage发送第三广播消息至第一子应用的客户端；以使第一子应用的客户端基于第三广播消息中的第三消息类型和第三广播内容进行内部路由变更，以进行第一子应用的目标页面的资源按需加载，资源按需加载指加载第一子应用的目标页面自有的静态资源。
进一步地，上述方法还包括：
主应用的客户端判断是否接收到第一子应用的客户端发送的第四广播消息，第四广播消息中的第四消息类型用于指示第一子应用的客户端页面已加载完毕；
当判断结果为是时，确定第一子应用的客户端支持路由跳转。
进一步地，上述第二消息类型为应用间跳转类型；根据第二广播消息中携带的第二消息类型，确定第一子应用的客户端需要进行页面跳转，并根据第二广播消息中的第二广播内容执行页面跳转操作，包括：
根据第二广播消息中携带的应用间跳转类型，确定第一子应用的客户端需要进行应用间页面跳转；
根据第二广播消息中的第二广播内容，确定目的路由；
将iframe的当前路由变更为目的路由，以跳转至第二子应用的目标页面。
本实施例所提供的方法，其实现原理及产生的技术效果和前述系统实施例相同，为简要描述，方法实施例部分未提及之处，可参考前述系统实施例中相应内容。
在这里示出和描述的所有示例中，任何具体值应被解释为仅仅是示例性的，而不是作为限制，因此，示例性实施例的其他示例可以具有不同的值。
附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (9)

1.一种基于微前端的数据处理方法，其特征在于，应用于基于微前端的数据处理系统，所述基于微前端的数据处理系统包括主应用和多个相互隔离的子应用；所述方法包括：
所述主应用的客户端当获取到用户登录信息时，将所述用户登录信息发送至所述主应用的服务端；
所述主应用的服务端当接收到所述用户登录信息时，验证所述用户登录信息的合法性，当所述用户登录信息合法时，根据所述用户登录信息和JWT生成规则生成令牌，并将所述令牌保存在所述主应用的客户端所在的客户端设备的cookie中；
当从所述主应用的客户端页面跳转至第一子应用的客户端页面，且所述第一子应用的客户端与其服务端进行数据交互时，所述第一子应用的客户端从所述客户端设备的cookie中获取所述令牌，并将携带有所述令牌和所述第一子应用对应的目标应用标识的数据获取请求发送至所述主应用的服务端；其中，所述第一子应用为多个所述子应用之一；
所述主应用的服务端当接收到所述数据获取请求时，将所述数据获取请求转发至与所述目标应用标识对应的所述第一子应用的服务端；
所述第一子应用的服务端当接收到所述数据获取请求时，通过JWT对所述令牌进行合法性校验，并当所述令牌合法时，将与所述数据获取请求对应的目标数据返回至所述第一子应用的客户端；
所述方法还包括通过如下步骤实现从所述主应用的客户端页面跳转至第一子应用的客户端页面：
所述主应用的客户端当监听到第一子应用的客户端页面跳转操作时，向所述主应用的服务端发送静态资源获取请求，所述静态资源获取请求中携带有与所述第一子应用对应的目标应用标识；
所述主应用的服务端当接收到所述静态资源获取请求时，将所述静态资源获取请求转发至与所述目标应用标识对应的所述第一子应用的客户端；
所述第一子应用的客户端当接收到所述静态资源获取请求时，通过所述第一子应用的服务端获取与所述静态资源获取请求对应的目标资源，并将所述目标资源返回至所述主应用的客户端；
所述主应用的客户端当接收到所述目标资源时，基于所述目标资源跳转至所述第一子应用的客户端页面。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
所述第一子应用的客户端当监听到页面调整操作时，通过postmessage发送第一广播消息至所述主应用的客户端；
所述主应用的客户端当接收到所述第一广播消息时，根据所述第一广播消息中携带的第一消息类型，确定所述第一子应用的客户端不需要进行页面跳转，并根据所述第一广播消息中的第一广播内容对所述第一子应用的当前客户端页面进行页面调整。
3.根据权利要求1所述的方法，其特征在于，所述主应用和各个所述子应用采用iframe嵌套的方式运行；所述方法还包括：
所述第一子应用的客户端当监听到页面跳转操作时，通过postmessage发送第二广播消息至所述主应用的客户端；
所述主应用的客户端当接收到所述第二广播消息时，根据所述第二广播消息中携带的第二消息类型，确定所述第一子应用的客户端需要进行页面跳转，并根据所述第二广播消息中的第二广播内容执行页面跳转操作。
4.根据权利要求3所述的方法，其特征在于，所述第二消息类型为应用内跳转类型；所述根据所述第二广播消息中携带的第二消息类型，确定所述第一子应用的客户端需要进行页面跳转，并根据所述第二广播消息中的第二广播内容执行页面跳转操作，包括：
根据所述第二广播消息中携带的应用内跳转类型，确定所述第一子应用的客户端需要进行应用内页面跳转；
当所述第一子应用的客户端支持路由跳转时，通过postmessage发送第三广播消息至所述第一子应用的客户端；以使所述第一子应用的客户端基于所述第三广播消息中的第三消息类型和第三广播内容进行内部路由变更，以进行所述第一子应用的目标页面的资源按需加载，所述资源按需加载指加载所述第一子应用的目标页面自有的静态资源。
5.根据权利要求4所述的方法，其特征在于，所述方法还包括：
所述主应用的客户端判断是否接收到所述第一子应用的客户端发送的第四广播消息，所述第四广播消息中的第四消息类型用于指示所述第一子应用的客户端页面已加载完毕；
当判断结果为是时，确定所述第一子应用的客户端支持路由跳转。
6.根据权利要求3所述的方法，其特征在于，所述第二消息类型为应用间跳转类型；所述根据所述第二广播消息中携带的第二消息类型，确定所述第一子应用的客户端需要进行页面跳转，并根据所述第二广播消息中的第二广播内容执行页面跳转操作，包括：
根据所述第二广播消息中携带的应用间跳转类型，确定所述第一子应用的客户端需要进行应用间页面跳转；
根据所述第二广播消息中的第二广播内容，确定目的路由；
将iframe的当前路由变更为所述目的路由，以跳转至第二子应用的目标页面。
7.一种基于微前端的数据处理系统，其特征在于，包括主应用和多个相互隔离的子应用；
所述主应用的客户端用于当获取到用户登录信息时，将所述用户登录信息发送至所述主应用的服务端；
所述主应用的服务端用于当接收到所述用户登录信息时，验证所述用户登录信息的合法性，当所述用户登录信息合法时，根据所述用户登录信息和JWT生成规则生成令牌，并将所述令牌保存在所述主应用的客户端所在的客户端设备的cookie中；
第一子应用的客户端用于当与所述第一子应用的服务端进行数据交互时，从所述客户端设备的cookie中获取所述令牌，并将携带有所述令牌和所述第一子应用对应的目标应用标识的数据获取请求发送至所述主应用的服务端；其中，所述第一子应用为多个所述子应用之一；
所述主应用的服务端还用于当接收到所述数据获取请求时，将所述数据获取请求转发至与所述目标应用标识对应的所述第一子应用的服务端；
所述第一子应用的服务端用于当接收到所述数据获取请求时，通过JWT对所述令牌进行合法性校验，并当所述令牌合法时，将与所述数据获取请求对应的目标数据返回至所述第一子应用的客户端；
所述主应用的客户端还用于当监听到第一子应用的客户端页面跳转操作时，向所述主应用的服务端发送静态资源获取请求，所述静态资源获取请求中携带有与所述第一子应用对应的目标应用标识；
所述主应用的服务端还用于当接收到所述静态资源获取请求时，将所述静态资源获取请求转发至与所述目标应用标识对应的所述第一子应用的客户端；
所述第一子应用的客户端还用于当接收到所述静态资源获取请求时，通过所述第一子应用的服务端获取与所述静态资源获取请求对应的目标资源，并将所述目标资源返回至所述主应用的客户端；
所述主应用的客户端还用于当接收到所述目标资源时，基于所述目标资源跳转至所述第一子应用的客户端页面。
8.根据权利要求7所述的系统，其特征在于，所述主应用和各个所述子应用采用iframe嵌套的方式运行；
所述第一子应用的客户端还用于当监听到页面跳转操作时，通过postmessage发送第二广播消息至所述主应用的客户端；
所述主应用的客户端还用于当接收到所述第二广播消息时，根据所述第二广播消息中携带的第二消息类型，确定所述第一子应用的客户端需要进行页面跳转，并根据所述第二广播消息中的第二广播内容执行页面跳转操作。
9.根据权利要求8所述的系统，其特征在于，所述第二消息类型为应用内跳转类型；
所述主应用的客户端还用于根据所述第二广播消息中携带的应用内跳转类型，确定所述第一子应用的客户端需要进行应用内页面跳转；当所述第一子应用的客户端支持路由跳转时，通过postmessage发送第三广播消息至所述第一子应用的客户端；以使所述第一子应用的客户端基于所述第三广播消息中的第三消息类型和第三广播内容进行内部路由变更，以进行所述第一子应用的目标页面的资源按需加载，所述资源按需加载指加载所述第一子应用的目标页面自有的静态资源。
CN202111353427.6A 2021-11-16 2021-11-16 基于微前端的数据处理方法及系统 Active CN114070618B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111353427.6A CN114070618B (zh) 2021-11-16 2021-11-16 基于微前端的数据处理方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111353427.6A CN114070618B (zh) 2021-11-16 2021-11-16 基于微前端的数据处理方法及系统

Publications (2)

Publication Number Publication Date
CN114070618A CN114070618A (zh) 2022-02-18
CN114070618B true CN114070618B (zh) 2024-02-09

Family

ID=80273478

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111353427.6A Active CN114070618B (zh) 2021-11-16 2021-11-16 基于微前端的数据处理方法及系统

Country Status (1)

Country Link
CN (1) CN114070618B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114661375A (zh) * 2022-03-24 2022-06-24 阿里云计算有限公司 应用集成方法及装置
CN116795446A (zh) * 2022-03-25 2023-09-22 西安即刻易用网络科技有限公司 一种子应用打开方法、配置方法及多应用管理平台
CN114978728A (zh) * 2022-05-27 2022-08-30 中国银行股份有限公司 基于多个应用的登录方法、装置、设备和介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111628965A (zh) * 2020-04-03 2020-09-04 北京奇艺世纪科技有限公司 一种跨域名登录方法及装置
CN112769798A (zh) * 2020-12-30 2021-05-07 中国农业银行股份有限公司 一种登录方法及装置
CN112988153A (zh) * 2021-03-17 2021-06-18 薪得付信息技术(上海)有限公司 基于微前端的数据处理方法及框架

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11170065B2 (en) * 2020-02-07 2021-11-09 Citrix Systems, Inc. Technology agnostic UI microservices

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111628965A (zh) * 2020-04-03 2020-09-04 北京奇艺世纪科技有限公司 一种跨域名登录方法及装置
CN112769798A (zh) * 2020-12-30 2021-05-07 中国农业银行股份有限公司 一种登录方法及装置
CN112988153A (zh) * 2021-03-17 2021-06-18 薪得付信息技术(上海)有限公司 基于微前端的数据处理方法及框架

Also Published As

Publication number Publication date
CN114070618A (zh) 2022-02-18

Similar Documents

Publication Publication Date Title
CN114070618B (zh) 基于微前端的数据处理方法及系统
Chandramouli Microservices-based application systems
US11303647B1 (en) Synthetic request injection to disambiguate bypassed login events for cloud policy enforcement
US11757944B2 (en) Network intermediary with network request-response mechanism
US11985168B2 (en) Synthetic request injection for secure access service edge (SASE) cloud architecture
US11831683B2 (en) Cloud object security posture management
US11271972B1 (en) Data flow logic for synthetic request injection for cloud security enforcement
EP2817733B1 (en) Identity provider discovery service using a publish-subscribe model
US8832271B2 (en) Identity provider instance discovery
US11336698B1 (en) Synthetic request injection for cloud policy enforcement
US11271973B1 (en) Synthetic request injection to retrieve object metadata for cloud policy enforcement
US11647052B2 (en) Synthetic request injection to retrieve expired metadata for cloud policy enforcement
MX2011003223A (es) Acceso al proveedor de servicio.
JP2008009607A (ja) 情報処理システムおよび制御プログラム
US9699177B2 (en) Secure transfer of web application client persistent state information into a new domain
US20230418583A1 (en) Containerized, decentralized, and distributed web applications with end-to-end encryption
WO2022226202A1 (en) Synthetic request injection to retrieve object metadata for cloud policy enforcement
US8312154B1 (en) Providing enhanced access to remote services
Doosthosseini et al. Chat AI: A Seamless Slurm-Native Solution for HPC-Based Services
WO2022226198A1 (en) Synthetic request injection to generate metadata for cloud security enforcement
CN117319486A (zh) 一种微服务的调试方法、装置、电子设备及存储介质
WO2022226210A1 (en) Synthetic request injection for cloud policy enforcement

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant