A method and device for processing a micro front-end architecture based on Qiankun

Abstract

The present invention discloses a method and device for processing a Qiankun-based micro-frontend architecture, and relates to the field of computer technology. The specific implementation of the method includes: generating a main application and a sub-application; dividing the sub-application based on two dimensions; obtaining permission information corresponding to the logged-in user, and the main application passes the permission information corresponding to the logged-in user to the sub-application; and realizing shared communication between the main application and the sub-application. This implementation can solve the technical problems that the existing micro-frontend architecture can only divide sub-applications based on functions, the granularity of access permissions is too large, and the communication between the main application and the sub-application is chaotic.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and device for processing a qiankun-based micro-frontend architecture. Background Art

[0002] In recent years, with the popularity of microservice architecture, internal IT resources and business applications of enterprises have become increasingly abundant, which has greatly improved the business efficiency of enterprises. However, since most business systems are based on the B / S (browser / server) model, it is necessary to transform the existing front-end architecture to adapt to a wide variety of back-end microservices.

[0003] The backend microservices have a mature governance platform that can effectively manage all microservices, but the industry currently lacks a unified governance solution for the frontend. As the number of frontends increases, their development, compilation, deployment and other processes will become increasingly difficult to maintain.

[0004] In actual work, although we hope to make software as a service (SASS) products, customers in different regions often need customization. As there are more and more regional special functions, the front-end package will become larger and larger, resulting in a significant increase in development, packaging and deployment time and reduced efficiency. At the same time, limited by the framework of the old project, it will cost a lot to upgrade the framework if we want to use new features of the framework. We cannot use different technology stacks, and we cannot achieve independent deployment of special regional versions. At the same time, in terms of development management, the team has many people, the product functions are complex, code conflicts are frequent, and the impact is large. Summary of the invention

[0005] In view of this, an embodiment of the present invention provides a method and device for processing a micro-frontend architecture based on Qiankun, so as to solve the technical problems that the existing micro-frontend architecture can only divide sub-applications based on functions, the access permission granularity is too large, and the communication between the main application and the sub-application is chaotic.

[0006] To achieve the above purpose, according to one aspect of an embodiment of the present invention, a method for processing a qiankun-based micro-frontend architecture is provided, including:

[0007] Generate the main application and sub-applications;

[0008] Dividing the sub-applications based on two dimensions;

[0009] Obtaining permission information corresponding to the logged-in user, the main application passing the permission information corresponding to the logged-in user to the sub-application;

[0010] Implement shared communication between the main application and the sub-application.

[0011] Optionally, the sub-applications are divided based on two dimensions, including:

[0012] Dividing the sub-application into n different functional sub-applications based on the functional dimension;

[0013] The sub-application is divided into n different regional sub-applications based on the regional dimension.

[0014] Optionally, obtaining permission information corresponding to the logged-in user, and the main application passing the permission information corresponding to the logged-in user to the corresponding sub-application, includes:

[0015] Rendering the public page of the main application;

[0016] Click the menu of the main application to start the sub-application corresponding to the menu, and pass the corresponding permission information to the corresponding sub-application.

[0017] Optionally, a public page of the main application is rendered, wherein the public page of the main application includes a menu, a navigation bar, a footer, and settings.

[0018] Optionally, clicking a menu of the main application, starting the sub-application corresponding to the menu, and transferring the corresponding permission information to the corresponding sub-application includes:

[0019] A page of the sub-application is rendered, wherein the page of the sub-application corresponds to the permission information.

[0020] Optionally, implementing shared communication between the main application and the sub-application includes:

[0021] The shared communication between the main application and the sub-application is based on redux state management.

[0022] Optionally, the shared communication between the main application and the sub-application is based on redux state management, including:

[0023] Create a store in the main application to manage the global state pool;

[0024] Implementing a first shared instance in the main application;

[0025] The main application uses the first shard instance to operate the store to modify and monitor the status value.

[0026] Optionally, the shared communication between the main application and the sub-application is based on redux state management, including:

[0027] Implementing a second shared instance in the sub-application;

[0028] Pass the first shared instance to the sub-application via props.

[0029] Optionally, the shared communication between the main application and the sub-application is based on redux state management, including:

[0030] When the first shared instance is not empty, the first shared instance overloads the second shared instance of the sub-application;

[0031] The sub-application uses the overloaded second shared instance to modify and monitor the state value.

[0032] In addition, according to another aspect of an embodiment of the present invention, a device for processing a qiankun-based micro-frontend architecture is provided, including:

[0033] Generate module, used to generate main application and sub-application;

[0034] A partitioning module, used for partitioning the sub-applications based on two dimensions;

[0035] A configuration module, used to obtain permission information corresponding to the logged-in user, and to enable the main application to pass the permission information corresponding to the logged-in user to the sub-application;

[0036] The communication module is used to implement shared communication between the main application and the sub-application.

[0037] Optionally, the partitioning module is further used for:

[0038] Dividing the sub-application into n different functional sub-applications based on the functional dimension;

[0039] The sub-application is divided into n different regional sub-applications based on the regional dimension.

[0040] Optionally, the configuration module is further used to:

[0041] Rendering the public page of the main application;

[0042] Click the menu of the main application to start the sub-application corresponding to the menu, and pass the corresponding permission information to the corresponding sub-application.

[0043] Optionally, the configuration module is further used to:

[0044] Rendering the public page of the main application, wherein the public page of the main application includes a menu, a navigation bar, a footer, and settings.

[0045] Optionally, the configuration module is further used to:

[0046] Clicking the menu of the main application, starting the sub-application corresponding to the menu, and passing the corresponding permission information to the corresponding sub-application, includes:

[0047] A page of the sub-application is rendered, wherein the page of the sub-application corresponds to the permission information.

[0048] Optionally, the communication module is further used for:

[0049] The shared communication between the main application and the sub-application is based on redux state management.

[0050] Optionally, the communication module is further used for:

[0051] The shared communication between the main application and the sub-application is based on redux state management, including:

[0052] Create a store in the main application to manage the global state pool;

[0053] Implementing a first shared instance in the main application;

[0054] The main application uses the first shard instance to operate the store to modify and monitor the status value.

[0055] Optionally, the communication module is further used for:

[0056] The shared communication between the main application and the sub-application is based on redux state management, including:

[0057] Implementing a second shared instance in the sub-application;

[0058] Pass the first shared instance to the sub-application via props.

[0059] Optionally, the communication module is further used for:

[0060] The shared communication between the main application and the sub-application is based on redux state management, including:

[0061] When the first shared instance is not empty, the first shared instance overloads the second shared instance of the sub-application;

[0062] The sub-application uses the overloaded second shared instance to modify and monitor the state value.

[0063] According to another aspect of an embodiment of the present invention, there is further provided an electronic device, including:

[0064] one or more processors;

[0065] a storage device for storing one or more programs,

[0066] When the one or more programs are executed by the one or more processors, the one or more processors implement the method described in any one of the above embodiments.

[0067] According to another aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored. When the program is executed by a processor, the method described in any one of the above embodiments is implemented.

[0068] An embodiment of the above invention has the following advantages or beneficial effects: because the main application and sub-application are generated, the sub-application is divided based on two dimensions, and the main application passes the permission information corresponding to the logged-in user to the sub-application, and the technical means of shared communication between the main application and the sub-application is realized, the technical problems that the existing micro-frontend architecture can only divide sub-applications based on functions, the granularity of access permissions is too large, and the communication between the main application and the sub-application is chaotic are overcome. The embodiment of the present invention can simultaneously meet the sub-application division based on functions and the sub-application division based on regions, realize more fine-grained access permissions, and in the communication scenario of multiple applications, the sub-application has the ability to run completely independently, and the main application can better manage the sub-application.

[0069] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0070] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0071] Figure 1 It is a schematic diagram of the main process of the method for processing the qiankun-based micro-frontend architecture according to an embodiment of the present invention;

[0072] Figure 2 It is a schematic diagram of the main process of a method for processing a micro front-end architecture based on Qiankun according to a reference embodiment of the present invention;

[0073] Figure 3 It is a schematic diagram of the main process of a method for processing a qiankun-based micro-frontend architecture according to another reference embodiment of the present invention;

[0074] Figure 4 It is a schematic diagram of the main process of a method for processing a micro-frontend architecture based on Qiankun according to another reference embodiment of the present invention;

[0075] Figure 5is a schematic diagram of main modules of a device for processing a qiankun-based micro-frontend architecture according to an embodiment of the present invention;

[0076] Figure 6 is an exemplary system architecture diagram to which embodiments of the present invention may be applied;

[0077] Figure 7 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0078] The following is a description of exemplary embodiments of the present invention in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0079] Figure 1 is a schematic diagram of the main process of the method for processing the micro front-end architecture based on Qiankun according to an embodiment of the present invention. As an embodiment of the present invention, Figure 1 As shown, the method for processing the qiankun-based micro-frontend architecture may include:

[0080] Step 101, generate a main application and sub-applications.

[0081] The micro frontend draws on the idea of ​​the backend microservice architecture, which is to decompose the frontend application into smaller and simpler pieces that can be independently developed, tested, and deployed, while still appearing as a cohesive single product to users.

[0082] Existing micro front-ends are basically based on the single-spa micro front-end architecture. Single-spa solves the routing, registration, and monitoring of applications based on the application dimension, and most importantly, it gives the application life cycle and life cycle related events. Qiankun micro front-end architecture inherits these features, and adds js sandbox, style isolation, HTML Loader, preloading and other capabilities required by micro front-end systems on its basis, providing a complete product solution.

[0083] In the embodiment of the present invention, one main application or multiple sub-applications may be generated.

[0084] Step 102, dividing the sub-applications based on two dimensions.

[0085] In order to satisfy the function-based sub-application division and the region-based sub-application division, the sub-applications are divided based on two dimensions: region and function.

[0086] Optionally, step 102 may include: dividing the sub-application into n different functional sub-applications based on the functional dimension; dividing the sub-application into n different regional sub-applications based on the regional dimension. In an embodiment of the present invention, the sub-applications may be reasonably divided based on the two dimensions of function and region. The division based on the functional dimension adopts the division method of the general micro front-end sub-application, such as the information management module D11, the system management module D12, ..., D1 n , the division based on the regional dimension is divided according to the characteristic versions of each region, and each regional characteristic version is a sub-application, such as Henan version D21, Hunan version D22, ..., D2 n .

[0087] Step 103, obtaining the permission information corresponding to the logged-in user, and the main application passes the permission information corresponding to the logged-in user to the sub-application. In an embodiment of the present invention, after the user logs in, the main application obtains the permission information corresponding to the logged-in user, and the main application passes the permission information corresponding to the sub-application to the sub-application, thereby realizing a more fine-grained access permission function based on the menu permission granularity.

[0088] Optionally, step 103 may include: rendering the public page of the main application; clicking the menu of the main application, starting the sub-application corresponding to the menu, and passing the corresponding permission information to the corresponding sub-application. Rendering the public page of the main application, wherein the public page of the main application includes a menu, a navigation bar, a footer, and settings. In an embodiment of the present invention, after the user logs in, the public pages of the main application are rendered according to the user's permission information, and these pages include public pages and elements such as menus, navigation bars, footers, and settings.

[0089] Optionally, clicking on the menu of the main application, starting the sub-application corresponding to the menu, and passing the corresponding permission information to the corresponding sub-application, includes: rendering a page of the sub-application, the page of the sub-application corresponding to the permission information. In an embodiment of the present invention, when a user clicks on a sub-application menu in the main application page, the sub-application corresponding to the main application page is started, and the permission information corresponding to the user is passed to the sub-application, thereby rendering the sub-application page under the corresponding permission information to achieve secure access.

[0090] Step 104: Implement shared communication between the main application and the sub-application.

[0091] Optionally, the shared communication between the main application and the sub-application is realized, including: the shared communication between the main application and the sub-application is based on redux state management. In an embodiment of the present invention, the Qiankun-based micro-frontend architecture adopts shared communication based on redux state management. In shared communication, the main application maintains a state pool based on redux, and exposes some methods to the sub-application through the shared instance. Thereby, in a multi-application communication scenario, the sub-application has the ability to run completely independently, and the main application can better manage the effects of the sub-application.

[0092] Optionally, the shared communication between the main application and the sub-application is based on redux state management, including: creating a store in the main application for managing a global state pool; implementing a first shared instance in the main application; and the main application using a first shard instance to operate the store to modify and monitor state values.

[0093] Optionally, the shared communication between the main application and the sub-application is based on redux state management, including: implementing a second shared instance in the sub-application; and passing the first shared instance to the sub-application through props.

[0094] Optionally, the shared communication between the main application and the sub-application is based on redux state management, including: when the first shared instance is not empty, the first shared instance overloads the second shared instance of the sub-application; the sub-application uses the overloaded second shared instance to modify and monitor the state value.

[0095] According to the various embodiments described above, it can be seen that the embodiments of the present invention generate a main application and a sub-application, divide the sub-application based on two dimensions, obtain the permission information corresponding to the logged-in user, and the main application passes the permission information corresponding to the logged-in user to the sub-application, thereby realizing the technical means of shared communication between the main application and the sub-application, which solves the technical problems that the existing micro-frontend architecture can only divide sub-applications based on functions, the granularity of access permissions is too large, and the communication between the main application and the sub-application is chaotic. The embodiments of the present invention can simultaneously meet the sub-application division based on functions and the sub-application division based on regions, realize more fine-grained access permissions, and in the communication scenario of multiple applications, the sub-application has the ability to run completely independently, and the main application can better manage the sub-application.

[0096] Figure 2is a schematic diagram of the main process of a method for processing a micro front-end architecture based on Qiankun according to a reference embodiment of the present invention. As another embodiment of the present invention, Figure 2 As shown, the method for processing the qiankun-based micro-frontend architecture may include:

[0097] Step 201, generate a main application and sub-applications.

[0098] Step 202: divide the sub-application into n different functional sub-applications based on the functional dimension, such as information management module D11, system management module D12, ..., D1 n .

[0099] Step 203: divide the sub-application into n different regional sub-applications based on the regional dimension, such as Henan version D21, Hunan version D22, ..., D2 n .

[0100] Step 204: obtaining permission information corresponding to the logged-in user, and the main application passes the permission information corresponding to the logged-in user to the sub-application.

[0101] Step 205: Implement shared communication between the main application and the sub-application.

[0102] In addition, the specific implementation content of the method for processing a micro-frontend architecture based on qiankun in a reference embodiment of the present invention has been described in detail in the method for processing a micro-frontend architecture based on qiankun described above, so the repeated content will not be described here.

[0103] Figure 3 is a schematic diagram of the main process of a method for processing a micro front-end architecture based on Qiankun according to another reference embodiment of the present invention. As another embodiment of the present invention, Figure 3 As shown, the method for processing the qiankun-based micro-frontend architecture may include:

[0104] Step 301, generate a main application and sub-applications.

[0105] Step 302: divide the sub-applications based on two dimensions.

[0106] Step 303: The user logs in, and the main application obtains permission information corresponding to the logged in user.

[0107] Step 304: Render the public page of the main application according to the user's permission information, wherein the public page of the main application includes a menu, a navigation bar, a footer, and settings.

[0108] Step 305: click the menu of the main application to start the sub-application corresponding to the menu.

[0109] Step 306: pass the corresponding permission information to the corresponding sub-application.

[0110] Step 307: Render the sub-application page corresponding to the permission information.

[0111] Step 308: Implement shared communication between the main application and the sub-application.

[0112] In addition, the specific implementation content of the method for processing a micro-frontend architecture based on qiankun in another reference embodiment of the present invention has been described in detail in the above method for processing a micro-frontend architecture based on qiankun, so the repeated content will not be described here.

[0113] Figure 4 Schematic diagram of the main process of a method for processing a micro front-end architecture based on Qiankun according to another reference embodiment of the present invention. As another embodiment of the present invention, Figure 4 As shown, the shared communication between the main application and the sub-application is realized, including:

[0114] Step 401: Create a store in the main application to manage the global state pool.

[0115] Step 402: Implement a first shared instance in the main application.

[0116] Step 403: The main application uses the first shard instance to operate the store to modify and monitor the status value.

[0117] Step 404: Implement a second shared instance in the sub-application.

[0118] Step 405: pass the first shared instance to the sub-application via props.

[0119] Step 406: When the first shared instance is not empty, the first shared instance overloads the second shared instance of the sub-application.

[0120] Step 407: The sub-application uses the overloaded second shared instance to modify and monitor the state value.

[0121] In addition, the specific implementation content of the method for processing a micro-frontend architecture based on qiankun in another reference embodiment of the present invention has been described in detail in the above method for processing a micro-frontend architecture based on qiankun, so the repeated content will not be described here.

[0122] Figure 5 is a schematic diagram of the main modules of the device for processing the micro front-end architecture based on Qiankun according to an embodiment of the present invention, such as Figure 5 As shown, the device 500 for processing the micro-frontend architecture based on Qiankun includes a generation module 501, a division module 502, a configuration module 503 and a communication module 504; wherein the generation module 501 is used to generate a main application and a sub-application; the division module 502 is used to divide the sub-application based on two dimensions; the configuration module 503 is used to obtain the permission information corresponding to the logged-in user, and enable the main application to pass the permission information corresponding to the logged-in user to the sub-application; the communication module 504 is used to realize shared communication between the main application and the sub-application.

[0123] Optionally, the division module 502 is further configured to:

[0124] Dividing the sub-application into n different functional sub-applications based on the functional dimension;

[0125] The sub-application is divided into n different regional sub-applications based on the regional dimension.

[0126] Optionally, the configuration module 503 is further used to:

[0127] Rendering the public page of the main application;

[0128] Click the menu of the main application to start the sub-application corresponding to the menu, and pass the corresponding permission information to the corresponding sub-application.

[0129] Optionally, the configuration module 503 is further used to:

[0130] Rendering the public page of the main application, wherein the public page of the main application includes a menu, a navigation bar, a footer, and settings.

[0131] Optionally, the configuration module 503 is further used to:

[0132] Clicking the menu of the main application, starting the sub-application corresponding to the menu, and passing the corresponding permission information to the corresponding sub-application, includes:

[0133] A page of the sub-application is rendered, wherein the page of the sub-application corresponds to the permission information.

[0134] Optionally, the communication module 504 is further used for:

[0135] The shared communication between the main application and the sub-application is based on redux state management.

[0136] Optionally, the communication module 504 is further used for:

[0137] The shared communication between the main application and the sub-application is based on redux state management, including:

[0138] Create a store in the main application to manage the global state pool;

[0139] Implementing a first shared instance in the main application;

[0140] The main application uses the first shard instance to operate the store to modify and monitor the status value.

[0141] Optionally, the communication module 504 is further used for:

[0142] The shared communication between the main application and the sub-application is based on redux state management, including:

[0143] Implementing a second shared instance in the sub-application;

[0144] Pass the first shared instance to the sub-application via props.

[0145] Optionally, the communication module 504 is further used for:

[0146] The shared communication between the main application and the sub-application is based on redux state management, including:

[0147] When the first shared instance is not empty, the first shared instance overloads the second shared instance of the sub-application;

[0148] The sub-application uses the overloaded second shared instance to modify and monitor the state value.

[0149] According to the various embodiments described above, it can be seen that the embodiments of the present invention generate a main application and a sub-application, divide the sub-application based on two dimensions, obtain the permission information corresponding to the logged-in user, and the main application passes the permission information corresponding to the logged-in user to the sub-application, thereby realizing the technical means of shared communication between the main application and the sub-application, which solves the technical problems that the existing micro-frontend architecture can only divide sub-applications based on functions, the granularity of access permissions is too large, and the communication between the main application and the sub-application is chaotic. The embodiments of the present invention can simultaneously meet the sub-application division based on functions and the sub-application division based on regions, realize more fine-grained access permissions, and in the communication scenario of multiple applications, the sub-application has the ability to run completely independently, and the main application can better manage the sub-application.

[0150] It should be noted that the specific implementation content of the device for processing the qiankun-based micro-front-end architecture described in the present invention has been described in detail in the method for processing the qiankun-based micro-front-end architecture described above, so the repeated content will not be described here.

[0151] Figure 6 An exemplary system architecture 600 is shown to which the method for processing a qiankun-based micro-frontend architecture or the apparatus for processing a qiankun-based micro-frontend architecture according to an embodiment of the present invention can be applied.

[0152] like Figure 6 As shown, system architecture 600 may include terminal devices 601, 602, 603, network 604 and server 605. Network 604 is used to provide a medium for communication links between terminal devices 601, 602, 603 and server 605. Network 604 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0153] The user can use the terminal devices 601, 602, 603 to interact with the server 605 through the network 604 to receive or send messages, etc. Various communication client applications can be installed on the terminal devices 601, 602, 603, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only for example).

[0154] The terminal devices 601 , 602 , and 603 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers, etc.

[0155] The server 605 may be a server that provides various services, such as a backend management server (for example only) that provides support for shopping websites browsed by users using the terminal devices 601, 602, and 603. The backend management server may analyze and process the received data such as the item information query request, and feed back the processing results to the terminal device.

[0156] It should be noted that the method for processing the qiankun-based micro-frontend architecture provided in the embodiment of the present invention is generally executed by the server 605, and accordingly, the device for processing the qiankun-based micro-frontend architecture is generally set in the server 605.

[0157] It should be understood that Figure 6 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0158] Reference below Figure 7 , which shows a schematic diagram of the structure of a computer system 700 of a terminal device suitable for implementing an embodiment of the present invention. Figure 7 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0159] like Figure 7 As shown, the computer system 700 includes a central processing unit (CPU) 701, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 702 or a program loaded from a storage part 708 into a random access memory (RAM) 703. In the RAM 703, various programs and data required for the operation of the system 700 are also stored. The CPU 701, the ROM 702, and the RAM 703 are connected to each other via a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0160] The following components are connected to the I / O interface 705: an input section 706 including a keyboard, a mouse, etc.; an output section 707 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 708 including a hard disk, etc.; and a communication section 709 including a network interface card such as a LAN card, a modem, etc. The communication section 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the I / O interface 705 as needed. A removable medium 711, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 710 as needed, so that a computer program read therefrom is installed into the storage section 708 as needed.

[0161] In particular, according to the embodiments disclosed in the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present invention include a computer program, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 709, and / or installed from the removable medium 711. When the computer program is executed by the central processing unit (CPU) 701, the above-mentioned functions defined in the system of the present invention are executed.

[0162] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0163] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, functions and operations of the system, method and computer program according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0164] The modules involved in the embodiments of the present invention may be implemented by software or hardware. The modules described may also be set in a processor, for example, it may be described as: a processor includes a generation module, a division module, a configuration module and a communication module, wherein the names of these modules do not constitute a limitation on the modules themselves in some cases.

[0165] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently without being assembled into the device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by a device, the device implements the following method: generating a main application and a sub-application; dividing the sub-application based on two dimensions; obtaining permission information corresponding to the logged-in user, and the main application passes the permission information corresponding to the logged-in user to the sub-application; and implementing shared communication between the main application and the sub-application.

[0166] According to the technical solution of the embodiment of the present invention, because the main application and sub-applications are generated, the sub-applications are divided based on two dimensions, and the main application passes the permission information corresponding to the logged-in user to the sub-application, and the technical means of shared communication between the main application and the sub-application are realized, the technical problems that the existing micro-frontend architecture can only divide sub-applications based on functions, the granularity of access permissions is too large, and the communication between the main application and the sub-application is chaotic are overcome. The embodiment of the present invention can simultaneously meet the function-based sub-application division and the region-based sub-application division, realize more fine-grained access permissions, and in the communication scenario of multiple applications, the sub-application has the ability to run completely independently, and the main application can better manage the sub-application.

[0167] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for processing a qiankun-based micro-frontend architecture, characterized in that: include: Generate the main application and sub-applications; Dividing the sub-applications based on two dimensions; Obtaining permission information corresponding to the logged-in user, the main application passing the permission information corresponding to the logged-in user to the sub-application; Implementing shared communication between the main application and the sub-application; The sub-applications are divided based on two dimensions, including: Dividing the sub-application into n different functional sub-applications based on the functional dimension; Dividing the sub-application into n different regional sub-applications based on the regional dimension; Implementing shared communication between the main application and the sub-application, including: The shared communication between the main application and the sub-application is based on redux state management; The shared communication between the main application and the sub-application is based on redux state management, including: Create a store in the main application to manage the global state pool; Implementing a first shared instance in the main application; The main application uses the first shard instance to operate the store to modify and monitor the status value; The shared communication between the main application and the sub-application is based on redux state management, including: Implementing a second shared instance in the sub-application; Passing the first shared instance to the sub-application via props; The shared communication between the main application and the sub-application is based on redux state management, including: When the first shared instance is not empty, the first shared instance overloads the second shared instance of the sub-application; The sub-application uses the overloaded second shared instance to modify and monitor the state value.

2. The method according to claim 1, characterized in that: Obtaining permission information corresponding to the logged-in user, and the main application passing the permission information corresponding to the logged-in user to the corresponding sub-application, including: Rendering the public page of the main application; Click the menu of the main application to start the sub-application corresponding to the menu, and pass the corresponding permission information to the corresponding sub-application.

3. The method according to claim 2, characterized in that Render the public page of the main application, where: The public pages of the main application include menus, navigation bars, footers and settings.

4. The method according to claim 2, characterized in that: Clicking the menu of the main application, starting the sub-application corresponding to the menu, and passing the corresponding permission information to the corresponding sub-application, includes: A page of the sub-application is rendered, wherein the page of the sub-application corresponds to the permission information.

5. A device for processing a qiankun-based micro-frontend architecture, characterized in that: include: Generate module, used to generate main application and sub-application; A partitioning module, used for partitioning the sub-applications based on two dimensions; A configuration module, used to obtain permission information corresponding to the logged-in user, and to enable the main application to pass the permission information corresponding to the logged-in user to the sub-application; A communication module, used to implement shared communication between the main application and the sub-application; The partitioning module is also used for: Dividing the sub-application into n different functional sub-applications based on the functional dimension; Dividing the sub-application into n different regional sub-applications based on the regional dimension; The communication module is also used for: The shared communication between the main application and the sub-application is based on redux state management; The communication module is also used for: The shared communication between the main application and the sub-application is based on redux state management, including: Create a store in the main application to manage the global state pool; Implementing a first shared instance in the main application; The main application uses the first shard instance to operate the store to modify and monitor the status value; The communication module is also used for: The shared communication between the main application and the sub-application is based on redux state management, including: Implementing a second shared instance in the sub-application; Passing the first shared instance to the sub-application via props; The communication module is also used for: The shared communication between the main application and the sub-application is based on redux state management, including: When the first shared instance is not empty, the first shared instance overloads the second shared instance of the sub-application; The sub-application uses the overloaded second shared instance to modify and monitor the state value.

6. The device according to claim 5, characterized in that The configuration module is also used to: Rendering the public page of the main application; Click the menu of the main application to start the sub-application corresponding to the menu, and pass the corresponding permission information to the corresponding sub-application.

7. The device according to claim 5, characterized in that The communication module is also used for: The shared communication between the main application and the sub-application is based on redux state management.

8. An electronic device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 4.

9. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images