System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 一种基于qiankun框架的前端系统技术方案_技高网

一种基于qiankun框架的前端系统技术方案

技术编号:41209802 阅读:4 留言:0更新日期:2024-05-09 23:32
本申请属于计算机技术领域,具体涉及一种基于qiankun框架的前端系统,包括:主应用和若干子应用;主应用用于:获取用户的身份验证信息,根据用户的身份验证信息校验用户访问子应用的权限;根据用户访问子应用的权限,确定子应用的可访问资源;响应于用户访问可访问资源中目标资源的访问指令,获取目标资源;主应用的fetch函数配置为:获取可访问资源中的动态资源时,向获取动态资源的http请求添加用户的cookie信息。本申请中主应用获取子应用的动态资源时,主应用的fetch函数使http请求携带用户的cookie信息,使服务端可以根据cookie校验用户是否具有访问该动态资源的权限,避免了主应用加载的子应用资源时跨域报错问题以及子应用发送http请求出现跨域报错和权限报错的问题。

【技术实现步骤摘要】

本申请属于计算机,具体涉及一种基于qiankun框架的前端系统


技术介绍

1、随着现代工业从数字化走向智能化,对工业操作系统的前端应用程序提出了更高的要求。由于工业操作系统直接服务于工业生产,工业生产的复杂性使工业操作系统必然包括多种不同类型的前端应用,如果将这些不同类型的前端应用简单耦合,构成大型前端应用,会导致大型前端应用复杂度太高、稳定性和可维护性降低。

2、qiankun是一种微前端框架,基于qiankun框架,可以将一个大型前端应用拆分成多个独立的子应用,每个子应用可以独立开发、独立部署,同时可以通过主应用管理子应用。

3、然而,使用qiankun框架搭建的前端系统,当主应用加载的子应用资源与主应用不同源时,会出现跨域报错的问题,子应用发送http请求也会出现跨域报错和权限报错的问题。


技术实现思路

1、本申请提供了一种基于qiankun框架的前端系统,用以解决现有技术中使用qiankun框架搭建的前端系统,当主应用加载的子应用资源与主应用不同源时跨域报错的问题,以及子应用发送http请求出现跨域报错和权限报错的问题。

2、本申请提供一种基于qiankun框架的前端系统,所述系统包括:

3、主应用和若干子应用;

4、所述主应用用于:

5、获取用户的身份验证信息,根据所述用户的身份验证信息校验所述用户访问所述子应用的权限;

6、根据所述用户访问所述子应用的权限,确定所述子应用的可访问资源;

7、响应于所述用户访问所述可访问资源中目标资源的访问指令,获取所述目标资源;

8、所述主应用的fetch函数配置为:获取所述可访问资源中的动态资源时,向获取所述动态资源的http请求添加所述用户的cookie信息。

9、在上述一种基于qiankun框架的前端系统优选技术方案中,所述fetch函数配置为:获取所述子应用静态资源时,在访问所述子应用静态资源的相对路径前添加第一前缀。

10、在上述一种基于qiankun框架的前端系统优选技术方案中,所述主应用与所述子应用之间或所述子应用之间进行通信时,若通信发起应用检测到所述通信发起应用与通信接收应用为非同源应用,则所述通信发起应用建立与所述通信接收应用的websocket连接。

11、在上述一种基于qiankun框架的前端系统优选技术方案中,所述子应用之间进行通信时,若所述通信发起应用检测到所述通信发起应用与所述通信接收应用为同源应用,则所述通信发起应用调用broadcastchannel接口与所述通信接收应用通信。

12、在上述一种基于qiankun框架的前端系统优选技术方案中,所述主应用还用于:

13、向所述子应用样式资源对应的dom节点添加标识信息。

14、在上述一种基于qiankun框架的前端系统优选技术方案中,所述主应用还用于:

15、所述主应用挂载所述子应用时,将所述子应用的全局变量添加第二前缀,之后控制所述子应用将所述子应用的全局window对象置空。

16、在上述一种基于qiankun框架的前端系统优选技术方案中,所述主应用具体用于:

17、将所述子应用的全局变量添加所述第二前缀之后,通过钩子函数控制所述子应用将所述子应用的全局window对象置空。

18、在上述一种基于qiankun框架的前端系统优选技术方案中,所述系统还包括认证鉴权模块,所述主应用具体用于:

19、获取所述身份验证信息之后,将所述身份验证信息发送至所述认证鉴权模块,以使所述认证鉴权模块根据所述身份验证信息校验所述用户访问所述子应用的权限;

20、获取所述认证鉴权模块发送的第一令牌,所述第一令牌记录所述用户访问所述子应用的权限信息。

21、在上述一种基于qiankun框架的前端系统优选技术方案中,所述主应用还用于:

22、将所述第一令牌发送至所述子应用;

23、所述子应用还用于:

24、获取所述主应用发送的所述第一令牌后,将所述第一令牌发送至所述认证鉴权模块;

25、所述认证鉴权模块还用于:

26、获取所述子应用发送的所述第一令牌后,校验所述第一令牌是否合法:

27、若是,则向所述子应用发送所述身份验证信息。

28、在上述一种基于qiankun框架的前端系统优选技术方案中,所述子应用还用于:

29、获取所述认证鉴权模块发送的所述身份验证信息之后,根据所述身份验证信息生成第二令牌,所述第二令牌记录所述权限信息。

30、本申请提供的一种基于qiankun框架的前端系统的技术效果是:

31、现有技术中基于qiankun框架搭建的前端系统中,由于主应用加载子应用资源通过fetch函数实现,而现有技术中主应用fetch函数无法使http请求携带cookie信息而导致的当主应用加载的子应用资源与主应用不同源时,会出现跨域报错的问题以及子应用发送http请求也会出现跨域报错和权限报错的问题。本申请中基于qiankun微前端框架搭建的前端系统中,主应用获取子应用的动态资源时,主应用的fetch函数使http请求携带用户的cookie信息,由于cookie信息中携带用户的身份信息,从而使服务端可以根据用户的身份信息校验用户是否具有访问该动态资源的权限,避免了上述主应用加载的子应用资源与主应用不同源时的跨域报错问题以及子应用发送http请求出现跨域报错和权限报错的问题。

本文档来自技高网...

【技术保护点】

1.一种基于qiankun框架的前端系统,其特征在于,所述系统包括:

2.根据权利要求1所述的系统,其特征在于,所述fetch函数配置为:获取所述子应用静态资源时,在访问所述子应用静态资源的相对路径前添加第一前缀。

3.根据权利要求1所述的系统,其特征在于,所述主应用与所述子应用之间或所述子应用之间进行通信时,若通信发起应用检测到所述通信发起应用与通信接收应用为非同源应用,则所述通信发起应用建立与所述通信接收应用的Websocket连接。

4.根据权利要求3所述的系统,其特征在于,所述子应用之间进行通信时,若所述通信发起应用检测到所述通信发起应用与所述通信接收应用为同源应用,则所述通信发起应用调用BroadcastChannel接口与所述通信接收应用通信。

5.根据权利要求2所述的系统,其特征在于,所述主应用还用于:

6.根据权利要求1所述的系统,其特征在于,所述主应用还用于:

7.根据权利要求6所述的系统,其特征在于,所述主应用具体用于:

8.根据权利要求1所述的系统,其特征在于,所述系统还包括认证鉴权模块,所述主应用具体用于:

9.根据权利要求8所述的系统,其特征在于,所述主应用还用于:

10.根据权利要求9所述的系统,其特征在于,所述子应用还用于:

...

【技术特征摘要】

1.一种基于qiankun框架的前端系统,其特征在于,所述系统包括:

2.根据权利要求1所述的系统,其特征在于,所述fetch函数配置为:获取所述子应用静态资源时,在访问所述子应用静态资源的相对路径前添加第一前缀。

3.根据权利要求1所述的系统,其特征在于,所述主应用与所述子应用之间或所述子应用之间进行通信时,若通信发起应用检测到所述通信发起应用与通信接收应用为非同源应用,则所述通信发起应用建立与所述通信接收应用的websocket连接。

4.根据权利要求3所述的系统,其特征在于,所述子应用之间进行通信时,若所述通信发起应用检测到所述通信发起应用与...

【专利技术属性】
技术研发人员:邓祥展波熊媛媛
申请(专利权)人:卡奥斯工业智能研究院青岛有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1