Front-end multi-tenant management method and device, electronic equipment and storage medium

Abstract

The invention relates to the field of front-end technology, can be applied to the field of digital medical / financial science and technology, and discloses a front-end multi-tenant management method and device, electronic equipment and a storage medium. The method comprises the following steps: returning a security access token corresponding to a target tenant by using an authentication mechanism based on a token or third-party authorization according to a tenant registration request; when registration succeeds, role configuration data and permission configuration data of the target tenant are generated; when it is monitored that login is successful by using the security access token, creating a micro-front-end application and different micro-front-end modules of the target tenant according to the role configuration data and the authority configuration data; starting a micro-front-end application, and dynamically loading a micro-front-end module according to the role configuration data and the authority configuration data; and executing mixed mode rendering on the front-end module at the server side and the tenant side through the integrated front-end framework to obtain a front-end rendering page of the target tenant. According to the method, multi-tenant security isolation is realized, resources are loaded as required, and system performance and expansibility are guaranteed.

Description

Technical Field

[0001] This application relates to the field of front-end technologies and can be applied to the fields of digital healthcare / fintech. In particular, it relates to a front-end multi-tenant management method, device, electronic device, and storage medium. Background Art

[0002] As the core technology supporting the SaaS model, the multi-tenant architecture significantly improves the operational efficiency of enterprise-level applications through resource pooling and tenant isolation mechanisms. There are currently various technical implementation methods for its development. Back-end multi-tenancy achieves physical isolation of data and computing resources through database sharding and container orchestration. Or the micro-frontend architecture realizes dynamic loading of front-end modules through JS sandboxes and style isolation. Or component library customization provides the ability to differentiate basic interfaces through theme configuration and template combination. However, the application of traditional multi-tenant solutions still has significant drawbacks in fields such as healthcare and finance. In the healthcare scenario, the hospital multi-campus management system needs to dynamically load exclusive appointment modules (such as the emergency priority queue component on the front end) for different branches. However, the traditional solution relies on full-backend rendering, resulting in delayed interface loading. Moreover, the front-end sandbox cannot isolate the patient privacy data of different branches, and there may be incidents where doctors in a branch accidentally access the patient detection records of other branches. In the financial field, the bank multi-brand platform needs to load encrypted transaction components (such as the front-end biometric verification module) for customers in real time. However, the traditional front-end framework cannot be loaded on demand, resulting in long time consumption. At the same time, due to the lack of a JS logic isolation mechanism in the component library customization solution, there may be security issues where hackers use cross-tenant script injection to steal customers' bank card information. Summary of the Invention

[0003] The main technical problem to be solved by the embodiments of this application is the insufficient dynamic loading and security isolation of front-end resources in traditional multi-tenant technical solutions.

[0004] To solve the above technical problems, the first technical solution adopted in the embodiments of the present application is: to provide a front-end multi-tenant management method, including: listening to the registration interface to receive tenant registration requests, and using an authentication mechanism based on tokens or third-party authorization to return a secure access token corresponding to the target tenant according to the tenant registration requests; when the target tenant is successfully registered, generating role configuration data and permission configuration data for the target tenant; when the login interface listens for a successful login result using the secure access token, using a preset micro-frontend architecture to create a micro-frontend application and different micro-frontend modules for the target tenant according to the role configuration data and the permission configuration data; starting the micro-frontend application, and dynamically loading the micro-frontend modules according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism; using the dynamically loaded front-end resources through a pre-integrated front-end framework to perform hybrid-mode rendering of the micro-frontend modules on the server side and the tenant side, and obtaining a front-end rendered page for the target tenant.

[0005] Optionally, after the step of dynamically loading the micro-frontend modules according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism, the method further includes: configuring a preset server security middleware, setting a list of allowed cross-origin sources and a whitelist of request methods for the micro-frontend application, and adding response header information to protect against cross-origin requests; filtering and validating input data, performing special character transfer on output data, and setting a content security policy response header through the server security middleware to determine the allowed resource sources for loading; generating a cross-site request forgery protection token for the target tenant, and verifying cross-site requests corresponding to the target tenant through the cross-site request forgery protection token; encrypting and storing and encrypting the transmission of data of the target tenant using a preset encryption algorithm.

[0006] Optionally, after the step of dynamically loading the micro-frontend modules according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism, the method further includes: configuring a preset server cache middleware, setting the storage method and expiration time policy of the server cache middleware; analyzing the dynamically loaded micro-frontend modules and pre-stored front-end resources according to the role configuration data and the permission configuration data to obtain high-frequency accessed front-end resources corresponding to the target tenant; storing the high-frequency accessed front-end resources in the server cache middleware, setting a unique cache key and cache time for each high-frequency accessed front-end resource; when receiving a request for a target front-end resource, if the cache time of the target front-end resource has not expired, obtaining the target front-end resource from the server cache middleware according to the storage method and the unique cache key, and returning the target front-end resource to the request initiator.

[0007] Optionally, before the step of the listening registration interface receiving a tenant registration request and returning a security access token corresponding to a target tenant according to the tenant registration request by using an authentication mechanism based on a token or third-party authorization, the method further includes: matching a corresponding load balancer according to the scale requirement and performance requirement of front-end multi-tenant management, configuring a listening port, a server list and a load balancing algorithm of the load balancer; registering network addresses and port information of backend servers in the server list to the load balancer; when receiving a multi-tenant request, sending the multi-tenant request to a backend server in the server list through the load balancing algorithm; enabling a monitoring function of the load balancer, collecting and analyzing network data of request distribution and server load data in real time, and adjusting parameters of the load balancing algorithm and adding or removing servers in the server list according to the analysis result.

[0008] Optionally, the step of generating role configuration data and permission configuration data of the target tenant when the target tenant is successfully registered includes: when the target tenant is successfully registered, generating the role configuration data and the permission configuration data according to a preset tenant role template and tenant permission template; generating association relationship data between the role configuration data and the permission configuration data and a unique identifier of the target tenant, and encrypting and storing the association relationship data in a local storage of the tenant side and a database of the server side; creating corresponding tenant front-end access control rules according to the role configuration data and the permission configuration data, and synchronizing the tenant front-end access control rules to the local storage of the tenant side, where the tenant front-end access control rules define visible elements and operable elements of tenants with different roles and permissions on a front-end page; periodically detecting whether the association relationship data stored in the database of the server side has changed, and if so, generating new tenant front-end access control rules according to the changed content data, and synchronously updating the new tenant front-end access control rules to the local storage of the tenant side.

[0009] Optionally, the step of starting the micro front-end application and dynamically loading the micro front-end module according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism includes: extracting the unique identifier of the target tenant from the login information, initializing the running environment of the micro front-end application according to the unique identifier, and setting the isolation configuration of the running environment for different tenants through the unique identifier; generating a micro front-end module loading list adapted to different target tenants according to the role configuration data and the permission configuration data; allocating independent resource spaces for different target tenants according to the micro front-end module loading list, and loading the front-end resources in the micro front-end loading list into the independent resource spaces; when the front-end resources are obtained from the corresponding independent resource space according to the micro front-end module loading list and the front-end components are rendered, creating front-end event handling logics for different target tenants.

[0010] Optionally, the step of performing hybrid-mode rendering of the micro front-end module on the server side and the tenant side using the dynamically loaded front-end resources through a pre-integrated front-end framework includes: adding the server-side rendering dependency library and environment parameter configuration corresponding to the front-end framework, and optimizing the server-side rendering configuration data of the front-end framework; before pre-rendering on the server side, obtaining page-related data by calling a back-end interface or querying a database, and injecting the page-related data into the front-end components of the front-end framework; when using the front-end components for pre-rendering, optimizing the meta tags, page structure, and tag semantics of the page to be pre-rendered to improve the search engine accessibility of the rendered page; sending the pre-rendered page to the tenant side, and continuing to render on the tenant side using the dynamically loaded front-end resources and the obtained page-related data to obtain the front-end rendered page of the target tenant; comparing the front-end cache data on the server side and the tenant side, and updating the front-end cache data on the tenant side according to the comparison result data.

[0011] To solve the above technical problems, the second technical solution adopted in the embodiments of the present application is: to provide a front-end multi-tenant management device, including: a tenant registration monitoring module, configured to monitor a registration interface to receive a tenant registration request, and use an authentication mechanism based on a token or third-party authorization to return a security access token corresponding to a target tenant according to the tenant registration request; a role permission configuration module, configured to generate role configuration data and permission configuration data of the target tenant when the target tenant registration is successful; a micro front-end application creation module, configured to use a preset micro front-end architecture to create the micro front-end application and different micro front-end modules of the target tenant according to the role configuration data and the permission configuration data when a login interface monitors a listening result of successful login using the security access token; a micro front-end module loading module, configured to start the micro front-end application and dynamically load the micro front-end modules according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism; a hybrid mode rendering module, configured to perform hybrid mode rendering of the micro front-end modules on the server side and the tenant side using the dynamically loaded front-end resources through a pre-integrated front-end framework to obtain a front-end rendering page of the target tenant.

[0012] To solve the above technical problems, the third technical solution adopted in the embodiments of the present application is: to provide an electronic device, including: 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, and the instructions are executed by the at least one processor to enable the at least one processor to execute the front-end multi-tenant management method as described above.

[0013] To solve the above technical problems, the fourth technical solution adopted in the embodiments of the present application is: to provide a non-volatile computer-readable storage medium, the non-volatile computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by an electronic device, the electronic device is enabled to execute the front-end multi-tenant management method as described above.

[0014] Different from the related art, the present application constructs a complete multi-tenant management system, realizes precise isolation of resources and data between tenants, the authentication mechanism based on a token or third-party authorization ensures the security of sensitive data transmission, the micro front-end architecture combined with the dynamic loading mechanism loads modules on demand, reduces resource consumption and improves scalability, the hybrid rendering mode optimizes the first-screen loading speed, role permission control ensures fine-grained management of access permissions for different tenants, and the server security protection and caching strategy further improve the system performance and security, providing an efficient and reliable front-end multi-tenant solution for multiple industries such as finance and healthcare. Description of the Drawings

[0015] One or more embodiments are illustrated by corresponding drawings. These illustrative descriptions do not limit the embodiments. Elements with the same reference numerals in the drawings represent similar elements. Unless otherwise stated, the drawings in the figures do not constitute a scale limitation.

[0016] Figure 1 It is a schematic diagram of the operating environment of the front-end multi-tenant management method provided by an embodiment of the present application.

[0017] Figure 2 It is a schematic diagram of the execution process of the front-end multi-tenant management method provided by an embodiment of the present application.

[0018] Figure 3 It is a schematic diagram of the execution process of generating tenant configuration data in the front-end multi-tenant management method provided by an embodiment of the present application.

[0019] Figure 4 It is a schematic diagram of the execution process of performing hybrid mode rendering in the front-end multi-tenant management method provided by an embodiment of the present application.

[0020] Figure 5 It is a schematic diagram of the system structure of the front-end multi-tenant management device provided by an embodiment of the present application.

[0021] Figure 6 It is a schematic diagram of the hardware structure of an electronic device for executing the front-end multi-tenant management method provided by an embodiment of the present application. Detailed implementation manners

[0022] In order to make the objectives, technical solutions and advantages of the present application clearer, the present application will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0023] It should be noted that if there is no conflict, the various features in the embodiments of the present application can be combined with each other, and all are within the protection scope of the present application. In addition, although the functional modules are divided in the device schematic diagram and the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in a different module division from that in the device schematic diagram or a different order from that in the flowchart.

[0024] Unless otherwise defined, all technical and scientific terms used in this specification have the same meaning as commonly understood by those skilled in the technical field to which this application belongs. The terms used in the specification of this application are only for the purpose of describing specific embodiments and are not used to limit this application. The term "and / or" used in this specification includes any and all combinations of one or more of the related listed items.

[0025] To facilitate the understanding of this embodiment, first, a front-end multi-tenant management method disclosed in the embodiments of this application will be introduced in detail. Please refer to Figure 1 , Figure 1 which is a schematic diagram of the operating environment of the front-end multi-tenant management method provided by the embodiments of this application. As Figure 1 shown, the execution entity of the front-end multi-tenant management method provided by the embodiments of this application is generally an electronic device with certain computing capabilities, such as a computer device. In some possible implementation manners, the front-end multi-tenant management method can be implemented by a processor calling computer-readable instructions stored in a memory. Among them, Figure 1 the computer device in Figure 1 can be a server. The server can be an independent server or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, Content Delivery Network (CDN), and big data and artificial intelligence platforms. It can be understood that

[0026] Please continue to refer to Figure 2 , Figure 2 which is a schematic diagram of the execution process of the front-end multi-tenant management method provided by the embodiments of this application. As Figure 2 shown, it includes the following steps:

[0027] S1. Listen to the registration interface to receive tenant registration requests, and use an authentication mechanism based on tokens or third-party authorization to return a security access token corresponding to the target tenant according to the tenant registration requests.

[0028] For example, in practical applications, when it comes to tenant registration in different industries, the process of using a token-based or third-party authorization authentication mechanism to return a secure access token will have different manifestations. In the fintech field, an intelligent investment advisor platform, as a third-party application, needs to access a user's account information in a bank. At this time, the OAuth 2.0 mechanism is adopted. After the user authorizes on the bank's official website, the passport-oauth2 middleware is called through a Node.js service to obtain an authorization code containing the user's permission scope, and then it is exchanged for an access token (Access Token). This token only allows the platform to read the user's authorized data within the validity period. In the digital healthcare scenario, a chain of clinics group needs to interact with a regional healthcare cloud platform through its self-built HIS (Hospital Information System) system for patient data. At this time, the JWT mechanism is adopted. After a Node.js service verifies the qualifications such as the medical institution practice license provided by the clinic, an encrypted token containing the institution ID and data access level (such as only outpatient records) is generated. This token is transmitted to the healthcare cloud platform, and the platform opens the data interface with corresponding permissions after verifying the signature.

[0029] As an optional implementation method, load balancing for multi-tenant requests can also be achieved through a load balancer (such as PM2 or Nginx), which improves the scalability and reliability of the system. After the execution of step S1 above is completed, the following steps S11 to S14 may also be included.

[0030] S11. Match the corresponding load balancer according to the scale requirements and performance requirements of the front-end multi-tenant management, and configure the listening port, server list, and load balancing algorithm of the load balancer.

[0031] Among them, front-end multi-tenant management systems with different scales and performance requirements need different load balancers to meet their needs. Systems with a small scale and low performance requirements may be satisfied with a simple load balancer, while large-scale and high-concurrency systems require more powerful and stable load balancers. The listening port is used to receive requests from clients. The server list is a set of backend servers available for the load balancer to distribute requests, and the load balancing algorithm determines how to distribute requests to these servers.

[0032] For example, in the online banking system of a large bank, a large number of users perform operations such as transferring money and querying balances every day, which requires extremely high concurrent processing capabilities and stability of the system. At this time, Nginx can be selected as the load balancer, which has high performance and high concurrent processing capabilities. Configure the listening ports to 80 or 443 (the default ports for HTTP and HTTPS). The server list contains multiple high-performance backend servers for processing user requests. The round-robin algorithm is adopted to sequentially distribute user requests to each server to ensure relatively balanced server loads. Another example is a small regional medical information platform that mainly serves several local clinics and hospitals and processes services such as patient medical record queries and appointment registrations, with a relatively small scale. PM2 can be selected as the load balancer, which is simple to use and suitable for small-scale systems. Configure the listening port to a custom port, such as 3000. The server list contains a small number of backend servers, and the random algorithm (Random) is adopted to randomly distribute requests to the servers.

[0033] S12. Register the network addresses and port information of the backend servers in the server list to the load balancer.

[0034] S13. When receiving multi-tenant requests, send the multi-tenant requests to the backend servers in the server list through the load balancing algorithm.

[0035] S14. Enable the monitoring function of the load balancer to collect and analyze network data of request distribution and server load data in real time, and adjust the parameters of the load balancing algorithm according to the analysis results, as well as add or remove servers in the server list.

[0036] Among them, to ensure the performance and reliability of the system, it is necessary to monitor the working status of the load balancer in real time. By collecting network data of request distribution (such as the number of requests, response time, etc.) and server load data (such as CPU usage, memory usage, etc.). According to these analysis results, the parameters of the load balancing algorithm can be adjusted, such as changing the weights of the servers in the weighted round-robin algorithm to make requests more reasonably distributed to the servers. At the same time, if it is found that the load of some servers is too high or too low, or there are failures, etc., the servers in the server list can be added or removed in time to ensure the stability and scalability of the system.

[0037] For example, in a bank's online banking system, after the Nginx load balancer enables the monitoring function, it is found that the CPU usage rate of a certain server has been above 90%, while the loads of other servers are relatively low. At this time, by adjusting the parameters of the weighted round-robin algorithm, the weight of this server can be reduced, and the number of requests allocated to this server can be decreased. If it is found that the concurrent request volume of the system has increased significantly and the existing servers cannot meet the demand, new servers can be added to the server list in a timely manner to improve the processing capacity of the system. Another example is in a regional medical information platform. The PM2 load balancer monitors the load conditions of the servers in real time and finds that a certain server has failed and cannot process requests normally. At this time, this server can be removed from the server list to prevent requests from continuing to be sent to this server.

[0038] S2. When the target tenant registers successfully, generate the role configuration data and permission configuration data of the target tenant.

[0039] Among them, based on the roles and permissions configuration of the tenants, precise access control of resources and data can be realized, ensuring effective isolation between tenants. In terms of resource utilization, different tenants obtain corresponding resources according to their respective permissions, avoiding the abuse and conflict of resources. For example, different bank tenants in the financial field can only access their own customer data, ensuring data security. From a business perspective, fine-grained permission settings can meet the complex business needs of each tenant. For example, the permissions of medical staff at different levels are different in the medical scenario, improving work efficiency. In the face of business changes, dynamic permission adjustment does not require modifying the underlying code, ensuring the flexibility of the system. In addition, strict tenant isolation also enhances the stability of the system, preventing the abnormal operations of one tenant from affecting other tenants and providing a solid support for the reliable operation of the system.

[0040] As an optional implementation manner, please continue to refer to Figure 3 , Figure 3 is a schematic diagram of the execution process for generating the configuration data of tenants in the front-end multi-tenant management method provided by the embodiments of the present application. As Figure 3 shown, it specifically includes the following steps S21 to step S25.

[0041] S21. When the target tenant registers successfully, generate the role configuration data and permission configuration data according to the pre-set tenant role template and tenant permission template.

[0042] S22. Generate the association relationship data between the role configuration data and permission configuration data and the unique identifier of the target tenant, and encrypt and store the association relationship data in the local storage of the tenant side and the database of the server side.

[0043] Among them, generating role permission data through templating and establishing an encrypted association relationship significantly improves the security, efficiency, and maintainability of the multi-tenant system. Configuration data can be quickly generated based on predefined templates. For example, tenants such as financial institutions or chain clinics can go live within minutes. The templated design supports dynamic adjustment of permission policies (such as adding an electronic prescription review role in the medical system), and two-way encrypted storage (front-end local + back-end database) ensures double isolation of financial customer data and medical patient privacy.

[0044] S23. Create corresponding tenant front-end access control rules based on the role configuration data and the permission configuration data, and synchronize the tenant front-end access control rules to the local storage of the tenant side. Among them, the tenant front-end access control rules define the visible elements and operable elements of tenants with different roles and permissions on the front-end page.

[0045] Among them, the core function of the above step S23 is to clarify which elements tenants with different roles and permissions can see and which elements they can operate on the front-end page, so as to achieve precise permission control on the front-end page. In the financial field, on the front-end page of the ordinary customer role in the banking system, only query elements such as account balance and transaction records may be visible, and only query operations can be performed. In addition to the query function, bank tellers can also see and operate elements such as account opening and transfer authorization. After creating this rule and synchronizing it to the local storage of the tenant side, when an ordinary customer logs in to the system, the front-end page will only display the elements that they can access and operate according to the stored rules, preventing unauthorized operations. In the medical field, in the hospital information system, the patient role can only see elements such as their own medical records and inspection reports, and mostly for viewing operations. The doctor role can see the patient's medical records and perform operations such as diagnosis and prescribing. After this rule is synchronized to the local storage, patients can only access their relevant information when logging in, and doctors can perform corresponding medical operations when logging in, ensuring the security of system data and the standardization of operations.

[0046] S24. Regularly detect whether the association relationship data stored in the database on the server side has changed. If it has changed, generate new tenant front-end access control rules according to the changed content data, and synchronize and update the new tenant front-end access control rules to the local storage of the tenant side.

[0047] Among them, the above step S24 guarantees the security of the multi-tenant front-end system and prevents unauthorized access caused by untimely rule updates. For example, in the financial system, it can prevent roles with revoked permissions from continuing to access sensitive data. At the same time, it improves management flexibility. Administrators can flexibly adjust permission configurations on the server side without manual intervention by users.

[0048] S3. When the login interface detects a successful login result using a secure access token, create a micro front-end application and different micro front-end modules for the target tenant according to the role configuration data and permission configuration data using a preset micro front-end architecture.

[0049] For example, when the login interface detects successful verification of the secure access token, use front-end technology architectures such as React, Vue, or Angular to dynamically create the micro front-end application and modules of the target tenant according to role permissions. For example, the administrator role of a financial tenant can load the "Transaction Monitoring Dashboard" module built with React, and ordinary users can only load the "Account Query" component developed with Vue. Node.js provides backend routing support through the Express framework and realizes style isolation and state management in combination with the qiankun framework. The collaborative development of Node.js and React / Vue / Angular improves the efficiency of front-end and back-end separation, and the micro front-end architecture supports module-level hot updates and independent deployments. In terms of tenant experience, the dynamic loading mechanism based on role permissions ensures that financial users can only see authorized React chart components or Vue form elements, and the doctor role of a medical tenant realizes the rendering of electronic prescriptions through Angular components. In terms of scalability, the high concurrency processing ability of Node.js combined with the componentization characteristics of the front-end framework supports the rapid addition of complex business modules such as "Cross-border Payment", meeting the flexible needs in a multi-tenant scenario.

[0050] S4. Start the micro front-end application and dynamically load the micro front-end modules according to the role configuration data and permission configuration data through a preset front-end resource dynamic loading mechanism.

[0051] For example, in the financial field, there are significant differences in role permissions. For example, ordinary customers may only need to view account information and perform simple transaction operations, while senior traders need to use complex analysis tools and real-time market data. Through the dynamic loading mechanism, when ordinary customers log in, only the necessary CSS, JS, and HTML resources are loaded, reducing the initial loading time and improving the response speed. If customers have more needs later, other modules can be loaded on demand. Senior traders can load professional analysis modules according to their work scenarios, avoiding loading too many useless resources at once. In the medical field, the role permissions of doctors and nurses are different. Doctors may need to view detailed patient medical records, make diagnoses and prescribe medications, while nurses are mainly responsible for executing medical orders and recording nursing conditions. The dynamic loading mechanism allows doctors to quickly load modules related to medical record viewing and diagnosis, and nurses to load corresponding modules such as nursing records, realizing lazy loading of resources on demand, reducing the initial loading time, providing precise services according to the actual needs of different roles, and improving the system's usage efficiency and user experience.

[0052] As an alternative implementation, the above step S4 may specifically include the following steps S41 to S44.

[0053] S41. Extract the unique identifier of the target tenant from the login information, initialize the running environment of the micro front-end application according to the unique identifier, and set the isolation configuration of the running environments of different tenants through the unique identifier.

[0054] S42. Generate a micro front-end module loading list adapted to different target tenants according to the role configuration data and the permission configuration data.

[0055] Among them, the loading list is generated for different target tenants based on the role configuration data and the permission configuration data, and clarifies the micro front-end modules that can be loaded by this tenant and the corresponding front-end resources, such as which CSS, JS, HTML files, etc.

[0056] S43. According to the micro front-end module loading list, allocate independent resource spaces for different target tenants, and load the front-end resources in the micro front-end loading list into the independent resource spaces.

[0057] Among them, the independent resource space is a dedicated area allocated for each target tenant, used to store the front-end resources required by its micro front-end modules, ensuring the isolation of resources of different tenants.

[0058] S44. After the front-end resources are obtained from the corresponding independent resource space according to the micro front-end module loading list and the front-end components are rendered, create the front-end event handling logic for different target tenants.

[0059] Among them, the event handling logic is the rule for handling user interaction events created for different target tenants after the front-end components are rendered, such as the response rules for operations such as clicking a button and submitting a form. The above steps S41 to S44, the loading list realizes on-demand loading and improves efficiency, the independent resource space guarantees the tenant data security and isolation, and the event handling logic provides a personalized interaction experience, enhancing the system flexibility and maintainability. For example, in the financial field, different departments of a bank are different tenants. The loading list can enable the credit department to only load the module resources related to credit business, and the investment department to load the investment analysis module resources. The independent resource space ensures that the data and resources of each department do not interfere with each other. The event handling logic can enable the credit department to have a specific processing process when submitting a loan application. In the medical field, the loading list, independent resource space and event handling logic of different department tenants can enable the surgical department to only load the modules related to surgery, the internal medicine department to load the modules related to diagnosis, and each to have different interaction responses.

[0060] S5. Use the dynamically loaded front-end resources through the pre-integrated front-end framework to perform hybrid-mode rendering of the front-end modules on the server side and the tenant side, and obtain the front-end rendered page of the target tenant.

[0061] As an alternative implementation, please continue to refer to Figure 4 , Figure 4 which is a schematic diagram of the execution process for hybrid mode rendering in the front-end multi-tenant management method provided by the embodiments of this application. As Figure 4 shown, it specifically includes the following steps S51 to S55.

[0062] S51. Add the server-side rendering dependency library and environment parameter configuration corresponding to the front-end framework, and optimize the server-side rendering configuration data of the front-end framework.

[0063] S52. Before pre-rendering on the server side, obtain the page-associated data by calling the back-end interface or querying the database, and inject the page-associated data into the front-end components of the front-end framework.

[0064] S53. When using the front-end components for pre-rendering, optimize the meta tags, page structure, and tag semantics of the pre-rendered page to improve the accessibility of the rendered page to search engines.

[0065] S54. Send the pre-rendered page to the tenant side, and continue to render on the tenant side using the dynamically loaded front-end resources and the obtained page-associated data to obtain the front-end rendered page of the target tenant.

[0066] S55. Compare the front-end cache data on the server side and the tenant side, and update the front-end cache data on the tenant side according to the comparison result data.

[0067] Among them, the above steps S51 to S55 significantly improve the performance and user experience of the multi-tenant front-end system through the hybrid rendering mechanism. For example, in the financial field, the bank wealth management platform adds the React SSR dependency library to optimize the rendering configuration, injects real-time exchange rate data, shortens the loading time of the product page pre-rendered on the server side, and optimizes the meta tags to improve the SEO effect. Another example is that the medical cloud platform adopts the Vue SSR technology to achieve second-level loading of the first screen of the electronic medical record page, can continue to render dynamic diagnosis components on the client side, and the cache comparison mechanism ensures the real-time update of patients' sensitive data. The server-side rendering optimization in the above steps improves the first-screen loading speed, the dynamic data injection guarantees the real-time requirements, and the cache update ensures the accuracy of the data, realizing a high-performance and secure front-end rendering process.

[0068] As another alternative implementation, the network security of the front-end tenant can also be protected through server security middleware (such as Helmet, CORS, etc.). After the execution of the hybrid mode rendering in step S5 above, the following steps S61 to S64 can also be included.

[0069] S61. Configure the preset server security middleware, set the list of allowed cross-origin sources and the whitelist of request methods for the micro-frontend application, and add response header information to protect against cross-origin requests.

[0070] S62. Filter and validate the input data through the server security middleware, transfer special characters for the output data, and set the content security policy response header to determine the allowed resource sources for loading.

[0071] S63. Generate the cross-site request forgery protection token for the target tenant, and verify the cross-site requests corresponding to the target tenant through the cross-site request forgery protection token.

[0072] S64. Use the preset encryption algorithm to encrypt and store and encrypt the transmission of the data of the target tenant.

[0073] For example, setting the list of allowed cross-origin sources and the whitelist of request methods and adding response headers can effectively protect against cross-origin requests, and financial websites can avoid illegal cross-origin data theft. Filtering and validating the input and output data and transferring special characters, and setting the content security policy response header can prevent malicious code injection. For example, medical systems can resist attacks through form input. Generating the cross-site request forgery protection token and verifying cross-site requests can resist CSRF (Cross-Site Request Forgery) attacks. For example, financial platforms can protect the security of user transactions.

[0074] As another optional implementation, the common resource data of the front-end tenant can also be cached through the server cache middleware (such as Redis, Memcached, etc.) to reduce the loading time and server pressure. After the execution of the hybrid mode rendering in the above step S5 is completed, the following steps S71 to S74 can also be included.

[0075] S71. Configure the preset server cache middleware, and set the storage method and expiration time policy of the server cache middleware.

[0076] S72. According to the role configuration data and permission configuration data, analyze the dynamically loaded micro-frontend modules and pre-stored front-end resources to obtain the frequently accessed front-end resources corresponding to the target tenant.

[0077] S73. Store the frequently accessed front-end resources in the server cache middleware, and set the unique cache key and cache time for each frequently accessed front-end resource.

[0078] S74. When a request for the target front-end resource is received, if the cache time of the target front-end resource has not expired, obtain the target front-end resource from the server cache middleware according to the storage method and the unique cache key, and return the target front-end resource to the request initiator.

[0079] For example, by using server cache middleware (such as Redis, Memcached) to cache common resources of front-end tenants, the system performance and stability can be improved. The financial wealth management platform configures Redis to cache the resources of the product details page, and the page loading speed is improved to reduce the pressure on the back end. The medical cloud platform uses Memcached to cache prescription templates and drug information, so that the response time is greatly shortened.

[0080] The front-end multi-tenant management method provided by the embodiments of this application ensures the security of sensitive data through an authentication mechanism based on tokens or third-party authorization. Role templates and permission templates generate configuration data and encrypt and store it to achieve precise isolation of resources between tenants. The micro-frontend architecture combines a dynamic loading mechanism to load modules on demand, reducing the initial loading time and improving resource utilization efficiency. The hybrid rendering mode optimizes the first-screen loading speed, and the server security middleware and encryption storage technology build a multi-level protection system. The load balancer combines cache middleware to achieve reasonable allocation of resources and fast response to high-frequency data in high-concurrency scenarios. The isolation configuration of the tenant running environment ensures the independence of different tenant resources and avoids mutual interference. The overall solution realizes high-performance, high-security, and easy-to-maintain front-end management in multi-tenant scenarios through modular design, dynamic expansion, and intelligent monitoring, and is applicable to diverse industry needs such as fintech and digital healthcare.

[0081] Please continue to refer to Figure 5 , Figure 5 which is the system structure diagram of the front-end multi-tenant management device provided by the embodiments of this application. As Figure 5 shown, the front-end multi-tenant management device 50 includes: a tenant registration monitoring module 51, a role and permission configuration module 52, a micro-frontend application creation module 53, a micro-frontend module loading module 54, and a hybrid mode rendering module 55.

[0082] The tenant registration monitoring module 51 is used to monitor the registration interface to receive tenant registration requests, and use an authentication mechanism based on tokens or third-party authorization to return a secure access token corresponding to the target tenant according to the tenant registration requests.

[0083] The role and permission configuration module 52 is used to generate the role configuration data and permission configuration data of the target tenant when the target tenant registration is successful.

[0084] The micro-frontend application creation module 53 is used to create the micro-frontend application of the target tenant and different micro-frontend modules according to the role configuration data and the permission configuration data using a preset micro-frontend architecture when the login interface monitors a successful login result using the secure access token.

[0085] The micro front-end module loading module 54 is used to start the micro front-end application and dynamically load the micro front-end module according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism.

[0086] The hybrid mode rendering module 55 is used to perform hybrid mode rendering of the micro front-end module on the server side and the tenant side using the dynamically loaded front-end resources through a pre-integrated front-end framework, so as to obtain the front-end rendered page of the target tenant.

[0087] As an optional implementation manner, the front-end multi-tenant management device 50 further includes a front-end tenant security module. The front-end tenant security module is used to configure a preset server security middleware, set a source list allowed for cross-domain access and a whitelist of request methods for the micro front-end application, and add response header information to protect cross-domain requests; filter and verify input data, transfer special characters for output data, and set a content security policy response header through the server security middleware to determine the allowed resource sources; generate a cross-site request forgery protection token for the target tenant, and verify the cross-site request corresponding to the target tenant through the cross-site request forgery protection token; encrypt and store and encrypt and transmit the data of the target tenant using a preset encryption algorithm.

[0088] As an optional implementation manner, the front-end multi-tenant management device 50 further includes a front-end tenant cache module. The front-end tenant cache module is used to configure a preset server cache middleware, and set the storage method and expiration time policy of the server cache middleware; analyze the dynamically loaded micro front-end module and pre-stored front-end resources according to the role configuration data and the permission configuration data to obtain the frequently accessed front-end resources corresponding to the target tenant; store the frequently accessed front-end resources in the server cache middleware, and set a unique cache key and a cache time for each frequently accessed front-end resource; when a request for a target front-end resource is received, if the cache time of the target front-end resource has not expired, obtain the target front-end resource from the server cache middleware according to the storage method and the unique cache key, and return the target front-end resource to the request initiator.

[0089] As an alternative implementation, the front-end multi-tenant management device 50 further includes a tenant load balancing module, which is used to match a corresponding load balancer according to the scale requirements and performance requirements of front-end multi-tenant management, configure the listening port, server list, and load balancing algorithm of the load balancer; register the network addresses and port information of the back-end servers in the server list to the load balancer; when receiving a multi-tenant request, send the multi-tenant request to the back-end servers in the server list through the load balancing algorithm; enable the monitoring function of the load balancer, collect and analyze the network data of request distribution and server load data in real time, and adjust the parameters of the load balancing algorithm according to the analysis results, as well as add or remove servers in the server list.

[0090] As an alternative implementation, the role and permission configuration module 52 is further specifically used to, when the target tenant is successfully registered, generate the role configuration data and the permission configuration data according to the pre-set tenant role template and tenant permission template; generate the association relationship data between the role configuration data and the permission configuration data and the unique identifier of the target tenant, and encrypt and store the association relationship data in the local storage of the tenant side and the database of the server side; create corresponding tenant front-end access control rules according to the role configuration data and the permission configuration data, and synchronize the tenant front-end access control rules to the local storage of the tenant side, where the tenant front-end access control rules define the visible elements and operable elements of tenants with different roles and permissions on the front-end page; regularly detect whether the association relationship data stored in the database of the server side has changed, and if it has changed, generate new tenant front-end access control rules according to the changed content data, and synchronously update the new tenant front-end access control rules to the local storage of the tenant side.

[0091] As an alternative implementation, the micro front-end module loading module 54 is further specifically used to extract the unique identifier of the target tenant from the login information, initialize the running environment of the micro front-end application according to the unique identifier, and set the isolation configuration of the running environment for different tenants through the unique identifier; generate a micro front-end module loading list adapted to different target tenants according to the role configuration data and the permission configuration data; allocate independent resource spaces for different target tenants according to the micro front-end module loading list, and load the front-end resources in the micro front-end loading list into the independent resource spaces; when the front-end component rendering is completed by obtaining the front-end resources from the corresponding independent resource space according to the micro front-end module loading list, create front-end event handling logics for different target tenants.

[0092] As an alternative implementation, the hybrid mode rendering module 55 is further specifically configured to add the server-side rendering dependency library and environment parameter configuration corresponding to the front-end framework, and optimize the server-side rendering configuration data of the front-end framework; before pre-rendering on the server side, obtain page-associated data by calling a back-end interface or querying a database, and inject the page-associated data into the front-end components of the front-end framework; when using the front-end components for pre-rendering, optimize the meta tags, page structure, and tag semantics of the pre-rendered page to improve the accessibility of the rendered page to search engines; send the pre-rendered page to the tenant side, and continue to render on the tenant side using the dynamically loaded front-end resources and the obtained page-associated data to obtain the front-end rendered page of the target tenant; compare the front-end cache data on the server side and the tenant side, and update the front-end cache data on the tenant side according to the comparison result data.

[0093] It should be noted that the above front-end multi-tenant management device can execute the front-end multi-tenant management method provided in the embodiments of the present application, and has the corresponding functional modules and beneficial effects for executing the method. For the technical details not described in detail in the embodiments of the front-end multi-tenant management device, reference can be made to the front-end multi-tenant management method provided in the embodiments of the present application.

[0094] Figure 6 is a schematic hardware structure diagram of an electronic device 600 for executing the front-end multi-tenant management method provided in the embodiments of the present application, as Figure 6 shown. The electronic device 600 includes:

[0095] One or more processors 610 and a memory 620, Figure 6 Taking one processor 610 as an example.

[0096] The processor 610 and the memory 620 can be connected through a bus or other means, Figure 6 Taking connection through a bus as an example.

[0097] The memory 620, as a non-volatile computer-readable storage medium, can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules, such as the program instructions / modules corresponding to the front-end multi-tenant management method in the embodiments of the present application. The processor 610 executes various functional applications and data processing of the server by running the non-volatile software programs, instructions, and modules stored in the memory 620, that is, implements the front-end multi-tenant management method in the above method embodiments.

[0098] The memory 620 may include a program storage area and a data storage area. The program storage area may store an operating system and application programs required for at least one function. The data storage area may store data created according to the use of the front-end multi-tenant management device, etc. In addition, the memory 620 may include high-speed random access memory and may also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other non-volatile solid-state storage devices. In some embodiments, the memory 620 may optionally include a memory remotely provided with respect to the processor 610, and these remote memories may be connected to the front-end multi-tenant management device through a network. Examples of the above network include but are not limited to the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0099] The one or more modules are stored in the memory 620 and, when executed by the one or more processors 610, execute the front-end multi-tenant management method in any of the above method embodiments. For example, execute the Figure 2 method steps S1 to S5 in the above description, Figure 3 method steps S21 to S25 in the above description, Figure 4 method steps S51 to S55 in the above description, and implement Figure 4 the functions of modules 51-55 in the above description.

[0100] The above product can execute the method provided in the embodiments of the present application and has the corresponding functional modules and beneficial effects of the executed method. For technical details not described in detail in this embodiment, reference may be made to the method provided in the embodiments of the present application.

[0101] The embodiments of the present application provide a non-volatile computer-readable storage medium storing computer-executable instructions, and when the computer-executable instructions are executed by one or more processors, for example Figure 6 by one of the processors 610 in the above description, the one or more processors can be enabled to execute the front-end multi-tenant management method in any of the above method embodiments. For example, execute the Figure 2 method steps S1 to S5 in the above description, Figure 3 method steps S21 to S25 in the above description, Figure 4 method steps S51 to S55 in the above description, and implement Figure 4 the functions of modules 51-55 in the above description.

[0102] An embodiment of the present application provides a computer program product. The computer program product includes a computer program stored on a non-volatile computer-readable storage medium. The computer program includes program instructions. When the program instructions are executed by the electronic device, the electronic device is enabled to execute the front-end multi-tenant management method in any of the above method embodiments. For example, execute the Figure 2 method steps S1 to S5 in Figure 3 method steps S21 to S25 in Figure 4 method steps S51 to S55 in Figure 4 to implement the functions of modules 51-55 in

[0103] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated. The components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0104] Through the description of the above embodiments, those of ordinary skill in the art can clearly understand that each embodiment can be implemented by means of software plus a general hardware platform, and of course also by hardware. Those of ordinary skill in the art can understand that all or part of the processes of implementing the methods in the above embodiments can be completed by instructing relevant hardware through a computer program. The program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM), etc.

[0105] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, not to limit them; under the idea of the present application, the technical features in the above embodiments or different embodiments can also be combined, and the steps can be implemented in any order, and there are many other changes in different aspects of the present application as described above. For the sake of brevity, they are not provided in detail; although the present application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements on some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A front-end multi-tenant management method, characterized in that Including: Listening to the registration interface to receive tenant registration requests, and using an authentication mechanism based on tokens or third-party authorization to return a security access token corresponding to the target tenant according to the tenant registration requests; When the registration of the target tenant is successful, generating role configuration data and permission configuration data for the target tenant; When the login interface listens for a successful login result using the security access token, creating a micro front-end application and different micro front-end modules for the target tenant according to the role configuration data and the permission configuration data using a preset micro front-end architecture; Starting the micro front-end application, and dynamically loading the micro front-end modules according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism; Performing hybrid-mode rendering of the micro front-end modules on the server side and the tenant side using the dynamically loaded front-end resources through a pre-integrated front-end framework to obtain a front-end rendered page for the target tenant.

2. The front-end multi-tenant management method according to claim 1, wherein After the step of dynamically loading the micro front-end modules according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism, it further includes: Configuring a preset server security middleware, setting a source list allowed for cross-domain access and a whitelist of request methods for the micro front-end application, and adding response header information to protect against cross-domain requests; Filtering and validating input data, performing special character transfer on output data, and setting a content security policy response header through the server security middleware to determine the allowed resource sources for loading; Generating a cross-site request forgery protection token for the target tenant, and verifying cross-site requests corresponding to the target tenant through the cross-site request forgery protection token; Using a preset encryption algorithm to encrypt and store and encrypt and transmit the data of the target tenant.

3. The front-end multi-tenant management method according to claim 1, wherein After the step of dynamically loading the micro front-end modules according to the role configuration data and the permission configuration data through a preset front-end resource dynamic loading mechanism, it further includes: Configuring a preset server cache middleware, and setting the storage method and expiration time policy of the server cache middleware; Analyzing the dynamically loaded micro front-end modules and pre-stored front-end resources according to the role configuration data and the permission configuration data to obtain high-frequency accessed front-end resources corresponding to the target tenant; Storing the high-frequency accessed front-end resources in the server cache middleware, and setting a unique cache key and a cache time for each high-frequency accessed front-end resource; When a request for a target front-end resource is received, if the cache time of the target front-end resource has not expired, obtaining the target front-end resource from the server cache middleware according to the storage method and the unique cache key, and returning the target front-end resource to the request initiator.

4. The front-end multi-tenant management method according to claim 1, wherein Before the step of listening to the registration interface to receive tenant registration requests, and using an authentication mechanism based on tokens or third-party authorization to return a security access token corresponding to the target tenant according to the tenant registration requests, it further includes: Matching a corresponding load balancer according to the scale requirements and performance requirements of front-end multi-tenant management, and configuring the listening port, server list, and load balancing algorithm of the load balancer; Register the network addresses and port information of the backend servers in the server list to the load balancer; When receiving a multi-tenant request, send the multi-tenant request to the backend servers in the server list through the load balancing algorithm; Enable the monitoring function of the load balancer, collect and analyze network data of request distribution and server load data in real time, and adjust the parameters of the load balancing algorithm according to the analysis results, as well as add or remove servers in the server list.

5. The front-end multi-tenant management method according to claim 1, characterized in that The step of generating role configuration data and permission configuration data for the target tenant when the target tenant registers successfully includes: When the target tenant registers successfully, generate the role configuration data and the permission configuration data according to the pre-set tenant role template and tenant permission template; Generate association relationship data between the role configuration data and the permission configuration data and the unique identifier of the target tenant, and encrypt and store the association relationship data in the local storage of the tenant side and the database of the server side; Create corresponding tenant front-end access control rules according to the role configuration data and permission configuration data, and synchronize the tenant front-end access control rules to the local storage of the tenant side, where the tenant front-end access control rules define visible elements and operable elements of tenants with different roles and permissions on the front-end page; Regularly detect whether the association relationship data stored in the database of the server side has changed. If it has changed, generate new tenant front-end access control rules according to the changed content data, and synchronize and update the new tenant front-end access control rules to the local storage of the tenant side.

6. The front-end multi-tenant management method according to claim 1, characterized in that The step of starting the micro front-end application and dynamically loading the micro front-end module according to the role configuration data and the permission configuration data through the preset front-end resource dynamic loading mechanism includes: Extract the unique identifier of the target tenant from the login information, initialize the running environment of the micro front-end application according to the unique identifier, and set the isolation configuration of the running environment of different tenants through the unique identifier; Generate a micro front-end module loading list adapted to different target tenants according to the role configuration data and the permission configuration data; According to the micro front-end module loading list, allocate independent resource spaces for different target tenants, and load the front-end resources in the micro front-end loading list into the independent resource spaces; After the front-end components are rendered by obtaining the front-end resources from the corresponding independent resource space according to the micro front-end module loading list, create front-end event handling logics for different target tenants.

7. The front-end multi-tenant management method according to claim 1, characterized in that The step of performing hybrid-mode rendering of the micro front-end module on the server side and the tenant side using the dynamically loaded front-end resources through the pre-integrated front-end framework includes: Add the server-side rendering dependency library and environment parameter configuration corresponding to the front-end framework, and optimize the server-side rendering configuration data of the front-end framework; Before pre-rendering on the server side, obtain page association data by calling a backend interface or querying a database, and inject the page association data into the front-end components of the front-end framework; When using the front - end component for pre - rendering, optimize the meta - tags, page structure, and tag semantics of the pre - rendered page to improve the search - engine accessibility of the rendered page; Send the pre - rendered page to the tenant side, and continue to render it on the tenant side using the dynamically loaded front - end resources and the obtained page - related data to obtain the front - end rendered page of the target tenant; Compare the front - end cache data on the server side and the tenant side, and update the front - end cache data on the tenant side according to the comparison result data.

8. A front-end multi-tenant management device, characterized in that, It includes: A tenant registration monitoring module, which is used to monitor the registration interface to receive tenant registration requests, and use an authentication mechanism based on tokens or third - party authorization to return the security access token corresponding to the target tenant according to the tenant registration requests; A role - permission configuration module, which is used to generate the role configuration data and permission configuration data of the target tenant when the target tenant registration is successful; A micro - front - end application creation module, which is used to create the micro - front - end application of the target tenant and different micro - front - end modules according to the role configuration data and the permission configuration data using a preset micro - front - end architecture when the login interface monitors a successful login result using the security access token; A micro - front - end module loading module, which is used to start the micro - front - end application and dynamically load the micro - front - end modules according to the role configuration data and the permission configuration data through a preset front - end resource dynamic loading mechanism; A hybrid - mode rendering module, which is used to perform hybrid - mode rendering of the micro - front - end modules on the server side and the tenant side using the dynamically loaded front - end resources through a pre - integrated front - end framework to obtain the front - end rendered page of the target tenant.

9. An electronic device, characterized in that, It 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, and the instructions are executed by the at least one processor so that the at least one processor can execute the front - end multi - tenant management method according to any one of claims 1 - 7.

10. A non-volatile computer-readable storage medium, characterized in that, The non - volatile computer - readable storage medium stores computer - executable instructions, and when the computer - executable instructions are executed by an electronic device, the electronic device executes the front - end multi - tenant management method according to any one of claims 1 - 7.

Images