Application management system and method based on micro-front-end architecture

Abstract

The invention relates to an application management system and method based on a micro-front-end framework, and the method comprises the steps: integrating a micro-front-end technical framework qiankun, achieving the dynamic registration, route monitoring and resource loading of sub-applications through a main application module, building a user management and authority management interface in a system configuration module, enabling a manager to complete the personnel configuration only through the interface, and enabling the system to be convenient to use. And related data can be synchronized to the API gateway, so that binding of the application front end and the application configuration is realized, and application development management is facilitated. According to the invention, a whole set of micro-front-end architecture system covering the full-life-cycle management function of the sub-applications is established, unified functions of application creation, version management, authority management, automatic construction, deployment and the like are provided, the research and development mode and process of the applications in the system are standardized, the complexity and cost of maintenance of the sub-applications in the system are reduced, and the development efficiency of the system is improved. And the stability, maintainability and safety of the system are improved.

Description

Technical Field

[0001] This invention relates to the field of data processing technology, and in particular to an application management system and method based on a micro-frontend architecture. Background Technology

[0002] Currently available technical frameworks for implementing micro-frontend architecture include:

[0003] Single-Spa: A front-end microservice JavaScript framework that is compatible with multiple front-end technology stacks, allows the use of multiple front-end frameworks on the same page without refreshing the page, and supports independent deployment of each single-page application.

[0004] Qiankun: A micro-frontend implementation solution based on Single-Spa, open-sourced by Alibaba. It provides a more out-of-the-box API based on Single-Spa, supports HTML Entry access, and can be used by applications with any technology stack. It also provides style isolation and JS sandbox to ensure the independence between sub-applications.

[0005] Web Components: A type of browser native component that supports any technology stack. It encapsulates various sub-applications, and each sub-application can be called directly in the main application as an independent component.

[0006] Micro-app: JD.com's micro-frontend technology based on WebComponent-like rendering provides features such as JS sandboxing, style isolation, element isolation, and preloading, and supports compatibility with any framework.

[0007] The aforementioned micro-frontend technology framework primarily focuses on achieving seamless integration between different frontend applications at runtime, lacking platform-based and systematic management of sub-applications. In the financial sector, business scenarios are complex and diverse. If each micro-frontend sub-application is separately encapsulated and exists independently, the lack of a unified monitoring, deployment, update, and version control mechanism will make system maintenance increasingly difficult as functionality expands and the number of applications grows, significantly increasing operational costs and impacting the stability and security of the entire system. This could potentially lead to business interruptions and affect user experience.

[0008] Therefore, it is crucial to achieve unified management of micro-frontend sub-applications in the financial sector. While adopting micro-frontend technology, it is necessary to build a complete sub-application management mechanism to realize functions such as centralized registration, configuration, monitoring, deployment, and version control of applications. This will ensure the flexibility and efficiency brought by micro-frontends while guaranteeing the stability of the entire system under large-scale application management. Summary of the Invention

[0009] To reduce the complexity of sub-application management in large and complex micro-frontend architecture systems, this invention integrates the micro-frontend technology framework qiankun to build a complete micro-frontend architecture system covering the entire lifecycle management of sub-applications. By providing unified functions such as application creation, version management, permission management, automated building, and deployment, it standardizes the development mode and process of applications within the system, reduces the complexity and cost of maintaining sub-applications within the system, and improves the stability, maintainability, and security of the system.

[0010] To achieve the above objectives, the technical solution adopted by the present invention includes:

[0011] An application management system based on a micro-frontend architecture is characterized by comprising: a main application module, sub-application modules, and a system configuration module; wherein,

[0012] The main application module integrates the qiankun micro-frontend framework. The main application module is used to obtain the list of applications that the current user has the right to use and application registration information. It passes the application registration information to the application registration function of the qiankun framework to register the sub-application. The main application module calls the startup function of the qiankun framework to listen to the system route. When a route change is detected, the page is redirected according to the routing scheduling logic within the system.

[0013] The main application module requests the corresponding static resource package of the sub-application from the nginx static resource server based on the front-end static resource access address in the application registration information, so as to load the corresponding resources;

[0014] The sub-application responds to the main application's startup operation by receiving a static resource package and completing registration and resource loading;

[0015] The system configuration module configures user data and corresponding permission data based on the unified user management and permission management interface in runtime, and sends the user data and corresponding permission data to the runtime API gateway based on the application dimension.

[0016] The system configuration module updates the corresponding version status in the database by modifying the version activation identifier, and synchronizes the application configuration data of the effective version to the runtime API gateway to ensure that the querying user has the right to return the front-end static resource address of the effective version through the application list interface.

[0017] Furthermore, the main application module calls the startup function of the qiankun framework to monitor the system routing. When a route change is detected, the page is redirected according to the routing scheduling logic within the system, specifically including:

[0018] When a route change is detected, the application's unique identifier is traversed based on the route path. If an application's unique identifier exists, the route is a sub-application route; otherwise, the route is a non-sub-application route.

[0019] When the route is a sub-application route, determine whether it is registered in the sub-application. If it is registered in the sub-application, redirect to the page corresponding to the route; otherwise, return a 404 error page.

[0020] If the route is not a sub-application route, determine whether it is registered in the main application. If it is registered in the main application, redirect to the page corresponding to the route; otherwise, return a 404 error page.

[0021] Furthermore, the runtime API gateway and the development API gateway are used for request forwarding and interface authentication. The runtime API gateway relies on application configuration data synchronized by the system configuration module. The development API gateway is used for communication between the client and the server. The development API gateway relies on application configuration data synchronized by the application management platform. The application configuration data includes user data, permission data, and routing addresses.

[0022] Furthermore, the system also includes an application management platform, which includes an application creation module, a version creation module, an application configuration module, and a version deployment module.

[0023] Furthermore, the application creation module is used to create application entities. The basic information of the application entity includes the application's unique identifier, application name, application business category, application technology stack, affiliated team, application front-end code repository address, and Node version.

[0024] The version creation module is used to create a version number according to the version number naming rules. The version number is associated with the application unique identifier. Based on the version number, the basic information of the corresponding application entity is inserted into the database. The basic information of the application entity includes the version number, the version unique identifier, the application unique identifier, and the version activation identifier.

[0025] The application configuration module is used to synchronize application configuration data to the development-mode API gateway based on the application version number. The application configuration module is also used to associate application permission configuration with the application version number, establish interface-level permission control on the server side, and establish page-level permission control and button-level permission control on the client side.

[0026] The version deployment module is used to build a front-end static resource package and deploy it to the nginx static resource server; the version deployment module is also used to import application configuration information from the application management platform into the database.

[0027] Furthermore, establish interface-level access control on the server side, including:

[0028] The system retrieves the current user's role information based on the request, queries the list of authorized interfaces corresponding to the role information using the application's unique identifier, and determines whether the request matches the list of authorized interfaces. If it matches, the request is allowed and forwarded to the server. If it does not match, the request is intercepted and an "access denied" message is returned to the client.

[0029] Establish page-level access control on the client side, including:

[0030] Based on the current user's role information, obtain the corresponding authorized menu information. Based on the authorized menu information and the initial route table of the Vue front-end project, filter out the authorized route table. Call the addRoutes function in vue-router to register the authorized routes, so that only the pages corresponding to the registered routes can be accessed by the user.

[0031] Establish button-level access control on the client side, including:

[0032] Obtain the array of unique identifiers for all authorized buttons corresponding to the current user's role information. Use a custom command to control the visibility of buttons by verifying whether the unique identifier of the button corresponding to the input user's role information exists in the array of unique identifiers.

[0033] This invention also relates to an application management method based on a micro-frontend architecture, characterized in that it includes:

[0034] Integrate the qiankun micro-frontend framework to obtain the list of applications currently authorized by the user and application registration information. Pass the application registration information into the application registration function of the qiankun framework to register the sub-application. Call the startup function of the qiankun framework to listen for system routes. When a route change is detected, redirect the page according to the routing scheduling logic within the system.

[0035] Based on the front-end static resource access address in the application registration information, request the corresponding sub-application's static resource package from the nginx static resource server to load the corresponding resources;

[0036] In response to the main application's startup operation, it receives the static resource package and completes registration and resource loading;

[0037] Configure user data and corresponding permission data based on the unified user management and permission management interface in runtime, and send the user data and corresponding permission data to the runtime API gateway based on the application dimension.

[0038] By modifying the version activation identifier to update the corresponding version status in the database, the application configuration data of the effective version is synchronized to the runtime API gateway to ensure that users querying the application list interface are entitled to return the front-end static resource address of the effective version.

[0039] The present invention also relates to a computer-readable storage medium, characterized in that the storage medium stores a computer program, which, when executed by a processor, implements the system.

[0040] The present invention also relates to an electronic device, characterized in that it includes a processor and a memory;

[0041] The memory is used to store program instructions;

[0042] The processor is used to implement the system by calling program instructions.

[0043] The present invention also relates to a computer program product, comprising a computer program and / or instructions, characterized in that the computer program and / or instructions implement the system when executed by a processor.

[0044] The beneficial effects of this invention are as follows:

[0045] The application management system and method based on micro-frontend architecture described in this invention can achieve at least the following technical effects:

[0046] 1. Self-service: Each R&D team within the system can independently configure applications, build and deploy versions, and further improve R&D efficiency through a unified management interface;

[0047] 2. Platform-based management: System administrators can centrally manage the basic information of sub-applications through a unified management interface, clearly grasp the information related to the development of each application on the platform, including basic application information, code repository, version update logs, deployment records, etc., reducing the management difficulty of the system;

[0048] 3. Version Management: Bind front-end projects and application configurations through versions to achieve unified deployment and rapid rollback of application versions;

[0049] 4. Unified Access Control System: Based on RBAC (Role-Based Access Control) theory, a unified access control system is established for sub-applications. Application-level, page-level, and button-level access control are implemented on the client side, and interface-level access control is implemented on the server side. This ensures that only users with the corresponding permissions can access sensitive data or perform critical operations. At the same time, a unified user management and access control configuration entry point is provided to ensure the overall security and ease of use of the system. Attached Figure Description

[0050] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below.

[0051] Figure 1This is a schematic diagram of an application management system based on a micro-frontend architecture according to the present invention;

[0052] Figure 2 This is a functional architecture diagram of the present invention;

[0053] Figure 3 This is a schematic diagram of the front-end routing structure of an application management system based on a micro-front-end architecture according to the present invention;

[0054] Figure 4 This is a schematic diagram of the structure of an electronic device according to the present invention. Detailed Implementation

[0055] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. It should be understood that the described embodiments are only some embodiments of this application, not all embodiments, and these embodiments are only used to illustrate this application and not to limit the scope of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.

[0056] like Figure 1 As shown in the figure, this invention discloses an application management system based on a micro-frontend architecture, the structure of which includes:

[0057] The main application module is used to obtain the list of applications that the current user is authorized to and the application registration information. It passes the application registration information to the application registration function of the qiankun framework to register the sub-application. The main application module calls the startup function of the qiankun framework to listen for system routes. When a route change is detected, the page is redirected according to the routing scheduling logic within the system.

[0058] The functional architecture of the present invention is as follows Figure 2 As shown, the business operation end is mainly divided into three parts: the client, the runtime API gateway, and the server. The client includes the main application module and sub-application modules, while the server includes the system configuration module and sub-application backend services. The main application module is the core of application integration in the micro-frontend architecture. In this case, the main application uses a Vue 2 standard project generated by the vue-cli 3.0 scaffolding, integrating the qiankun micro-frontend framework to implement dynamic registration of sub-applications, application resource loading, application rendering, and sub-application lifecycle management. Dynamic registration of sub-applications is the core of implementing client-side application-level permission management. Optionally, this system does not restrict the technology stack of the main frontend application and sub-applications. Based on the characteristics of the qiankun micro-frontend framework, the main and sub-applications can freely choose to use Vue or React. When changing the technology stack, the implementation scheme of route registration in page-level authentication needs to be changed accordingly based on the corresponding technology framework.

[0059] After startup, the main application retrieves the list of authorized applications for the current user and related data for each application via an API, including the application name, application unique identifier (8 digits), front-end static resource access entry address, and the unique identifier of the currently active version. The data structure is as follows: [

[0061] {

[0062] appName:'Application 1',

[0063] appCode:'AAAAAAAA',

[0064] entry:

[0065] 'https: / / xx.citicbank.com / static / child / AAAAAAA / V1.0 / index.html',

[0066] version:'V1.0',

[0067] versionId:'20ead4f4-46eb-b41a-a5a3-3283bf41a44c'

[0068] },

[0069] {

[0070] appName:'Application 2',

[0071] appCode:'BBBBBBBB',

[0072] entry:

[0073] 'https: / / xx.citicbank.com / static / child / BBBBBBBB / V1.2 / index.html',

[0074] version:'V1.2',

[0075] versionId:'cb497b2b-43b8-243b-0cc6-803f09581a3c'

[0076] } ]

[0078] The application-related data is assembled into application registration information that conforms to the application registration function of the qiankun framework. The data structure is as follows: [

[0080] {

[0081] name: 'Application 1',

[0082] entry:

[0083] 'https: / / xx.citicbank.com / static / child / AAAAAAAA / V1.0 / index.html',

[0084] container: '#container',

[0085] activeRule: ' / AAAAAAAA',

[0086] props: {

[0087] version: 'V1.0',

[0088] versionId: '20ead4f4-46eb-b41a-a5a3-3283bf41a44c'

[0089] [[ID=2,6]]}

[0090] },

[0091] {

[0092] name: 'Application 2',

[0093] entry:

[0094] 'https: / / xx.citicbank.com / static / child / BBBBBBBB / V1.2 / index.html',

[0095] container: '#container',

[0096] activeRule: ' / BBBBBBBB',

[0097] props: {

[0098] version: 'V1.2',

[0099] versionId: 'cb497b2b-43b8-243b-0cc6-803f09581a3c'

[0100] }

[0101] }

[0103] ​The application registration function `registerMicroApps()` of the qiankun framework is called, passing in the application registration information to complete the application registration. Simultaneously, the startup function `start` of the qiankun framework is called to start the micro-frontend framework's listening for system routes. After application registration is complete, the overall routing structure of the system frontend is as follows: Figure 3 .

[0104] The main application module calls the qiankun framework's startup function to listen for system routes. When a route change is detected, it redirects the page according to the system's routing scheduling logic, specifically including:

[0105] When a route change is detected, the application's unique identifier is traversed based on the route path. If an application's unique identifier exists, the route is a sub-application route; otherwise, the route is a non-sub-application route.

[0106] When the route is a sub-application route, determine whether it is registered in the sub-application. If it is registered in the sub-application, redirect to the page corresponding to the route; otherwise, return a 404 error page.

[0107] If the route is not a sub-application route, determine whether it is registered in the main application. If it is registered in the main application, redirect to the page corresponding to the route; otherwise, return a 404 error page.

[0108] The main application module requests the corresponding static resource package of the sub-application from the nginx static resource server based on the front-end static resource access address in the application registration information, so as to load the corresponding resources.

[0109] The main application requests the static resource package of the application with the unique identifier AAAAAAAA on Nginx using the fetch method, based on the front-end static resource access entry address in the application registration information. The resource path is: / static / child / AAAAAAAA / V1.0 / {static resource name}.

[0110] The main application requests the static resource package of the application with the unique identifier BBBBBBBB on Nginx using the fetch method, based on the front-end static resource access entry address in the application registration information. The resource path is: / static / child / BBBBBBBB / V1.2 / {static resource name}.

[0111] The system also includes a runtime API gateway and a development API gateway for request forwarding and interface authentication. The runtime API gateway relies on application configuration data synchronized by the system configuration module. The development API gateway is used for communication between the client and the server. The development API gateway relies on application configuration data synchronized by the application management platform. The application configuration data includes user data, permission data, and routing addresses.

[0112] In this system, the runtime API gateway functions identically to the development API gateway, handling request forwarding and interface authentication. The runtime API gateway's functionality relies on application configuration data synchronized from the system configuration module on the server side. The runtime API gateway can also integrate functional components consistent with the API gateway's role, such as circuit breaking and rate limiting, health checks, and load balancing. Extracting these common capabilities from the sub-application backend services reduces system complexity.

[0113] The system configuration module configures user data and corresponding permission data based on the unified user management and permission management interface in runtime. The system configuration module sends the user data and corresponding permission data to the runtime API gateway based on the application dimension.

[0114] The system configuration module includes user management and permission management. It establishes a unified runtime entry point for user and permission management. Since roles, pages, buttons, and interfaces are already defined during application development, application administrators only need to add users and assign roles through user and permission management during runtime. After these operations are completed, the relevant data is pushed to the runtime API gateway at the application level.

[0115] The system configuration module updates the corresponding version status in the database by modifying the version activation identifier, and synchronizes the application configuration data of the effective version to the runtime API gateway to ensure that the querying user has the right to return the front-end static resource address of the effective version through the application list interface.

[0116] The system configuration module also includes application version management. Platform administrators can switch versions through application version management. Version switching mainly involves two parts: switching the sub-application frontend and switching the application configuration data. Since the static resource server stores the static resource packages of each version of the frontend application, the frontend version can be switched simply by using the currently effective version when assembling the frontend static resource address, ensuring that the frontend static resource address of the application in the "Query User's Authorized Application List" interface is the effective version address. In application version management, the unique identifier of the currently effective version is modified, the unique identifier field of the effective version in the corresponding version application entity in the database is updated, and the application configuration data (including user data, permission data, routing addresses, etc.) in the effective version is queried from the database. The application configuration data is then fully synchronized to the runtime API gateway to achieve the switching of application configuration data.

[0117] The system also includes an application management platform, which comprises an application creation module, a version creation module, an application configuration module, and a version deployment module.

[0118] The application creation module is used to create application entities. The basic information of the application entity includes the application's unique identifier, application name, application business category, application technology stack, team, application front-end code repository address, and Node version.

[0119] The version creation module is used to create a version number according to the version number naming rules. The version number is associated with the application's unique identifier. Based on the version number, the basic information of the corresponding application entity is inserted into the database. The basic information of the application entity includes the version number, the version unique identifier, the application unique identifier, and the version activation identifier.

[0120] The application configuration module is used to synchronize application configuration data to the development-mode API gateway based on the application version number. The application configuration module is also used to associate application permission configuration with the application version number, establish interface-level permission control on the server side, and establish page-level permission control and button-level permission control on the client side.

[0121] The version deployment module is used to build the front-end static resource package and deploy it to the nginx static resource server; the version deployment module is also used to import application configuration information from the application management platform into the database.

[0122] like Figure 2 As shown, the development management end is mainly divided into the application management platform and the development-mode API gateway. The application management platform completes the basic information management, version management, permission configuration, version building and deployment of the application during the development phase. The development-mode API gateway is used to complete the request forwarding between the client and the server and to perform permission control based on the application configuration data synchronized by the application management platform.

[0123] Specifically, the functional design of the application development is as follows:

[0124] Application creation: Create an application entity within the system. The basic information of the entity includes fields such as application unique identifier (8 uppercase letters), application name, application business category, application technology stack, team, application front-end Git code repository address, and Node version.

[0125] Version Creation: Each time an application is updated, a new version number needs to be created. The version number naming rule is like VX.Y, where X represents the major version number and Y represents the minor version number, such as V1.1. The application can choose to upgrade to the major or minor version number according to the iteration content. Each version is associated with a unique application identifier, and the corresponding entity is inserted into the database. The basic information of the newly added application entity includes: unique version identifier, version number, unique application identifier, creation time, creator, version effective identifier, production time, production identifier bit, and other fields.

[0126] Application configuration and feature development: Application configuration mainly includes permission configuration and API gateway address configuration. The configuration is associated with a single version. After the configuration is completed, the application management platform selects which version of the application configuration to deploy and synchronizes it to the development API gateway.

[0127] Permission configuration: Based on the RBAC (Role-Based Access Control) theory, a unified permission management system is established for sub-applications. Application-level, page-level, and button-level permission control is implemented on the client side, and interface-level permission control is implemented on the server side to ensure that only users with corresponding permissions can access sensitive data or perform critical operations.

[0128] Version building and deployment: 1. Application front-end static resource package; 2. Application configuration information.

[0129] For the application's front-end static resource bundle, Webpack is used to build it, generating a front-end application static resource bundle (a collection of HTML / CSS / JS files), which is then deployed to the `static` directory of the Nginx (static resource server) server. The bundling parameters and deployment path rules are as follows:

[0130] The publicPath definition rule in Webpack bundling parameters is: ' / static / child / application's 8-digit unique identifier (e.g., AAAAAAAAA) / application version number (e.g., V1.0, V1.1) / '

[0131] Nginx application static resource storage directory rules: / Application unique identifier (e.g., AAAAAAAA) / Application version number / Application resource package.

[0132] Application configuration information is exported from the application management platform via SQL and imported into the runtime database via automated scripts.

[0133] The above steps can be automated using CI / CD tools.

[0134] This system provides a detailed access control design.

[0135] Establish interface-level access control on the server side, including:

[0136] The system retrieves the current user's role information based on the request. Then, it queries the list of authorized interfaces corresponding to the role information using the application's unique identifier. It determines whether the request matches the list of authorized interfaces. If it does, the request is allowed and forwarded to the server. If it does not match, the request is intercepted and an "access denied" message is returned to the client.

[0137] The API gateway obtains the role information of the currently logged-in user based on the sessionID in the request header, and then queries the list of authorized interfaces bound to the role. If the current request matches the list of authorized interfaces, it is allowed; otherwise, it is blocked.

[0138] Establish page-level access control on the client side, including:

[0139] Based on the current user's role information, obtain the corresponding authorized menu information. Based on the authorized menu information and the initial route table of the Vue front-end project, filter out the authorized route table. Call the addRoutes function in vue-router to register the authorized routes, so that only the pages corresponding to the registered routes can be accessed by the user.

[0140] The application obtains the menu information bound to the currently logged-in user's role through an interface, combines it with the initial route table in the Vue front-end project, filters out the authorized routes, and registers the authorized routes to vue-router using the addRoutes function in vue-router. The vue-router plugin ensures that only the pages corresponding to the registered routes can be accessed by the user.

[0141] Establish button-level access control on the client side, including:

[0142] Obtain the array of unique identifiers for all authorized buttons corresponding to the current user's role information. Use a custom command to control the visibility of buttons by verifying whether the unique identifier of the button corresponding to the input user's role information exists in the array of unique identifiers.

[0143] Obtain a unique identifier array of all authorized buttons for the currently logged-in user's role through an API. In the front-end project, define a custom v-permission directive. The directive controls the visibility of buttons on the interface by checking whether the passed-in unique identifier exists in the unique identifier array obtained from the API.

[0144] This invention discloses an application management method based on a micro-frontend architecture, the process of which includes:

[0145] Integrate the qiankun micro-frontend framework to obtain the list of applications currently authorized by the user and application registration information. Pass the application registration information into the application registration function of the qiankun framework to register the sub-application. Call the startup function of the qiankun framework to listen for system routes. When a route change is detected, redirect the page according to the routing scheduling logic within the system.

[0146] Based on the front-end static resource access address in the application registration information, request the corresponding sub-application's static resource package from the nginx static resource server to load the corresponding resources;

[0147] In response to the main application's startup operation, it receives the static resource package and completes registration and resource loading;

[0148] Configure user data and corresponding permission data based on the unified user management and permission management interface in runtime, and send the user data and corresponding permission data to the runtime API gateway based on the application dimension.

[0149] By modifying the version activation identifier to update the corresponding version status in the database, the application configuration data of the effective version is synchronized to the runtime API gateway to ensure that users querying the application list interface are entitled to return the front-end static resource address of the effective version.

[0150] By using this system, the aforementioned computational processing methods can be executed and the corresponding technical effects can be achieved.

[0151] Embodiments of the present invention also provide a computer-readable storage medium capable of implementing all the steps of the methods in the above embodiments, wherein the computer-readable storage medium stores a computer program that, when executed by a processor, implements all the steps of the methods in the above embodiments.

[0152] Embodiments of the present invention also provide an electronic device for performing the above-described method, which, as an implementation apparatus for the method, has the following structure. Figure 4 As shown, the electronic device 400 includes a processor 401 and a memory 403. The processor 401 and the memory 403 are connected, for example, via a bus 402. Optionally, the electronic device 400 may also include a transceiver 404. It should be noted that in practical applications, the transceiver 404 is not limited to one. It is understood that the structure illustrated in the embodiments of the present invention does not constitute a specific limitation on the specific structure of the electronic device 400. In other embodiments of this application, the electronic device 400 may include more or fewer components than illustrated, or combine some components, or split some components, or arrange different components. The illustrated components may be implemented in hardware, software, or a combination of software and hardware. Optionally, the electronic device may also include a display screen 405 for displaying images or receiving user operation commands when needed.

[0153] In this embodiment, processor 401 is used to implement the method shown in the above method embodiment. Transceiver 404 may include a receiver and a transmitter. Transceiver 404 is used in this embodiment to enable the electronic device of this embodiment to communicate with other devices during execution.

[0154] Processor 401 may be a CPU (Central Processing Unit), a general-purpose processor, a DSP (Digital Signal Processor), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It can implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this application. Processor 401 may also be a combination that implements computational functions, such as including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

[0155] Processor 401 may also include one or more processing units, such as an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors. The controller may serve as the central nervous system and command center of the electronic device 400. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution. Processor 401 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 401 is a cache memory. This memory can store instructions or data that processor 401 has just used or is repeatedly used. If processor 401 needs to reuse the instruction or data, it can directly retrieve it from the memory. This avoids repeated access, reduces the waiting time of processor 401, and thus improves system efficiency.

[0156] The processor 401 can run the methods provided in the embodiments of this application. The processor 401 may include different devices. For example, when integrating a CPU and a GPU, the CPU and GPU can cooperate to execute the methods provided in the embodiments of this application. For example, some algorithms in the method are executed by the CPU, and other algorithms are executed by the GPU to obtain faster processing efficiency.

[0157] Bus 402 may include a pathway for transmitting information between the aforementioned components. Bus 402 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. Bus 402 can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 4 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0158] The memory 403 may be ROM (Read Only Memory) or other types of static storage devices capable of storing static information and instructions, RAM (Random Access Memory) or other types of dynamic storage devices capable of storing information and instructions, or EEPROM (Electrically Erasable Programmable Read Only Memory), CD-ROM (Compact Disc Read Only Memory), or high-speed random access memory. It may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), or other optical disc storage, optical disk storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto.

[0159] Optionally, the memory 403 is used to store application code that executes the scheme of this application, and the execution is controlled by the processor 401. The processor 401 is used to execute the application code stored in the memory 403 to implement the method provided in any embodiment of this application.

[0160] The memory 403 can be used to store computer executable program code, which includes instructions. The processor 401 executes various functional applications and data processing of the electronic device 400 by running the instructions stored in the memory 403. The memory 403 may include a program storage area and a data storage area. The program storage area can store the operating system, application code, etc. The data storage area can store data created during the use of the electronic device 400 (such as images and videos captured by a camera application).

[0161] The memory 403 may also store one or more computer programs corresponding to the methods provided in the embodiments of this application. The one or more computer programs are stored in the memory 403 and configured to be executed by the one or more processors 401. The one or more computer programs include instructions that can be used to perform the various steps in the corresponding embodiments described above.

[0162] Of course, the code for the method provided in this application embodiment can also be stored in external memory. In this case, the processor 401 can run the code for the method stored in external memory through the external memory interface, and the processor 401 can control the execution flow.

[0163] The display screen 405 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a minimized LED, a microLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 400 may include one or N displays 405, where N is a positive integer greater than 1. The display screen 405 can be used to display information input by the user or information provided to the user, as well as various graphical user interfaces (GUIs). For example, the display screen 405 can display photos, videos, web pages, or documents.

[0164] The electronic device provided in this application is applicable to any of the above-described methods. Therefore, the beneficial effects it can achieve can be referred to the beneficial effects in the corresponding methods provided above, and will not be repeated here.

[0165] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0166] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A system that specifies functions in one or more boxes.

[0167] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including an instruction set implemented in a process. Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0168] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the functions specified in one or more boxes. Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the invention.

[0169] The above description is merely a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. An application management system based on a micro-frontend architecture, characterized in that, include: The system consists of a main application module, sub-application modules, and a system configuration module; among them, The main application module integrates the qiankun micro-frontend framework. The main application module is used to obtain the list of applications that the current user has the right to use and application registration information. It passes the application registration information to the application registration function of the qiankun framework to register the sub-application. The main application module calls the startup function of the qiankun framework to listen to the system route. When a route change is detected, the page is redirected according to the routing scheduling logic within the system. The main application module requests the corresponding static resource package of the sub-application from the nginx static resource server based on the front-end static resource access address in the application registration information, so as to load the corresponding resources; The sub-application responds to the main application's startup operation by receiving a static resource package and completing registration and resource loading; The system configuration module configures user data and corresponding permission data based on the unified user management and permission management interface in runtime, and sends the user data and corresponding permission data to the runtime API gateway based on the application dimension. The system configuration module updates the corresponding version status in the database by modifying the version activation identifier, and synchronizes the application configuration data of the effective version to the runtime API gateway to ensure that the querying user has the right to return the front-end static resource address of the effective version through the application list interface.

2. The system as described in claim 1, characterized in that, The main application module calls the startup function of the qiankun framework to listen for system routes. When a route change is detected, the page is redirected according to the system's internal route scheduling logic, specifically including: When a route change is detected, the application's unique identifier is traversed based on the route path. If an application's unique identifier exists, the route is a sub-application route; otherwise, the route is a non-sub-application route. When the route is a sub-application route, determine whether it is registered in the sub-application. If it is registered in the sub-application, redirect to the page corresponding to the route; otherwise, return a 404 error page. If the route is not a sub-application route, determine whether it is registered in the main application. If it is registered in the main application, redirect to the page corresponding to the route; otherwise, return a 404 error page.

3. The system as described in claim 1, characterized in that, The runtime API gateway and the development API gateway are used for request forwarding and interface authentication. The runtime API gateway relies on application configuration data synchronized by the system configuration module. The development API gateway is used for communication between the client and the server. The development API gateway relies on application configuration data synchronized by the application management platform. The application configuration data includes user data, permission data, and routing addresses.

4. The system as described in claim 1, characterized in that, The system also includes an application management platform, which includes an application creation module, a version creation module, an application configuration module, and a version deployment module.

5. The system as described in claim 4, characterized in that, in, The application creation module is used to create application entities. The basic information of the application entity includes the application unique identifier, application name, application business category, application technology stack, team to which it belongs, application front-end code repository address, and node version. The version creation module is used to create a version number according to the version number naming rules. The version number is associated with the application unique identifier. Based on the version number, the basic information of the corresponding application entity is inserted into the database. The basic information of the application entity includes the version number, the version unique identifier, the application unique identifier, and the version activation identifier. The application configuration module is used to synchronize application configuration data to the development-mode API gateway based on the application version number. The application configuration module is also used to associate application permission configuration with the application version number, establish interface-level permission control on the server side, and establish page-level permission control and button-level permission control on the client side. The version deployment module is used to build the front-end static resource package and deploy it to the nginx static resource server; The version deployment module is also used to import application configuration information from the application management platform into the database.

6. The system as described in claim 5, characterized in that, Establish interface-level access control on the server side, including: The system retrieves the current user's role information based on the request, queries the list of authorized interfaces corresponding to the role information using the application's unique identifier, and determines whether the request matches the list of authorized interfaces. If it matches, the request is allowed and forwarded to the server. If it does not match, the request is intercepted and an "access denied" message is returned to the client. Establish page-level access control on the client side, including: Based on the current user's role information, obtain the corresponding authorized menu information. Based on the authorized menu information and the initial route table of the Vue front-end project, filter out the authorized route table. Call the addRoutes function in vue-router to register the authorized routes, so that only the pages corresponding to the registered routes can be accessed by the user. Establish button-level access control on the client side, including: Obtain the array of unique identifiers for all authorized buttons corresponding to the current user's role information. Use a custom command to control the visibility of buttons by verifying whether the unique identifier of the button corresponding to the input user's role information exists in the array of unique identifiers.

7. An application management method based on a micro-frontend architecture, characterized in that, include: Integrate the qiankun micro-frontend framework to obtain the list of applications currently authorized by the user and application registration information. Pass the application registration information into the application registration function of the qiankun framework to register the sub-application. Call the startup function of the qiankun framework to listen for system routes. When a route change is detected, redirect the page according to the routing scheduling logic within the system. Based on the front-end static resource access address in the application registration information, request the corresponding sub-application's static resource package from the nginx static resource server to load the corresponding resources; In response to the main application's startup operation, it receives the static resource package and completes registration and resource loading; Configure user data and corresponding permission data based on the unified user management and permission management interface in runtime, and send the user data and corresponding permission data to the runtime API gateway based on the application dimension. By modifying the version activation identifier to update the corresponding version status in the database, the application configuration data of the effective version is synchronized to the runtime API gateway to ensure that users querying the application list interface are entitled to return the front-end static resource address of the effective version.

8. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements the system according to any one of claims 1 to 6.

9. An electronic device, characterized in that, Including processor and memory; The memory is used to store program instructions; The processor is configured to implement the system according to any one of claims 1 to 6 by invoking program instructions.

10. A computer program product comprising a computer program and / or instructions, characterized in that, When the computer program and / or instructions are executed by the processor, they implement the system described in any one of claims 1 to 6.

Images