Micro front-end application routing methods, devices, electronic devices and storage media
By pre-packaging sub-applications into artifacts of various routing methods and registering them in the parent application, and selecting the target routing method based on the parent application's routing method, the problems of sub-application loading failure and inaccurate page redirection in the micro-frontend architecture are solved, achieving stable loading and accurate redirection of sub-applications in different parent applications.
Patent Information
- Application Number
- CN202211710592.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-12-29
- Publication Date
- 2025-11-14
- Estimated Expiration
- 2042-12-29
AI Technical Summary
In a micro-frontend architecture, when a sub-application is embedded into multiple parent applications with different routing methods, loading failures and inaccurate page navigation may occur.
The sub-application is pre-packaged into an output package with two or more routing methods and registered in the corresponding parent application. When a routing request is received, the appropriate target routing method is selected based on the routing method of the parent application to route the sub-application.
This solution resolves the issues of child application loading failures and inaccurate page redirects caused by different routing methods between parent and child applications, improving the success rate of child application loading and the accuracy of redirection across different parent applications.
Smart Images

Figure CN116192737B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of big data technology, and in particular to micro front-end application routing methods, devices, electronic devices, and storage media. Background Technology
[0002] Micro-frontends are an architecture similar to microservices, applying the microservice concept to the browser side. This transforms a web application from a single monolithic application into an application comprised of multiple small front-end applications. Each front-end application can run, be developed, and deployed independently. Micro-frontends are not simply front-end frameworks or tools, but rather an architectural system—a technical approach and strategy for multiple teams to collaboratively build modern web applications by independently releasing features.
[0003] In related technologies, when a sub-application is embedded into multiple parent applications with different routing methods, issues such as loading failure and inaccurate page redirection may occur. Summary of the Invention
[0004] This application aims to at least partially address one of the technical problems in the related art.
[0005] Therefore, the first objective of this application is to propose a micro-frontend sub-application routing method, which pre-packages the sub-application into an output package containing two or more routing methods and completes its registration in the corresponding parent application. In response to a routing request for the sub-application, the method routes the sub-application using the target routing method that corresponds to the routing method configured in the parent application among the two or more routing methods. This solves the technical problem in related technologies where the sub-application fails to load or the page redirection is inaccurate due to different routing methods between parent and child applications.
[0006] The second objective of this application is to provide a micro front-end application routing device.
[0007] The third objective of this application is to propose an electronic device.
[0008] The fourth objective of this application is to provide a computer-readable storage medium.
[0009] The fifth objective of this application is to provide a computer program product.
[0010] To achieve the above objectives, the first aspect of this application proposes a micro front-end sub-application routing method, wherein the method pre-packages the sub-application into product packets of two or more routing methods and completes the registration in the corresponding parent application;
[0011] The method includes:
[0012] In response to a routing request for the sub-application, obtain the routing method configured for the parent application;
[0013] The child application is routed using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods.
[0014] Optionally, as a first possible implementation of the first aspect, routing the child application using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods includes:
[0015] The two or more routing methods are matched with the routing methods configured in the parent application, and the matching routing methods are determined as the target routing methods.
[0016] The sub-application is routed using the target routing method.
[0017] Optionally, as a second possible implementation of the first aspect, the names of the output packets of the two or more routing methods are used to indicate the corresponding routing methods, and the step of matching the two or more routing methods with the routing methods configured in the parent application to determine the matching routing methods as the target routing methods includes:
[0018] The routing method configured for the parent application is matched with the routing method indicated by the name of the output packet of the two or more routing methods, so as to determine the matching routing method as the target routing method.
[0019] Optionally, as a third possible implementation of the first aspect, the two or more routing methods include hash routing and browser routing, and the pre-packaging of the sub-application into an output package of two or more routing methods includes:
[0020] The sub-applications are pre-packaged into hash route artifacts and browser route artifacts.
[0021] Optionally, as a fourth possible implementation of the first aspect, the pre-packaging of the sub-application into an output package of hash routing and an output package of browser routing includes:
[0022] Set the routing method in the output packet to hash routing to obtain the output packet of hash routing;
[0023] Set the routing mode in the output packet to browser routing to obtain the output packet for browser routing.
[0024] Optionally, as a fifth possible implementation of the first aspect, the routing method configured for the parent application includes hash routing and browser routing, and the routing of the child application using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods includes:
[0025] In response to the parent application being configured with hash routing, the child application is routed using hash routing.
[0026] In response to the parent application being configured with browser routing, the child application is routed using browser routing.
[0027] Optionally, as a sixth possible implementation of the first aspect, before routing the sub-application using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods, security verification is performed on the sub-application;
[0028] The security verification method includes:
[0029] Send an access record retrieval request for the sub-application to the business terminal corresponding to the sub-application in order to obtain the access record;
[0030] If the access log contains more than a preset number of failed access records within a preset time period, the security verification is determined to have failed.
[0031] If there are no failed access records exceeding the preset number within the preset time period in the access log, the security verification is determined to be successful.
[0032] Optionally, as a seventh possible implementation of the first aspect, after routing the sub-application using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods, the business terminal corresponding to the sub-application authenticates the user accessing the sub-application; the business terminal stores Token information obtained from the front end; the Token information includes a Token assigned to the authenticated user and a validity period;
[0033] The authentication method includes:
[0034] Obtain the user token contained in the routing request, wherein the user token is assigned after the user is verified when accessing the parent application;
[0035] If the user token exists in the token information and is within the valid time period, the authentication is successful.
[0036] To achieve the above objectives, a second aspect of this application provides a micro front-end sub-application routing device, wherein the device pre-packages the sub-application into product packets of two or more routing methods and completes the registration in the corresponding parent application;
[0037] The device includes:
[0038] The acquisition module is used to acquire the routing method configured for the parent application in response to a routing request for the sub-application.
[0039] The routing module is used to route the child application using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods.
[0040] Optionally, as a first possible implementation of the second aspect, the routing module includes:
[0041] The matching unit is used to match the two or more routing methods with the routing methods configured in the parent application, so as to determine the matching routing method as the target routing method;
[0042] A routing unit is used to route the sub-application in the target routing manner.
[0043] Optionally, as a second possible implementation of the second aspect, the names of the output packets of the two or more routing methods are used to indicate the corresponding routing method, and the matching unit is specifically used for:
[0044] The routing method configured for the parent application is matched with the routing method indicated by the name of the output packet of the two or more routing methods, so as to determine the matching routing method as the target routing method.
[0045] Optionally, as a third possible implementation of the second aspect, the two or more routing methods include hash routing and browser routing, and the pre-packaging of the sub-application into an output package of two or more routing methods includes:
[0046] The sub-applications are pre-packaged into hash route artifacts and browser route artifacts.
[0047] Optionally, as a fourth possible implementation of the second aspect, the pre-packaging of the sub-application into an output package of hash routing and an output package of browser routing includes:
[0048] Set the routing method in the output packet to hash routing to obtain the output packet of hash routing;
[0049] Set the routing mode in the output packet to browser routing to obtain the output packet for browser routing.
[0050] Optionally, as a fifth possible implementation of the second aspect, the routing method configured for the parent application includes hash routing and browser routing, and the routing module is further configured to:
[0051] In response to the parent application being configured with hash routing, the child application is routed using hash routing.
[0052] In response to the parent application being configured with browser routing, the child application is routed using browser routing.
[0053] Alternatively, as a sixth possible implementation of the first aspect, the apparatus further includes:
[0054] A security verification module is used to perform security verification on the sub-application;
[0055] The security verification module is specifically used for:
[0056] Send an access record retrieval request for the sub-application to the business terminal corresponding to the sub-application in order to obtain the access record;
[0057] If the access log contains more than a preset number of failed access records within a preset time period, the security verification is determined to have failed.
[0058] If there are no failed access records exceeding the preset number within the preset time period in the access log, the security verification is determined to be successful.
[0059] Optionally, as a seventh possible implementation of the first aspect, the apparatus further includes:
[0060] An authentication module is used by the business terminal corresponding to the sub-application to authenticate users accessing the sub-application; the business terminal stores Token information obtained from the front end; the Token information includes a Token assigned to the authenticated user and a validity period;
[0061] The authentication module is specifically used for:
[0062] Obtain the user token contained in the routing request, wherein the user token is assigned after the user is verified when accessing the parent application;
[0063] If the user token exists in the token information and is within the valid time period, the authentication is successful.
[0064] To achieve the above objectives, a third aspect of this application provides an electronic device comprising:
[0065] At least one processor; and
[0066] A memory communicatively connected to the at least one processor; wherein,
[0067] The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the micro front-end application routing method of the first aspect described above.
[0068] To achieve the above objectives, a fourth aspect of this application provides a computer-readable storage medium storing computer instructions for causing the computer to execute the micro front-end application routing method of the first aspect described above.
[0069] To achieve the above objectives, a fifth aspect of this application provides a computer program product including a computer program that, when executed by a processor, implements the micro front-end application routing method of the first aspect.
[0070] The technical solutions provided in this application have the following beneficial effects:
[0071] By responding to routing requests for a sub-application, the system obtains the routing methods configured in the parent application, and then routes the sub-application using the target routing method corresponding to the parent application's configured routing method from among two or more routing methods. Thus, by pre-packaging the sub-application into an artifact package containing two or more routing methods and registering it with the corresponding parent application, the system enables routing the sub-application using the target routing method corresponding to the parent application's configured routing method from among two or more routing methods, resolving the technical problem in related technologies where different routing methods between parent and child applications lead to sub-application loading failures or inaccurate page redirections.
[0072] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description
[0073] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein:
[0074] Figure 1 A flowchart illustrating a micro front-end application routing method provided in an embodiment of this application;
[0075] Figure 2A flowchart illustrating another micro front-end application routing method provided in an embodiment of this application;
[0076] Figure 3 A flowchart illustrating another micro front-end application routing method provided in an embodiment of this application;
[0077] Figure 4 A flowchart illustrating another micro front-end application routing method provided in an embodiment of this application;
[0078] Figure 5 A flowchart illustrating another micro front-end application routing method provided in an embodiment of this application;
[0079] Figure 6 A flowchart illustrating a micro front-end application routing method in a given scenario, provided in an embodiment of this application;
[0080] Figure 7 A flowchart illustrating another scenario-based micro-frontend application routing method provided in this application embodiment;
[0081] Figure 8 This is a schematic diagram of the structure of a micro front-end application routing device provided in an embodiment of this application;
[0082] Figure 9 This is a schematic diagram of another micro front-end application routing device provided in an embodiment of this application;
[0083] Figure 10 This is a schematic diagram of another micro front-end application routing device provided in an embodiment of this application;
[0084] Figure 11 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation
[0085] The embodiments of this application are described in detail below. Examples of these embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this application, and should not be construed as limiting this application.
[0086] In related technologies, when a sub-application is embedded into multiple parent applications with different routing methods, issues such as loading failure and inaccurate page redirection may occur.
[0087] To address this issue, this application provides a micro-frontend sub-application routing method. By pre-packaging the sub-application into product packages with two or more routing methods and registering them in the corresponding parent application, the method responds to routing requests for the sub-application and routes the sub-application using the target routing method that corresponds to the routing method configured in the parent application. This solves the technical problem in related technologies where different routing methods between parent and child applications lead to sub-application loading failures or inaccurate page redirections.
[0088] The following description, with reference to the accompanying drawings, describes a micro front-end application routing method, apparatus, electronic device, and storage medium according to embodiments of this application.
[0089] Figure 1 This is a flowchart illustrating a micro front-end application routing method provided in an embodiment of this application.
[0090] It should be noted that the micro-frontend application routing method of this embodiment can be executed by the micro-frontend application routing device provided in this embodiment. This micro-frontend application routing device can be an electronic device or can be configured within an electronic device. The electronic device can be any stationary or mobile computing device capable of data processing, such as a laptop, smartphone, wearable device, or other mobile computing device; a desktop computer or other stationary computing device; a server; or other types of computing devices. This embodiment does not impose any limitations on this.
[0091] like Figure 1 As shown, this micro front-end application routing method includes the following steps:
[0092] Step 101: In response to a routing request for a sub-application, obtain the routing method configured for the parent application.
[0093] It should be noted that in this embodiment, the sub-application is pre-packaged into artifact packages representing two or more routing methods and registered in the corresponding parent application. Optionally, webpack can be used to package the sub-application into artifact packages representing two or more routing methods. Webpack is a static module bundler for JavaScript applications. When webpack processes an application, it internally builds a dependency graph from one or more entry points, and then combines each module required in the project into one or more bundles, which are all static resources used to display the project content.
[0094] In this embodiment, in response to a routing request for a sub-application, the routing method configured in the parent application can be obtained, and a sub-application with the same routing method as the parent application can be selected for loading, thereby solving the technical problem in related technologies where the sub-application fails to load or the page redirection is inaccurate due to different routing methods between the parent and sub-applications.
[0095] It should be noted that, in this embodiment, the micro front-end sub-application routing device can obtain the routing method configured by the parent application through various public, legal, and compliant means. For example, the micro front-end sub-application routing device can collect the routing method configured by the parent application in real time, or it can obtain the routing method configured by the parent application from other devices through network transmission or physical copying, or it can obtain the routing method configured by the parent application through other public, legal, and compliant means. This embodiment does not impose any restrictions on this.
[0096] Step 102: Route the child application using the target routing method that corresponds to the routing method configured for the parent application, among two or more routing methods.
[0097] In this embodiment, the sub-application can be routed using the target route method that corresponds to the configured route method of the parent application from among two or more pre-packaged route methods of the sub-application. Optionally, the two or more pre-packaged route methods of the sub-application can be matched with the configured route method of the parent application, thereby determining the matching route method as the target route method, and then routing the sub-application using the target route method. In this case, since the parent and child applications use the same route method, there will be no issues with the sub-application failing to load or the page not being ready for redirection.
[0098] The micro-frontend sub-application routing method provided in this embodiment obtains the routing method configured in the parent application in response to a routing request for the sub-application, and then routes the sub-application using the target routing method corresponding to the configured routing method of the parent application from among two or more routing methods. Thus, by pre-packaging the sub-application into an output package of two or more routing methods and completing its registration in the corresponding parent application, the method enables routing of the sub-application using the target routing method corresponding to the configured routing method of the parent application in response to a routing request for the sub-application, solving the technical problem in related technologies where different routing methods between parent and child applications lead to sub-application loading failures or inaccurate page redirections.
[0099] As can be seen from the above analysis, in this embodiment, the sub-application can be routed using the target routing method corresponding to the routing method configured for the parent application among two or more routing methods. To clearly illustrate how the target routing method is determined in this application, this embodiment provides another micro-frontend sub-application routing method. Figure 2This is a flowchart illustrating another micro front-end application routing method provided in an embodiment of this application.
[0100] like Figure 2 As shown, the micro front-end application routing method may include the following steps:
[0101] Step 201: In response to a routing request for a sub-application, obtain the routing method configured for the parent application.
[0102] It should be noted that the execution process of this step can refer to the execution process of step 101 in the previous embodiment, and the principle is the same, so it will not be repeated here.
[0103] Step 202: Match the routing method configured in the parent application with the routing method indicated by the names of the output packets of two or more routing methods, so as to determine the matching routing method as the target routing method.
[0104] In this embodiment, the names of the output packets of two or more routing methods pre-packaged by the sub-application can be used to indicate the corresponding routing method. Thus, the corresponding routing method can be determined based on the names of the output packets of two or more routing methods pre-packaged by the sub-application. Then, the routing method configured in the parent application can be matched with the routing method indicated by the names of the output packets of the two or more routing methods, and the matching routing method can be determined as the target routing method.
[0105] Step 203: Route the sub-applications using the target route method.
[0106] In this embodiment, sub-applications can be routed using a target routing method. Since the routing method configured in the parent application is matched with the routing method packaged in the sub-application, and the matching routing method is determined as the target routing method, the routing methods of the parent and sub-applications are consistent, thus avoiding issues such as sub-application loading failures or unprepared page redirects.
[0107] The micro-frontend sub-application routing method provided in this embodiment obtains the routing method configured in the parent application in response to a routing request for a sub-application. It then matches the parent application's configured routing method with the routing methods indicated by the names of the output packets of two or more routing methods. The matching routing method is determined as the target routing method, and the sub-application is routed using this target routing method. Since the sub-application is pre-packaged into output packets of two or more routing methods, and the names of these output packets can indicate the corresponding routing methods, the method that matches the parent application's configured routing method among the output packets of two or more routing methods can be determined as the target routing method, and the sub-application is routed using this target routing method. This solves the technical problem in related technologies where different routing methods between parent and child applications lead to sub-application loading failures or inaccurate page redirections.
[0108] To clearly illustrate the above embodiments, this embodiment provides another micro front-end application routing method. Figure 3 This is a flowchart illustrating another micro front-end application routing method provided in an embodiment of this application.
[0109] like Figure 3 As shown, the micro front-end application routing method may include the following steps:
[0110] Step 301: In response to a routing request for a sub-application, obtain the routing method configured for the parent application.
[0111] It should be noted that in this embodiment, the two or more routing methods include hash routing and browser routing. Pre-packaging the sub-application into an output package of two or more routing methods results in a pre-packaged output package of the sub-application as both a hash routing output package and a browser routing output package. Optionally, the routing method in the output package can be set to hash routing to obtain a hash routing output package, or the routing method in the output package can be set to browser routing to obtain a browser routing output package.
[0112] It should be noted that, in this embodiment, the routing methods configured for the parent application include hash routing and browser routing.
[0113] The other execution processes in this step can be found in the execution process of step 101 in the above embodiment. The principle is the same, so it will not be repeated here.
[0114] Step 302: In response to the parent application being configured with hash routing, the child application is routed using hash routing.
[0115] In this embodiment, if the parent application is configured with hash routing, the child application can be routed using hash routing. Since the parent and child applications use the same routing method, there will be no issues with the child application failing to load or the page redirecting not being ready.
[0116] Step 303: In response to the parent application being configured with browser routing, the child application is routed using browser routing.
[0117] In this embodiment, if the parent application is configured with browser routing, the child application can be routed using browser routing. Since the parent and child applications use the same routing method, there will be no issues with the child application failing to load or the page not redirecting correctly.
[0118] The micro-frontend sub-application routing method provided in this embodiment obtains the routing method configured in the parent application in response to a routing request for the sub-application. If the parent application's configured routing method is hash routing, the sub-application is routed using hash routing; otherwise, if the parent application's configured routing method is browser routing, the sub-application is routed using browser routing. Thus, by pre-packaging the sub-application into hash routing output packages and browser routing output packages and registering them with the corresponding parent application, the method obtains the parent application's configured routing method in response to a routing request for the sub-application and routes the sub-application using the target routing method corresponding to the parent application's configured routing method from the hash routing and browser routing methods. This solves the technical problem in related technologies where different parent and child application routing methods lead to sub-application loading failures or inaccurate page redirections.
[0119] It should be noted that, in this embodiment, security verification can be performed on the sub-applications before routing them. To clearly illustrate this process, this embodiment provides another micro-frontend sub-application routing method. Figure 4 This is a flowchart illustrating another micro front-end application routing method provided in an embodiment of this application.
[0120] like Figure 4 As shown, the micro front-end application routing method may include the following steps:
[0121] Step 401: In response to a routing request for a child application, obtain the routing method configured for the parent application.
[0122] It should be noted that the execution process of this step can be referred to the execution process of step 101 in the above embodiment, and the principle is the same, so it will not be repeated here.
[0123] Step 402: Send an access record retrieval request for the sub-application to the corresponding business terminal to obtain the access record.
[0124] In this embodiment, a security verification can be performed on the sub-application before routing it, to determine whether routing is possible based on the security verification result. Optionally, routing can be performed on the sub-application if the security verification is successful.
[0125] In this embodiment, an access record retrieval request for the sub-application can be sent to the business terminal corresponding to the sub-application to obtain the access record of the sub-application from the business terminal corresponding to the sub-application, and security verification can be performed based on the obtained access record.
[0126] Step 403: If there are failed access records in the access log that exceed the preset number of times within the preset time period, the security verification is determined to have failed.
[0127] In this embodiment, if the acquired access records contain more than a preset number of failed access records within a preset time period, the security verification is determined to have failed, and the sub-application security verification will not pass. This embodiment does not limit the setting of the preset time period and the preset number of attempts. Optionally, they can be set based on manual experience; for example, the preset time period can be set to 10 seconds and the preset number of attempts to 50. Alternatively, they can be dynamically adjusted according to actual application needs. This embodiment does not impose any restrictions on this.
[0128] Understandably, if the access records obtained contain more than a preset number of failed access records within a preset time period, it indicates that there is a high probability of brute-force access within that preset time period. The sub-application may have been attacked and there is a security risk. In this case, the security verification result can be determined as a security verification failure to block access.
[0129] Step 404: If there are no failed access records exceeding the preset number of times within the preset time period in the access records, the security verification is confirmed to be successful.
[0130] In this embodiment, if there are no failed access records exceeding a preset number within a preset time period in the obtained access records, the security verification is considered successful, and the sub-application security verification passes. This embodiment does not limit the setting of the preset time period and preset number of attempts. Optionally, they can be set based on manual experience; for example, the preset time period can be set to 10 seconds and the preset number of attempts to 50. Alternatively, they can be dynamically adjusted according to actual application needs. This embodiment does not impose any restrictions on this.
[0131] Understandably, if the access records obtained do not contain any failed access records exceeding the preset number within the preset time period, it means that there is a high probability that there was no brute-force access within the preset time period, the sub-application has not been attacked, and there is no security risk. In this case, the security verification result can be determined as successful, and access can be allowed.
[0132] Step 405: If the security verification is successful, route the child application using the target routing method that corresponds to the routing method configured for the parent application, from among two or more routing methods.
[0133] In this embodiment, if the sub-application passes security verification, the sub-application can be routed using the target routing method that corresponds to the routing method configured for the parent application among two or more routing methods.
[0134] It should be noted that the other execution processes in this step can be referred to the execution process of step 102 in the above embodiment, and the principle is the same, so it will not be repeated here.
[0135] The micro-frontend sub-application routing method provided in this embodiment, in response to a routing request for a sub-application, obtains the routing method configured for the parent application and sends an access record retrieval request for the sub-application to the corresponding business terminal to obtain the access records. If the access records contain more than a preset number of failed access records within a preset time period, the security verification is determined to have failed; conversely, if the access records do not contain more than a preset number of failed access records within a preset time period, the security verification is determined to have succeeded. If the security verification is successful, the sub-application is routed using the target routing method corresponding to the routing method configured for the parent application from among two or more routing methods. Thus, only those who pass the security verification are allowed access, improving access security.
[0136] It should be noted that, in this embodiment, user authentication can also be performed on users accessing sub-applications. To clearly illustrate this process, this embodiment provides another micro-frontend sub-application routing method. Figure 5 This is a flowchart illustrating another micro front-end application routing method provided in an embodiment of this application.
[0137] like Figure 5 As shown, the micro front-end application routing method may include the following steps:
[0138] Step 501: In response to a routing request for a child application, obtain the routing method configured for the parent application.
[0139] Step 502: Route the child application using the target routing method that corresponds to the routing method configured for the parent application among two or more routing methods.
[0140] It should be noted that the execution process of steps 501-502 can be referred to the execution process of steps 101-102 in the above embodiment, and the principle is the same, so it will not be repeated here.
[0141] Step 503: Obtain the user token contained in the routing request.
[0142] In this embodiment, after routing the sub-application, the user accessing the sub-application can be authenticated to determine whether they are authorized to access the sub-application based on the authentication result. Optionally, the user can be allowed to access the sub-application if their authentication is successful.
[0143] In this embodiment, the business terminal corresponding to the sub-application can authenticate users accessing the sub-application. This business terminal stores Token information obtained from the front end, including the Token assigned to the authenticated user and its validity period.
[0144] In this embodiment, the user token contained in the routing request can be obtained. The user token is assigned after the user is authenticated when accessing the parent application.
[0145] Step 504: If the user's token exists in the token information and is within its valid time period, then authenticate the user.
[0146] In this embodiment, authentication is considered successful if the user's token exists in the token information and is within its validity period. In this case, the user is allowed to access the sub-application. Otherwise, authentication is considered unsuccessful, and the user is not allowed to access the sub-application. It is understood that unsuccessful authentication can include the following two situations:
[0147] There are two scenarios: one is that the user's token is not present in the token information, and the other is that the user's token is present in the token information but is not within its valid time period.
[0148] The micro-frontend sub-application routing method provided in this embodiment obtains the user token contained in the routing request after routing the sub-application. If the user token exists in the token information and is within its validity period, authentication is successful. Therefore, authentication can be completed using the user's authentication result token from the frontend, which is faster than re-authenticating the user's account password, thus improving the efficiency of accessing sub-applications.
[0149] To clearly illustrate the above embodiments, examples are given below.
[0150] Figure 6 This is a flowchart illustrating a micro front-end application routing method in a given scenario, as provided in an embodiment of this application.
[0151] like Figure 6 As shown, the micro front-end application routing method may include the following steps:
[0152] Step 601: Package the sub-application.
[0153] Here, webpack can be used to bundle the sub-application.
[0154] Step 602: Package the output packet A of the hash route.
[0155] Here, we can obtain hash-routed output packet A by setting the routing method in the output packet to hash routing. For example, we can obtain hash-routed output packet A using the following configuration:
[0156] Configure webpack.hash_config.js
[0157] history:{
[0158] type:'hash',
[0159] },
[0160] The packaging script is: npm run build:hash, and the corresponding output package is hashfront.
[0161] Step 603: Package the output packet B of the browser route.
[0162] Here, you can obtain browser route output packet B by setting the routing mode in the output packet to browser route. For example, you can obtain browser route output packet B through the following configuration:
[0163] Configure webpack.hash_config.js
[0164] history:{
[0165] type:'browser',
[0166] },
[0167] The packaging script is: npm run build:browser, and the corresponding output package is browserfront.
[0168] Step 604, embed the parent application α.
[0169] Here, since the parent application α is configured with hash routing, the output packet A of hash routing can be embedded into the parent application α.
[0170] Step 605: Embed the β parent application.
[0171] Here, since the routing method of the β parent application is configured as browser routing, the output packet A of browser routing can be embedded into the β parent application.
[0172] The previous embodiment described the implementation process of the micro-frontend sub-application routing method from the perspective of sub-applications. The following will combine... Figure 7 The implementation process of the micro-frontend sub-application routing method is further explained from the perspective of the parent application.
[0173] Figure 7 This is a flowchart illustrating another scenario-based micro-frontend application routing method provided in this application embodiment.
[0174] like Figure 7 As shown, the micro front-end application routing method may include the following steps:
[0175] Step 701: Obtain the routing method configured for the parent application.
[0176] Here, the routing methods configured for the parent application include hash routing and browser routing. Therefore, by obtaining the routing methods configured for the parent application, it can be determined whether the parent application is configured with hash routing or browser routing.
[0177] Step 702: Register the sub-application to use hashfront.
[0178] Here, the parent application can select a child application with the same routing method as its own. Optionally, since the parent application is configured with hash routing, hashfront can be used when registering the child application; that is, the child application will be bundled as an artifact of hash routing. For example, if the parent application is configured with hash routing (i.e., the parent application's webpack is configured with hash routing), hashfront can be selected when registering the child application.
[0179] import{registerMicroApps,start}from'qiankun';
[0180] registerMicroApps([
[0181] {
[0182] name:'reactApp',
[0183] entry:' / / xx.xx.xx.xx:3000 / hashfront / ',
[0184] container:'#container',
[0185] activeRule:' / app-react',
[0186] }, ]);
[0188] start();
[0189] Qiankun is a micro-frontend implementation library based on single-spa, designed to make it simpler and painless to build a production-ready micro-frontend architecture system.
[0190] Step 703: Register the sub-application to use BrowserFront.
[0191] Here, the parent application can select a child application with the same routing method as its own. Optionally, since the parent application is configured with browser routing, it can use BrowserFront when registering the child application; that is, the child application is bundled as an artifact of browser routing. For example, if the parent application is configured with browser routing (i.e., the parent application's webpack is configured with browser routing), BrowserFront can be selected when registering the child application.
[0192] import{registerMicroApps,start}from'qiankun';
[0193] registerMicroApps([
[0194] {
[0195] name:'reactApp',
[0196] entry:' / / xx.xx.xx.xx:3000 / browerfront / ',
[0197] container:'#container',
[0198] activeRule:' / app-react',
[0199] }, ]);
[0201] start();
[0202] Qiankun is a micro-frontend implementation library based on single-spa, designed to make it simpler and painless to build a production-ready micro-frontend architecture system.
[0203] Step 704: Run the sub-application.
[0204] In summary, when packaging a sub-application, two artifact packages are generated (one for hash routing and one for bower routing). The parent application selects the sub-application artifact package with the consistent routing method based on its own routing approach, thus resolving the issue of inaccurate page navigation or errors when a sub-application is embedded in multiple parent applications with different routing methods. Furthermore, it reduces development and debugging costs, enabling rapid integration with micro-frontend embedding and fast product delivery without code modification or version recompilation; different parent applications simply need to switch the corresponding sub-application as needed. Therefore, micro-frontend embedding of sub-applications allows for flexible selection of sub-application routing methods.
[0205] To implement the above embodiments, this application also proposes a micro front-end application routing device.
[0206] Figure 8 This is a schematic diagram of the structure of a micro front-end application routing device provided in an embodiment of this application.
[0207] like Figure 8 As shown, the micro front-end application routing device includes an acquisition module 81 and a routing module 82.
[0208] The acquisition module 81 is used to obtain the routing method configured in the parent application in response to a routing request for the sub-application.
[0209] The routing module 82 is used to route the child application using the target routing method corresponding to the routing method configured in the parent application, among two or more routing methods.
[0210] Furthermore, in one possible implementation of this application embodiment, the sub-application is pre-packaged into an output package of two or more routing methods, and registration is completed in the corresponding parent application.
[0211] Furthermore, in one possible implementation of this application embodiment, the routing module 82 includes:
[0212] The matching unit is used to match two or more routing methods with the routing methods configured in the parent application, so as to determine the matching routing method as the target routing method;
[0213] The routing unit is used to route sub-applications in a target-oriented manner.
[0214] Furthermore, in one possible implementation of this application embodiment, the names of the output packets of two or more routing methods are used to indicate the corresponding routing method, and the matching unit is specifically used for:
[0215] The parent application's configured routing method is matched with the routing method indicated by the names of the output packets of two or more routing methods, so that the matching routing method is determined as the target routing method.
[0216] Furthermore, in one possible implementation of this application embodiment, the two or more routing methods include hash routing and browser routing. The sub-application is pre-packaged into an output packet of the two or more routing methods, including:
[0217] Pre-package the sub-applications into hash route artifacts and browser route artifacts.
[0218] Furthermore, in one possible implementation of this application embodiment, the sub-application is pre-packaged into an output package for hash routing and an output package for browser routing, including:
[0219] Set the routing method in the output packet to hash routing to obtain the output packet of hash routing;
[0220] Set the routing mode in the output packet to browser routing to obtain the output packet for browser routing.
[0221] Furthermore, in one possible implementation of this application embodiment, the routing method configured for the parent application includes hash routing and browser routing, and the routing module 82 is further used for:
[0222] In response to the parent application being configured with hash routing, the child application will be routed using hash routing.
[0223] In response to the parent application being configured with browser routing, the child application is routed using browser routing.
[0224] It should be noted that the foregoing explanation of the micro-frontend application routing method embodiment also applies to the micro-frontend application routing device of this embodiment, and will not be repeated here.
[0225] Based on the above embodiments, this application also provides a possible implementation of a micro front-end application routing device. Figure 9 This is a schematic diagram of another micro front-end application routing device provided in an embodiment of the present application. Based on the previous embodiment, the micro front-end application routing device further includes a security verification module 83.
[0226] Security verification module 83 is used to perform security verification on sub-applications;
[0227] Furthermore, in one possible implementation of this application embodiment, the security verification module 83 is specifically used for:
[0228] Send an access record retrieval request for the sub-application to the corresponding business client to obtain the access records;
[0229] If the access log contains more than a preset number of failed access records within a preset time period, the security verification is determined to have failed.
[0230] If there are no failed access records exceeding the preset number within the preset time period in the access log, the security verification is determined to be successful.
[0231] Based on the above embodiments, this application also provides a possible implementation of a micro front-end application routing device. Figure 10 This is a schematic diagram of another micro front-end application routing device provided in an embodiment of this application. Based on the previous embodiment, the micro front-end application routing device further includes an authentication module 84.
[0232] The authentication module 84 is used by the business side corresponding to the sub-application to authenticate users accessing the sub-application; the business side stores the Token information obtained from the front end; the Token information includes the Token assigned to the verified user and the validity period;
[0233] Furthermore, in one possible implementation of this application embodiment, the authentication module 84 is specifically used for:
[0234] Retrieve the user token contained in the routing request. The user token is assigned after the user is authenticated when accessing the parent application.
[0235] If the user's token exists in the token information and is within its validity period, authentication is successful.
[0236] The micro-frontend sub-application routing device provided in this embodiment, in response to a routing request for a sub-application, obtains the routing method configured in the parent application, and then routes the sub-application using the target routing method corresponding to the configured routing method of the parent application from among two or more routing methods. Thus, by pre-packaging the sub-application into an output package of two or more routing methods and completing its registration in the corresponding parent application, the device enables routing of the sub-application using the target routing method corresponding to the configured routing method of the parent application in response to a routing request for the sub-application, solving the technical problem in related technologies where different routing methods between parent and child applications lead to sub-application loading failures or inaccurate page redirections.
[0237] To implement the above embodiments, this application also proposes an electronic device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to execute the micro front-end application routing method proposed in any of the above embodiments of this application.
[0238] Figure 11 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. It should be noted that... Figure 11 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.
[0239] like Figure 11 As shown, the electronic device may include: a housing 11, a processor 12, a memory 13, a circuit board 14, and a power supply circuit 15, wherein the circuit board 14 is disposed inside the space enclosed by the housing 11, and the processor 12 and the memory 13 are disposed on the circuit board 14; the power supply circuit 15 is used to supply power to various circuits or devices of the electronic device; the memory 13 is used to store executable program code; the processor 12 runs a program corresponding to the executable program code by reading the executable program code stored in the memory 13, for executing the micro front-end application routing method proposed in any of the above embodiments of this application.
[0240] For details on the specific execution process of the above steps by processor 12, and the steps further executed by processor 12 through running executable program code, please refer to this application. Figure 1-7 The description of the illustrated embodiments will not be repeated here.
[0241] To implement the above embodiments, this application also proposes a computer-readable storage medium storing computer instructions, wherein the computer instructions are used to cause a computer to execute the micro front-end application routing method proposed in any of the above embodiments of this application.
[0242] To implement the above embodiments, this application also proposes a computer program product, including a computer program that, when executed by a processor, implements the micro front-end application routing method proposed in any of the above embodiments of this application.
[0243] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics described in connection with that embodiment or example, which are included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.
[0244] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "multiple" means at least two, such as two, three, etc., unless otherwise explicitly specified.
[0245] Any process or method description in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.
[0246] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as a sequenced list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by, or in conjunction with, an instruction execution system, apparatus, or device (such as a computer-based system, a processor-included system, or other system that can fetch and execute instructions from, an instruction execution system, apparatus, or device). For the purposes of this specification, "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transmit programs for use by, or in conjunction with, an instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of computer-readable media include: an electrical connection having one or more wires (electronic device), a portable computer disk drive (magnetic device), random access memory (RAM), read-only memory (ROM), erasable and editable read-only memory (EPROM or flash memory), fiber optic devices, and portable optical disc read-only memory (CDROM). Alternatively, the computer-readable medium may be paper or other suitable media on which the program can be printed, since the program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, interpreting, or otherwise processing as necessary, and then stored in a computer memory.
[0247] It should be understood that various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.
[0248] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.
[0249] Furthermore, the functional units in the various embodiments of this application can be integrated into a processing module, or each unit can exist physically separately, or two or more units can be integrated into a module. The integrated module can be implemented in hardware or as a software functional module. If the integrated module is implemented as a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.
[0250] The storage medium mentioned above can be a read-only memory, a disk, or an optical disk, etc. Although embodiments of this application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting this application. Those skilled in the art can make changes, modifications, substitutions, and variations to the above embodiments within the scope of this application.
Claims
1. A micro front-end application routing method, characterized in that, The sub-application is pre-packaged into product packages representing two or more routing methods, and registered in the corresponding parent application. The name of the product package indicates the corresponding routing method, and the two or more routing methods include hash routing and browser routing. Pre-packaging the sub-application into product packages representing two or more routing methods includes pre-packaging the sub-application into a hash routing product package and a browser routing product package. The method includes: In response to a routing request for the sub-application, obtain the routing method configured for the parent application; The child application is routed using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods mentioned above; The method further includes: In response to a routing request for the sub-application, obtain the routing method configured for the second parent application; The child application is routed using the target routing method corresponding to the routing method configured for the second parent application among the two or more routing methods.
2. The method according to claim 1, characterized in that, The step of routing the child application using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods includes: The two or more routing methods are matched with the routing methods configured in the parent application, and the matching routing methods are determined as the target routing methods. The sub-application is routed using the target routing method.
3. The method according to claim 2, characterized in that, The names of the output packets of the two or more routing methods are used to indicate the corresponding routing methods. Matching the two or more routing methods with the routing methods configured in the parent application, and determining the matching routing methods as the target routing methods, includes: The routing method configured for the parent application is matched with the routing method indicated by the name of the output packet of the two or more routing methods, so as to determine the matching routing method as the target routing method.
4. The method according to claim 1, characterized in that, The pre-packaging of the sub-application into hash route output packages and browser route output packages includes: Set the routing method in the output packet to hash routing to obtain the output packet of hash routing; Set the routing mode in the output packet to browser routing to obtain the output packet for browser routing.
5. The method according to claim 1, characterized in that, The parent application is configured with routing methods including hash routing and browser routing. The step of routing the child application using the target routing method corresponding to the parent application's configured routing method from among the two or more routing methods includes: In response to the parent application being configured with hash routing, the child application is routed using hash routing. In response to the parent application being configured with browser routing, the child application is routed using browser routing.
6. The method according to claim 1, characterized in that, Before routing the sub-application using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods, a security verification is performed on the sub-application. The security verification method includes: Send an access record retrieval request for the sub-application to the business terminal corresponding to the sub-application in order to obtain the access record; If the access log contains more than a preset number of failed access records within a preset time period, the security verification is determined to have failed. If there are no failed access records exceeding the preset number within the preset time period in the access log, the security verification is determined to be successful.
7. The method according to claim 1, characterized in that, After routing the sub-application using the target routing method corresponding to the routing method configured for the parent application among the two or more routing methods, the business terminal corresponding to the sub-application authenticates the user accessing the sub-application; the business terminal stores the Token information obtained from the front end; The token information includes the token assigned to the verified user and its validity period; The authentication method includes: Obtain the user token contained in the routing request, wherein the user token is assigned after the user is verified when accessing the parent application; If the user token exists in the token information and is within the valid time period, the authentication is successful.
8. A micro front-end application routing device, characterized in that, The sub-application is pre-packaged into product packages representing two or more routing methods, and registered in the corresponding parent application. The name of the product package indicates the corresponding routing method, and the two or more routing methods include hash routing and browser routing. Pre-packaging the sub-application into product packages representing two or more routing methods includes: pre-packaging the sub-application into a hash routing product package and a browser routing product package. The apparatus includes: The acquisition module is used to acquire the routing method configured for the parent application in response to a routing request for the sub-application. The routing module is used to route the child application using the target routing method that corresponds to the routing method configured for the parent application among the two or more routing methods. The acquisition module is also used to acquire the routing method configured for the second parent application in response to a routing request for the sub-application. The routing module is further configured to route the child application using the target routing method corresponding to the routing method configured for the second parent application among the two or more routing methods.
9. An electronic device, characterized in that, include: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-8.
10. A computer-readable storage medium storing computer instructions, characterized in that, The computer instructions are used to cause the computer to perform the method according to any one of claims 1-7.
11. A computer program product, characterized in that, It includes a computer program that, when executed by a processor, implements the method of any one of claims 1-7.
Citation Information
Patent Citations
Micro-front-end page control method and device, terminal equipment and storage medium
CN112948035A