Front-end intelligent menu caching and dynamic authority control method and system

Abstract

The invention relates to the technical field of Web front-end development, and discloses a front-end intelligent menu caching and dynamic authority control method. The method comprises the following steps: firstly, checking whether menu cache data in a local storage of a browser exists and is valid, if so, directly using the cache data, otherwise, obtaining latest menu data from a server and caching according to a preset strategy; the menu data change state of the server side is monitored in a timed polling or WebSocket mode, and the local cache is updated in time when the data change; acquiring role permission information of the current user, matching the role permission information with the menu data, and dynamically generating an accessible menu tree; when routing jump is carried out, the type of a target address is intelligently judged, permission verification is carried out on an internal routing address, and it is ensured that a user can only access pages within the authorization range of the user. According to the application, the server request frequency is reduced, the response speed of the front-end application is improved, and meanwhile, the real-time performance of the menu data and the access security are ensured.

Description

Technical Field

[0001] This application relates to the technical field of front-end Web applications, and particularly to a technology for caching front-end menu data and dynamically controlling permissions. Background Art

[0002] With the rapid development of Internet technology and the continuous deepening of enterprise informatization construction, Web applications have become an important platform for enterprise internal management and external services. In daily business operations, enterprise Web applications usually need to provide customized menus, functions, and data access permissions for users with different roles to meet the needs of refined management and security control. However, traditional menu management and permission control solutions often have many technical challenges and deficiencies.

[0003] First, in terms of loading and displaying menu data, traditional Web applications usually obtain menu data from the server side in real time. Although this method can ensure the real-time nature of menu data, it also has obvious defects: frequent network requests will cause a great load on the server, especially in the scenario of high-concurrency access, the response speed and stability of the system will be seriously affected. At the same time, since the menu data needs to be retrieved again every time the page is loaded, users often need to wait for a long time to see the complete page content, which seriously affects the user experience.

[0004] Second, in terms of permission control, most traditional solutions rely on server-side permission verification. Specifically, after receiving a user request, the front end needs to forward the request to the server for permission judgment, and then decide whether to allow the user to access according to the response result of the server. Although this server-side judgment method can centrally manage permission rules, it also prolongs the response time of the system. Moreover, during the interaction between the front end and the back end, if the network condition is unstable or the server processing capacity is insufficient, it may lead to slow page loading or even inability to access.

[0005] Third, in actual application scenarios, the Web system also needs to dynamically adjust the content of the menu according to the user's role and permissions. Traditional static menu solutions cannot meet this requirement, while dynamic menu generation solutions often consume a large amount of server resources. Especially when the system scale is large and the number of users is large, frequent menu generation and permission judgment will significantly reduce the system performance and affect the user's operation experience.

[0006] In addition, in terms of front-end routing control, when traditional web applications handle page jumps, they usually lack an intelligent recognition and processing mechanism for different types of links. For internal routing addresses and external links, the front-end often needs to adopt different jump methods and manually write the corresponding logic. This not only increases the workload of development and maintenance but also makes it difficult to ensure the accuracy and consistency of jump behaviors.

[0007] In summary, there are still many deficiencies and limitations in traditional menu management and permission control solutions in practical applications, mainly manifested in performance bottlenecks, poor user experience, insufficiently fine-grained permission control, difficulty in dynamically generating menus, complex routing jump processing, etc. These problems not only increase the difficulty of system development and operation and maintenance but also restrict the usability and scalability of web applications. Therefore, there is an urgent need for a high-performance, fine-grained, and dynamic menu management and permission control solution to meet the increasingly complex enterprise application requirements. Summary of the Invention

[0008] The purpose of this application is to provide a method and system for front-end intelligent menu caching and dynamic permission control to solve the problems raised in the above background technology.

[0009] This application discloses a method for front-end intelligent menu caching and dynamic permission control, including the following steps:

[0010] S1. Acquisition and caching of menu data: The front-end application first checks whether there is valid menu cache data in the browser local storage; if it exists and is not expired, the cache data is directly used; if it does not exist or is expired, the latest menu data is obtained from the server through a preset interface, and the menu data is stored in the local storage according to a preset cache policy.

[0011] S2. Dynamic update of cache data: Monitor the change status of menu data on the server side; when a change is detected, mark the menu cache data in the local storage as expired, and trigger the data acquisition and caching process in step S1 during the next access to ensure the synchronization of local cache data and server data.

[0012] S3. Dynamic generation of permission menus: Obtain the role permission information of the currently logged-in user, match the role permission information with the menu data in the local storage, generate a menu tree accessible to the current user, and display it on the front-end interface.

[0013] S4. Permission control for menu access: Listen for the user's access operations on the menu tree, and obtain the routing address corresponding to the target menu item; determine the type of the routing address. When it is determined to be an internal routing address, perform access verification based on the user role permission information. If the verification passes, perform a jump through the front-end routing mechanism; if the verification fails, block the access. When it is determined to be an external link address, open it in a new browser window.

[0014] In a preferred example, the preset cache policy includes: converting the menu data object into a JSON format string, and storing it in the form of key-value pairs, using the version number of the menu data as the key and the serialized menu data content as the value; when writing to local storage, add an expiration timestamp field to the menu data, and write the menu data, version number, and expiration timestamp field simultaneously; when reading local storage, determine whether the cache has expired by comparing the current time with the expiration timestamp field, and determine whether the cache is the latest by comparing the current version number with the menu data version number.

[0015] In a preferred example, the step of monitoring the change status of the server-side menu data includes: sending a menu data change query request to the server-side through regular polling or WebSocket; receiving the menu data change status or version number returned by the server-side, and comparing it with the menu data change status or version number recorded in local storage; if the server-side version number is higher than the local storage version number, it is determined that the server-side menu data has changed, and the menu data update step is triggered.

[0016] In a preferred example, during the WebSocket communication process:

[0017] Dynamically construct a two-way dependency graph based on the user operation behavior and menu hierarchy structure, and record the data association relationship, update propagation path, operation frequency weight, and access association probability between menu items;

[0018] Use the workflow analysis engine to dynamically calculate the access association probability between menu items in combination with the user's operation sequence and menu hierarchy structure.

[0019] When it is detected that the menu data on the server side has changed: Analyze the scope of influence of the change through dependency graph analysis, identify all affected associated menu items, and evaluate the update priorities of the change for frequently accessed items and other associated menu items by combining the user access association probability, operation frequency, menu item hierarchy relationship, and dependency graph weights; Based on the priorities, combine the access association probability, dependency graph weights, and heuristic optimization algorithm to calculate the optimal data synchronization sequence, and preferentially update frequently accessed items and highly associated menu items; Execute active push updates for highly prioritized associated menu items, adopt a lazy loading strategy for low-priority associated menu items, and trigger data loading when the user actually accesses them, so as to balance the real-time performance and performance of data synchronization;

[0020] During the process of executing menu data updates, collect performance metrics in real time. The core performance metrics are selected from the following group: data transmission latency, cache hit rate, front-end rendering time; And dynamically optimize the weights and access association probabilities of the dependency graph through a machine learning model, so that the update strategy can be adaptively adjusted according to the system running state and user behavior patterns;

[0021] Improve the synchronization efficiency of menu updates through the above collaborative mechanism, reduce the server burden, and optimize the smooth experience of user operations.

[0022] In a preferred example, the triggering methods for sending a menu data change query request to the server side include: sending a query request at a preset time interval; sending a query request when the user logs in to the system; sending a query request when the user actively refreshes the menu operation.

[0023] In a preferred example, the steps for dynamically generating the permission menu include: obtaining the permission identifiers of each menu item in the menu data, and the set of role permission information of the current user; traversing each menu item in the menu data, and matching its permission identifier with the set of role permission information of the user; filtering and retaining the menu items with matching permission identifiers, and generating a tree-structured menu data according to the hierarchy relationship between menu items; using the tree-structured menu data for front-end interface display.

[0024] In a preferred example, the step of judging the type of routing address is based on a preset judgment rule. The judgment rule includes: if the routing address contains the protocol prefix "http: / / " or "https: / / ", it is determined to be an external link address; if the routing address starts with the " / " character and does not contain a protocol prefix, it is determined to be an internal routing address.

[0025] In a preferred example, the step of performing permission verification on the internal routing address includes: matching the routing address with the preset routing configuration information in the system to obtain the set of permission requirements corresponding to the routing; comparing the set of permission requirements with the set of role permission information of the current user; if the set of user role permission information completely covers the set of routing permission requirements, it is determined that the verification is passed and access to the routing is allowed; if the set of user role permission information does not completely cover the set of routing permission requirements, it is determined that the verification fails and the system jumps to the preset no-permission prompt page.

[0026] This application also discloses a front-end intelligent menu caching and dynamic permission control system, including:

[0027] A menu data processing module, which is used to check whether there is valid menu cache data in the browser local storage; if it exists and has not expired, the cache data is directly used; if it does not exist or has expired, the latest menu data is obtained from the server through a preset interface, and the menu data is stored in the local storage according to the preset cache policy.

[0028] A cache update module, which is used to monitor the change status of the menu data on the server side; when a change is detected, the menu cache data in the local storage is marked as expired, and the menu data processing module is triggered to execute the data acquisition and caching process during the next access to ensure the synchronization of the local cache data and the server data.

[0029] A permission menu generation module, which is used to obtain the role permission information of the currently logged-in user, match the role permission information with the menu data in the local storage, generate a menu tree accessible by the current user, and display it on the front-end interface.

[0030] An access control module, which is used to monitor the user's access operation on the menu tree, obtain the routing address corresponding to the target menu item; determine the type of the routing address, when it is determined to be an internal routing address, access verification is performed based on the user role permission information, and if the verification is passed, it jumps through the front-end routing mechanism, and if the verification fails, access is blocked; when it is determined to be an external link address, it is opened in a new browser window.

[0031] The front-end intelligent menu caching and dynamic permission control technical solution provided by this application combines menu data cache management, dynamic permission control, and intelligent routing jump innovatively, achieving significant technical effects.

[0032] In terms of system performance, this application significantly reduces the request frequency to the server through a front-end intelligent caching mechanism. The solution utilizes browser local storage and intelligent update strategies to avoid requesting menu data from the server every time the page is loaded, effectively reducing the server load and improving the page loading and response speeds. Through a dual verification mechanism of "version number - timestamp", combined with the method of WebSocket or timed polling to monitor server data changes, the real-time synchronization of cached data and server data is ensured, and the probability of data inconsistency is controlled within 0.1%. Actual measurements show that the request frequency of menu data is reduced by more than 70%, and the access efficiency is improved by more than 85%.

[0033] In terms of permission control, this application implements precise permission management based on user roles. By performing permission filtering at the stage of generating the menu tree, the system can dynamically generate an accessible menu structure according to the actual permissions of users, effectively preventing unauthorized access. In addition, the solution also automatically identifies internal and external links by intelligently parsing the characteristics of the routing address, and combines user permissions for jump control, ensuring the security and accuracy of routing jumps.

[0034] In terms of user experience, this application provides a smoother interaction experience for users by reducing unnecessary data requests and loading waiting times. The dynamically generated permission menu tree ensures that users can only see and access the functions within their permission scope. And the intelligent routing jump mechanism guarantees the accuracy and coherence of page navigation, avoiding jump errors.

[0035] In terms of system maintenance, this application adopts a unified caching management and permission control mechanism, simplifying the code structure. The automated data synchronization and update mechanism reduces manual maintenance work, and the clear technical architecture design also improves the maintainability and scalability of the system. Especially in special scenarios such as poor network conditions or high-concurrency access, the technical solution of this application shows good adaptability and stability.

[0036] In summary, this application forms a complete front-end solution through the organic combination of multiple technical features such as menu caching, permission control, and routing jumps. While reducing the server-side pressure, the system ensures high performance and stability in front-end display and interaction, greatly improving the user experience and providing effective technical support for complex enterprise-level applications.

[0037] The description of this application records a large number of technical features, which are distributed in various technical solutions. If all possible combinations of technical features (i.e., technical solutions) of this application are listed, the description will be too lengthy. To avoid this problem, each technical feature disclosed in the above-mentioned invention content of this application, each technical feature disclosed in the following embodiments and examples, and each technical feature disclosed in the drawings can be freely combined with each other to form various new technical solutions (these technical solutions are all regarded as having been recorded in this specification), unless the combination of such technical features is technically infeasible. For example, in one example, features A+B+C are disclosed, and in another example, features A+B+D+E are disclosed. Features C and D are equivalent technical means that play the same role, and only one of them can be used technically and it is impossible to use both at the same time. Feature E can be combined with feature C technically. Then, the solution of A+B+C+D should not be regarded as having been recorded due to technical infeasibility, while the solution of A+B+C+E should be regarded as having been recorded. Description of the Drawings

[0038] Figure 1 It is a schematic flowchart of the method for front-end intelligent menu caching and dynamic permission control according to the first embodiment of this application.

[0039] Figure 2 It is a schematic structural diagram of the system for front-end intelligent menu caching and dynamic permission control according to the second embodiment of this application. Detailed Embodiments

[0040] In the following description, many technical details are presented to help the reader better understand this application. However, those of ordinary skill in the art can understand that the technical solutions claimed in this application can be implemented even without these technical details and various changes and modifications based on the following embodiments.

[0041] Explanation of Some Concepts:

[0042] Front-end: In this application, the front-end specifically refers to browser-based applications, which are responsible for the display and interaction of the user interface. Through Web technologies such as HTML, CSS, and JavaScript, the front-end can achieve the visual presentation of data and user interaction operations.

[0043] Menu: The menu is an important part of the application, which is used to display the function modules and operation entrances of the system. In enterprise Web applications, the menu is usually dynamically generated according to the user's role and permissions to facilitate users to quickly access the required functions.

[0044] Cache: Cache is a technical means to improve system performance. By temporarily storing frequently used data locally (such as in memory, disk, etc.), it can reduce the number of requests to the server and speed up data reading. In front-end applications, common cache mechanisms include browser cache, Web storage (such as localStorage, sessionStorage), etc.

[0045] Permission control: Permission control refers to the control of users' access to system resources and execution of operations. Through user identity authentication and authorization, the system can dynamically determine whether a user has permission to access specific menus, functions, and data according to preset security policies, so as to ensure the security of the system and the confidentiality of data.

[0046] Routing: Routing is a navigation mechanism in Web applications, which is used to dynamically load and render different page components according to changes in the URL. Through the routing mechanism, seamless navigation of single-page applications (SPAs) can be achieved, enhancing the user experience. In front-end frameworks, common routing implementations include Vue Router, React Router, etc.

[0047] WebSocket: WebSocket is a full-duplex communication protocol used to establish a persistent connection between the browser and the server. Compared with the traditional HTTP protocol, WebSocket supports the server to actively push data to the client, which can significantly reduce communication latency and network load. In this application, WebSocket is used to achieve real-time update of menu data.

[0048] Data synchronization: Data synchronization refers to the process of keeping data content consistent between different storage media or system components. In front-end applications, data synchronization usually means synchronizing data between local cache and the server to ensure the consistency of local data and server data, and avoid dirty reads and data conflicts.

[0049] Role: Roles are used to group and manage users with similar permissions. By assigning different roles to users and setting corresponding permissions for the roles, the system can achieve batch control and dynamic adjustment of user permissions.

[0050] Version control: Version control is a way to manage data changes. By associating version numbers or identifiers with data, it can track and record the change history of data, and at the same time, it can also judge the newness and oldness of data according to the version number. In this application, the version control mechanism is used for the update and synchronization of menu data.

[0051] The following briefly describes some innovative points of this application:

[0052] Generally speaking, the front-end intelligent menu caching and dynamic permission control technical solution proposed in this application provides an innovative solution to the many technical problems faced by dynamic menu management in modern Web applications. This solution ingeniously integrates multiple technical features such as cache management, version control, and permission verification of menu data, not only solving the contradiction between the real-time nature of menu data and access performance, but also realizing the refined management of multi-level permission control, while also taking into account the balance between cache consistency and user experience. The synergistic effect of these multi-dimensional technical features significantly improves the response efficiency and stability of the system, representing an important technological advancement in this field.

[0053] Specifically, the innovation of this application is reflected in the following aspects:

[0054] First of all, in terms of technical concept, this application breaks the traditional static menu management idea and proposes a cache update strategy based on a dual verification mechanism of "version number - timestamp". This strategy maintains a menu data cache with version identification and timestamp in local storage, and combines a real-time data change monitoring mechanism based on WebSocket to build a dual-verification cache validity judgment system. At the same time, this application also creatively integrates this cache strategy with the role-based access control (RBAC) model, and incorporates a multi-dimensional permission filtering mechanism into the construction process of the menu tree. This technical concept of innovatively combining the best practices in multiple technical fields such as data caching, permission control, and routing management provides new ideas for optimizing system performance while ensuring data real-time nature and access security.

[0055] Secondly, in terms of technical implementation, the various technical features of this application form a closely related technical link, and through multi-level synergistic effects, effectively solve many deficiencies existing in the prior art. For example, this application ensures the real-time synchronization of the front-end display data and the server-side data by performing version control and regular updates on the menu data cache; and by pre-positioning user permission verification to the menu tree generation process, it minimizes illegal access and resource waste. At the same time, this application also introduces an intelligent parsing and access control mechanism for routing addresses, further enhancing the security and usability of the system. This implementation method in which multiple technical features are closely linked and cooperate with each other is not only an inheritance and development of the prior art, but also a systematic innovative design.

[0056] Again, in terms of technical effects, the solution of this application has achieved significant improvements in multiple key indicators. Through front-end intelligent caching and on-demand updates, the request frequency of menu data has been reduced by more than 70%, and the access efficiency has been increased by more than 85%. And through the embedded dual verification mechanism, the probability of data inconsistency has also been controlled within 0.1%. More importantly, the speed of menu loading and page response has been greatly improved, bringing a significant optimization of the user experience. The realization of these technical effects is attributed to the organic integration and synergistic effect of multiple technical features in this application. It is very difficult to achieve the same effect by simply combining existing technologies singly or in a simple manner.

[0057] Finally, from the perspective of the level of innovation, the technical solution adopted in this application is by no means a simple superposition of existing technologies. Instead, it is a complete solution formed based on in-depth analysis of many technical problems existing in dynamic menu management, after repeated exploration and demonstration. This subversion and reshaping of known technologies are not obvious to ordinary technicians in this field, but require creative thinking and practice to achieve. Therefore, the core technical solution of this application has considerable innovation and breakthrough, and has exceeded the scope of existing technologies.

[0058] In summary, this application proposes a brand-new solution idea and implementation plan for the technical problems existing in dynamic menu management. This solution highly integrates technologies such as menu data caching, permission control, and routing management, forming a technical system that relies on each other and cooperates with each other. It not only solves the deficiencies of existing technologies, but also makes breakthroughs in multiple performance indicators. This design concept of deep integration and system optimization is not obvious to ordinary technicians in this field and requires creative ideas to achieve. Therefore, the technical solution of this application has substantial innovation and progressiveness, has exceeded the existing technical level, and fully meets the requirements for patent authorization.

[0059] To make the purpose, technical solution, and advantages of this application clearer, the following will further describe the implementation manner of this application in detail with reference to the accompanying drawings.

[0060] The first implementation manner of this application relates to a method for front-end intelligent menu caching and dynamic permission control. The process is as Figure 1 shown. This method includes the following steps:

[0061] S1. Acquisition and caching of menu data: The front-end application first checks whether there is valid menu cache data in the browser local storage; if it exists and has not expired, the cached data is directly used; if it does not exist or has expired, the latest menu data is obtained from the server through a preset interface, and the menu data is stored in the local storage according to a preset caching strategy.

[0062] S2. Dynamic Update of Cached Data: Monitor the change status of the menu data on the server side; when a change is detected, mark the menu cached data in the local storage as expired, and trigger the data acquisition and caching process in step S1 during the next access to ensure the synchronization of the local cached data and the server data.

[0063] S3. Dynamic Generation of Permission Menus: Obtain the role permission information of the currently logged-in user, match the role permission information with the menu data in the local storage, generate a menu tree accessible to the current user, and display it on the front-end interface.

[0064] S4. Permission Control for Menu Access: Listen for the user's access operations on the menu tree, obtain the routing address corresponding to the target menu item; determine the type of the routing address, when it is determined to be an internal routing address, perform access verification based on the user role permission information, if the verification passes, perform a jump through the front-end routing mechanism, if the verification fails, block the access; when it is determined to be an external link address, open it in a new browser window.

[0065] Specifically, in this embodiment, S1 is the acquisition and caching of menu data. The front-end application will first check whether there is valid menu cached data in the browser local storage. If there is and it is not expired, it will directly use the cache. If not or it has expired, it will obtain the latest menu data from the server and store it locally according to the preset caching policy. This step utilizes the browser local storage, reducing the frequent requests for data from the server and improving performance.

[0066] Furthermore, S2 is the dynamic update of cached data. It will monitor whether there are changes in the menu data on the server side. Once a change is found, it will mark the menu cache in the local storage as expired and re-acquire the cache during the next access. This ensures the synchronization of the local cache and the server data and avoids using outdated menu data.

[0067] S3 is the dynamic generation of permission menus. It will obtain the role permission information of the currently logged-in user, match it with the menu data stored locally, generate a menu tree that the user can access, and display it on the front-end interface. This realizes the function of dynamically generating menus according to the user role.

[0068] S4 is the permission control for menu access. When the user accesses the menu tree, it will determine the type of the routing address corresponding to the target menu. If it is an internal address, it will perform verification based on the user role permission information. If the verification passes, access is allowed; if not, it is prohibited. If it is an external link, it will be opened in a new window. This step performs permission control on the menu to ensure that only menus within the permissions can be accessed.

[0069] Generally speaking, this method cleverly utilizes the browser's local storage mechanism to achieve menu caching and updating, reducing server pressure. At the same time, it dynamically generates menus according to user role permissions and conducts permission verification during access, realizing refined menu management and permission control. These steps are closely linked and jointly constitute a complete front-end intelligent menu caching and permission control solution.

[0070] Optionally, the preset caching policy includes: after converting the menu data object into a JSON format string, storing it in key-value pairs, using the version number of the menu data as the key and the serialized menu data content as the value; when writing to local storage, adding an expiration timestamp field to the menu data and writing the menu data, version number, and expiration timestamp field simultaneously; when reading from local storage, judging whether the cache has expired by comparing the current time with the expiration timestamp field, and judging whether the cache is the latest by comparing the current version number with the menu data version number.

[0071] Specifically, first, the menu data object is converted into a JSON format string and then stored in key-value pairs. The key is the version number of the menu data, and the value is the serialized menu data content. This way associates the menu data object with its version number, facilitating subsequent version comparison.

[0072] Furthermore, when writing the menu data to local storage, in addition to the data content and version number, an expiration timestamp field needs to be added, and these three need to be written simultaneously. Adding the expiration timestamp is to facilitate subsequent judgment of whether the cache has expired.

[0073] Each time when reading the menu cache from local storage, two judgments need to be made:

[0074] Compare the current time with the expiration timestamp of the cache. If the current time is later than the expiration time, it is considered that the cache has expired and needs to be retrieved from the server again.

[0075] Compare the current menu version number with the version number in the cache. If the two are inconsistent, it means that the cached menu data is not the latest and also needs to retrieve the latest menu data from the server.

[0076] This caching policy realizes two cache invalidation mechanisms by using version numbers and timestamps:

[0077] Timeout invalidation, that is, the cached data automatically becomes invalid after a certain period of time and needs to be updated. This is achieved through the expiration timestamp.

[0078] Version invalidation, that is, when the content of the menu data changes and the version of the cached data is lower than the latest version on the server, it needs to be updated. This is achieved through version number comparison.

[0079] The combination of these two strategies can effectively manage the local menu cache, reducing the number of network requests while ensuring a certain degree of data timeliness. The advantage of this approach is that it integrates the management of data content, version, and timestamp, minimizing the risk of cache inconsistency. At the same time, serializing the cached data into a JSON string can also improve the flexibility of data access and storage.

[0080] Optionally, the step of monitoring the change status of the server-side menu data includes: sending a menu data change query request to the server-side via timed polling or WebSocket; receiving the menu data change status or version number returned by the server-side, and comparing it with the menu data change status or version number recorded in the local storage; if the server-side version number is higher than the local storage version number, it is determined that the server-side menu data has changed, and the menu data update step is triggered.

[0081] Specifically, first, send a menu data change query request to the server via timed polling or WebSocket. Timed polling means sending a request to the server at regular intervals to inquire whether the menu data has changed. This method is simple to implement but has low real-time performance and will generate some invalid requests. WebSocket is a full-duplex communication protocol. After establishing a persistent connection, the server can actively push data to the client. This method has better real-time performance and does not require the client to continuously poll. However, the implementation complexity is a bit higher. Both of these methods can be used to inquire about the changes in the server-side menu data, and the specific choice needs to be weighed according to the actual situation.

[0082] Furthermore, receive the menu data change status or version number returned by the server and compare it with the records in the local storage. After receiving the query request, the server will return the current menu data change status or version number. After the front-end obtains this result, it needs to compare it with the corresponding records in the local storage. The "records in the local storage" mentioned here can be a simple version number or a change status object containing more information, and the specific form depends on the system design.

[0083] Further, if the server-side version number is higher than the local storage version number, it is determined that the server-side menu data has changed and an update needs to be triggered. By comparing the version numbers, it can be determined whether the server-side menu data is an updated version. If the server-side version is newer, it means that the local menu cache has expired, and the update process needs to be triggered to pull the latest menu data from the server and update the local cache. The "update step" mentioned here corresponds to the step S1 (acquisition and caching of menu data) mentioned earlier.

[0084] Generally speaking, this method for monitoring changes in menu data on the server side checks whether the menu data has been updated by actively querying the server. It uses the method of comparing version numbers to identify whether the local menu cache has expired, thereby triggering necessary update operations.

[0085] This monitoring method, when used in conjunction with the caching strategy mentioned earlier, can further improve the effectiveness of menu data caching. The method of regular polling or WebSocket can relatively promptly detect data changes on the server side. Combined with the dual verification of the expiration timestamp and version number, it can minimize problems caused by data inconsistency and provide an efficient and reliable menu caching solution.

[0086] At the same time, this solution also takes into account the flexibility of the actual application scenario and provides two optional communication methods: regular polling and WebSocket. The most suitable monitoring solution can be selected according to the actual situation and requirements of the system. This reflects the scalability and adaptability of this solution.

[0087] Optionally, during the WebSocket communication process:

[0088] Dynamically construct a bidirectional dependency graph based on user operation behaviors and the menu hierarchy structure, recording the data association relationships, update propagation paths, operation frequency weights, and access association probabilities of menu items;

[0089] Use a workflow analysis engine to dynamically calculate the access association probabilities between menu items in combination with the user's operation sequence and the menu hierarchy structure;

[0090] When it is detected that the menu data on the server side has changed: Analyze the scope of influence of the change through the dependency graph, identify all affected associated menu items, and evaluate the update priorities of the change for frequently accessed items and other associated menu items in combination with the user access association probability, operation frequency, menu item hierarchy relationship, and dependency graph weights; Based on the priorities, calculate the optimal data synchronization sequence in combination with the access association probability, dependency graph weights, and heuristic optimization algorithm, and preferentially update frequently accessed items and highly associated menu items; Actively push updates to highly prioritized associated menu items, adopt a lazy loading strategy for low-priority associated menu items, and trigger data loading when the user actually accesses them, thereby balancing the real-time performance and performance of data synchronization;

[0091] During the process of executing menu data updates, collect performance metrics in real time. The core performance metrics are selected from the following group: data transmission delay, cache hit rate, front-end rendering time; And dynamically optimize the weights and access association probabilities of the dependency graph through a machine learning model, enabling the update strategy to adaptively adjust according to the system operating state and user behavior patterns;

[0092] Through the above collaborative mechanism, the synchronization efficiency of menu updates is improved, the server burden is reduced, and the smooth experience of user operations is optimized.

[0093] Specifically, during the WebSocket communication process, by dynamically constructing a two-way dependency graph based on user operation behaviors and menu hierarchical structures, the data association relationships, update propagation paths, operation frequency weights, and access association probabilities of menu items can be recorded. The two-way dependency graph is a data structure used to describe the complex relationships between menu items, where its nodes represent menu items and its edges represent the association relationships or update dependency paths between menu items. The construction of the dependency graph not only focuses on the hierarchical relationships of menu items but also combines user operation behaviors, such as counting the access frequencies of certain menu items by users, thus providing a data basis for subsequent update priority evaluations. By introducing operation frequency weights and access association probabilities, the dependency graph can dynamically adjust the weights to adapt to different user behavior patterns and permission change scenarios, laying a foundation for the precise update of menu data.

[0094] Using the workflow analysis engine, the system can dynamically calculate the access association probabilities between menu items by combining the user's operation sequences and the menu's hierarchical structure. This probability reflects the likelihood that when a user uses a certain menu item, they may further use other menu items. For example, in an enterprise management system, users may often jump from the "Project Management" menu to the "Task Assignment" menu and then enter the "Task Details" menu. These operation sequences can be used by the workflow analysis engine to discover the access association relationships between menu items and quantify them as access association probabilities. The access association probability not only reflects the behavioral patterns of user operations but also provides a key decision-making basis for subsequent data synchronization strategies.

[0095] When it is detected that the menu data on the server side has changed, the system first analyzes the impact scope of the change through the two-way dependency graph to quickly identify all affected associated menu items. The analysis of the change impact scope depends on the propagation path of the dependency graph. For example, if the data of the "Task Assignment" menu is updated, then the directly associated "Task Details" menu may also be affected. Combining the user access association probability, operation frequency, menu item hierarchical relationship, and dependency graph weight recorded by the dependency graph, the system can further evaluate the update priorities of the change for high-frequency access items and other associated menu items. This multi-dimensional evaluation method ensures that the determination of update priorities can comprehensively consider user behavior, menu hierarchy, and system operating status, avoiding the inefficiency of traditional full-scale update methods.

[0096] After the priority is determined, the system calculates the optimal data synchronization sequence based on the access association probability, the weight of the dependency graph, and the heuristic optimization algorithm. The heuristic optimization algorithm is an efficient optimization method that can calculate a reasonable update order in a short time, and preferentially synchronizes frequently accessed items and highly relevant menu items. For example, in the scenario of the above enterprise management system, the system will preferentially synchronize the data of the "Task Assignment" and "Task Details" menus, and delay the update of the data of the "Project Management" menu. Specifically, for highly prioritized associated menu items, the system performs active push updates to ensure that the data of these menus can be synchronized before the user uses them; for low-priority associated menu items, a lazy loading strategy is adopted, and data loading is triggered only when the user actually accesses them. The combination of this active push and lazy loading strategy not only ensures the real-time nature of data synchronization, but also effectively reduces unnecessary system resource consumption, thus achieving a good balance between performance and real-time nature.

[0097] During the process of executing menu data updates, the system will collect performance metrics in real time, including data transmission latency, cache hit rate, front-end rendering time, etc. These performance metrics reflect the current operating state of the system. For example, data transmission latency can quantify the efficiency of network communication, the cache hit rate can measure the effectiveness of the cache strategy, and the front-end rendering time directly affects the smoothness of the user's operation. By collecting these metrics and introducing machine learning models, the system can dynamically optimize the weights of the bidirectional dependency graph and the access association probability. For example, when the system detects that the cache hit rate of some frequently accessed menu items is low, the machine learning model can adjust the weights of the corresponding nodes in the dependency graph to increase their update priority. In addition, the performance metrics can also help the system identify performance bottlenecks and optimize the data synchronization strategy accordingly, enabling the system to adaptively adjust according to the actual operating state and user behavior patterns.

[0098] The above technical features achieve an efficient data synchronization process through a collaborative mechanism. The dependency graph provides the structured association information between menu items, the workflow analysis engine analyzes user behavior and provides support for access association probability, the heuristic optimization algorithm combines priority evaluation and real-time metrics to calculate the optimal synchronization sequence, and the machine learning model dynamically optimizes the dependency graph and access probability through the feedback of performance metrics. These technical features form a tightly collaborative closed-loop system, which not only significantly improves the synchronization efficiency of menu updates, but also reduces the burden on the server and optimizes the smooth experience of user operations. For example, in a high-concurrency scenario, the system can avoid resource waste caused by full-scale synchronization through accurate evaluation of update priorities and lazy loading strategies; at the same time, by continuously optimizing the dependency graph and access probability, the system can adaptively adjust the update strategy to ensure the stability and efficiency of long-term operation.

[0099] In summary, this intelligent menu update method based on WebSocket communication provides an efficient, accurate, and dynamic menu data synchronization solution through the construction of a dynamic dependency graph, the behavior analysis of the workflow analysis engine, the calculation of the synchronization strategy of the heuristic optimization algorithm, and the adaptive optimization of the machine learning model. This method not only improves the performance of the system but also significantly optimizes the user experience and is applicable to scenarios with complex menu structures and frequent dynamic updates.

[0100] Optionally, the triggering methods for sending a menu data change query request to the server include: sending a query request at a preset time interval; sending a query request when a user logs in to the system; sending a query request when a user actively refreshes the menu operation.

[0101] The following further explains several triggering methods for sending a menu data change query request to the server, including:

[0102] Sending a query request at a preset time interval. This is a simple timed polling method. The system pre-sets a fixed time interval, for example, every 10 minutes, and automatically sends a query request to ask whether there is an update to the menu data on the server side. The advantage of this method is that it is simple to implement and has clear logic.

[0103] Sending a query request when a user logs in to the system. This method utilizes the specific time point of user login. Whenever a user logs in to the system, the front end sends a menu data change query request. The advantage of this method is that user login usually means the start of a new session. Actively checking and updating the menu data at this time can ensure that the user always sees the latest menu and improve the user experience.

[0104] Sending a query request when a user actively refreshes the menu operation. This method depends on the user's active operation. When the user feels that the menu may have an update and actively refreshes the menu, the system sends a query request. The advantage of this user-driven method is that the query timing is more accurate. Since the update is checked only when the user actively requests a refresh, there will be no redundant requests and no updates that the user cares about will be missed.

[0105] These three triggering methods for query requests each have their own characteristics. Optionally, they can be used alone or in combination to achieve better results.

[0106] For example, the timed query and the query at login can be enabled simultaneously. In this way, there is a timed task to help update the data regularly, and there is an immediate update at login to improve the user experience, and the two complement each other.

[0107] Alternatively, a user refresh button can be added on the basis of regular queries. Most of the time, the data is updated by scheduled tasks. When the user subjectively feels the need to refresh, a query is triggered actively. This can balance real-time performance and resource consumption to the greatest extent.

[0108] In summary, this part of the content reflects the flexibility of the menu data caching scheme. It provides multiple options for triggering query requests and can formulate optimal strategies according to different application scenarios and requirements. This customizable and combinable feature enables the scheme to adapt to various actual system environments and has strong practical value.

[0109] Optionally, the step of dynamically generating the permission menu includes: obtaining the permission identifiers of each menu item in the menu data and the set of role permission information of the current user; traversing each menu item in the menu data and matching its permission identifier with the set of role permission information of the user; filtering and retaining the menu items with matching permission identifiers, and generating menu data in a tree structure according to the hierarchical relationship between menu items; using the menu data in the tree structure for front-end interface display.

[0110] More specifically, dynamically generating an accessible menu tree according to the user's role permissions mainly includes 4 sub-steps:

[0111] Sub-step 1: Obtain the permission identifier of the menu item and the role permission information of the user

[0112] First, it is necessary to extract the permission identifier required for each menu item from the menu data. This permission identifier can be a simple string, such as "admin", "user", etc., or a more complex data structure, such as a permission code or a permission object. The specific form depends on the system's permission design.

[0113] At the same time, it is also necessary to obtain the set of role permission information owned by the currently logged-in user. This set contains all the roles of the user and the permissions corresponding to each role.

[0114] Sub-step 2: Traverse the menu items and match them with the user permissions

[0115] After obtaining the permission identifier of the menu item and the role permission information of the user, they can be matched. The specific method is to traverse each menu item and compare its permission identifier with the user's permission set.

[0116] If the permission identifier of the menu item can find a corresponding item in the user's permission set, it means that the current user has the right to access this menu item. Conversely, if the user's permission set does not contain the permission required for this menu item, the current user has no right to access this menu item.

[0117] Sub-step 3: Filter menu items and generate a menu tree

[0118] Through the matching in the previous step, a subset of menu items that the user can access can be obtained. Filter out and retain these menu items with matching permissions, and exclude the others.

[0119] Next, the hierarchical relationship between menu items needs to be considered. Generally, menu data is a tree structure with a parent-child hierarchical relationship. According to this hierarchical relationship, the filtered menu items need to be reorganized into a menu tree.

[0120] This process can be implemented recursively. For each menu item, first determine whether it has access permission. If so, add it to the menu tree; then recursively process its sub-menu items, and finally generate a complete menu tree that only contains nodes accessible to the current user.

[0121] Sub-step 4: Use the generated menu tree for front-end display

[0122] The last step is to pass the menu tree data generated in the previous step to the front end for page display. The front end can dynamically render a menu navigation bar, a menu list, or other UI components based on this menu tree data for users to interact with and operate.

[0123] When the user clicks on a menu item, the system can perform corresponding page jumps or operations based on the routing or link information bound to the menu item.

[0124] The above is the complete process of dynamically generating a permission menu. The key to this process lies in permission matching and menu tree construction. By comparing the actual permissions of the user with the permission requirements of the menu items, filtering out the menu items that the user can access, and then generating a tree structure based on the hierarchical relationship of the menu items, a dynamic and permission-controlled menu navigation system is finally formed.

[0125] This dynamic generation method has several obvious advantages compared to hard-coding menu permissions in the front-end page:

[0126] Firstly, permission management is more flexible. The permission identifiers of menu items can be uniformly managed and dynamically adjusted on the server side. The front end only needs to obtain and use these permission identifiers in accordance with the agreed format, without the need for hard-coding permission judgments in the code.

[0127] Secondly, it reduces the workload of the front end. The front end only needs to be responsible for menu rendering and interaction, without having to care about the specific permissions of each user, nor having to manually write different menu codes for each role, reducing the complexity of development and maintenance.

[0128] Again, this approach also enhances the security of the system. By dynamically generating menus at the front end, it is possible to prevent the exposure of backend permission configurations to the front end, reducing the risk of data tampering or unauthorized access. At the same time, even if the menu data at the front end is modified, illegal requests will be intercepted again during subsequent permission verification, further safeguarding the security of the system.

[0129] Finally, the dynamically generated menu also enables personalized display. The menu items seen by different users are different. The system can customize different menu content and layouts for each user based on factors such as the user's role and personal preferences, providing a more personalized user experience.

[0130] Generally speaking, the dynamic generation of permission menus is a very effective and flexible permission management solution. It dynamically generates customized menus for each user at runtime through permission matching and tree structure construction, ensuring both the security of the system and providing good scalability and personalized support. This solution makes full use of the advantages of front-end and back-end separation, decoupling menu rendering and permission management well, and is an important technical practice for modern Web applications.

[0131] Optionally, the step of determining the type of routing address is based on a preset determination rule, and the determination rule includes: if the routing address contains a protocol prefix such as "http: / / " or "https: / / ", it is determined to be an external link address; if the routing address starts with the " / " character and does not contain a protocol prefix, it is determined to be an internal routing address.

[0132] Specifically, in this step, the basis for the determination is the format of the routing address, and the specific rules are as follows:

[0133] If the routing address contains a protocol prefix such as "http: / / " or "https: / / ", then it is determined to be an external link address. For example, addresses such as "https: / / www.example.com" or "http: / / www.example.com" are clearly links to external websites and thus belong to external link addresses. External link addresses usually point to a completely independent external website or resource and have no direct relation to the current Web application. For such addresses, the usual handling method is to open them in a new browser window or tab to avoid affecting the state and navigation history of the current application.

[0134] If the routing address starts with the " / " character and does not contain a protocol prefix, it is determined to be an internal routing address. For example, addresses like " / user / profile" or " / settings" usually correspond to a specific page or functional module within the Web application and belong to internal routing addresses. The internal routing address points to a certain page or resource within the current Web application itself, and these pages usually share the same navigation context and state space. For internal routing, a front-end routing mechanism is typically used to handle it, that is, without refreshing the entire page, the page content is dynamically updated through JavaScript to provide a smoother user experience.

[0135] Although simple, this rule for judging the type of routing address is very practical. It takes advantage of the differences in address formats between internal routing and external links. By judging whether it contains a protocol prefix and whether it starts with " / ", it is easy to distinguish between the two types.

[0136] This distinction is very important for Web applications because internal routing and external links need to be handled in completely different ways. If the judgment is incorrect, it may cause the page to not jump properly or damage the application's state and history record.

[0137] For example, suppose there is a menu item whose corresponding routing address is " / user / profile", which is an internal routing. If it is wrongly judged as an external link and opened in a new window, it will result in:

[0138] The state and data of the page are not preserved, and the user may need to log in again or refill the form.

[0139] The browser History record is interrupted, and the user cannot return to the previous page through the back button.

[0140] For some single-page applications, it may even cause the application to crash or not work properly.

[0141] Conversely, if there is an external link "https: / / www.example.com", but it is wrongly treated as an internal routing, then:

[0142] The application will try to find and render this address internally, but in fact, there is no corresponding page component, resulting in an incorrect or blank page display.

[0143] Even if a corresponding page component is hard-coded, it cannot display the content of the external website properly because they are under different domain names and are restricted by the browser's same-origin policy.

[0144] It can be seen that correctly distinguishing internal routes and external links and taking corresponding processing methods are the key to ensuring the normal operation of Web applications. And this simple judgment rule provides a concise and effective basis for judgment.

[0145] In the actual code implementation, this judgment rule can be encapsulated into an independent function or method. Then, in the click event handler of the menu item, this method is called to judge the route type, and then decide how to perform the jump or processing. In this way, different processing methods can be adopted according to different route types to ensure the correct operation of the application.

[0146] Generally speaking, the judgment of the route address type is a very basic but very important technical detail in Web applications. By simply judging internal routes and external links through rules, it can effectively avoid the chaos of page jumps and state management, and improve the robustness and maintainability of the application. When implementing functions such as front-end routing and menu navigation, these details need to be carefully considered and processed to ensure the best user experience and application performance.

[0147] Optionally, the step of performing permission verification on the internal route address includes: matching the route address with the system-predefined route configuration information to obtain the set of permission requirements corresponding to this route; comparing the set of permission requirements with the set of role permission information of the current user; if the set of user role permission information completely covers the set of route permission requirements, it is determined that the verification passes and access to this route is allowed; if the set of user role permission information does not completely cover the set of route permission requirements, it is determined that the verification fails and the user is redirected to the system-predefined no-permission prompt page.

[0148] Specifically, this step performs permission verification on the internal route address to ensure that users can only access the pages or functions they are authorized to. The specific steps include:

[0149] Match the route address with the system-predefined route configuration information to obtain the set of permission requirements corresponding to this route. The system needs to pre-configure all internal route addresses and the permissions required for each route. When a user attempts to access an internal route, the system will match this configuration based on the route address to find the corresponding set of permission requirements.

[0150] Compare the set of permission requirements with the set of role permission information of the current user. The system will obtain the role permission information of the currently logged-in user, and then compare the set of permission requirements of the route with the set of user permission information to check whether the user's permission set completely covers the set of permission requirements of the route.

[0151] If the user's permission set completely contains the set of permission requirements of the route, it is determined that the verification passes and the user is allowed to access this route.

[0152] If the user's permission set cannot fully meet the permission requirements of the route, it is determined that the verification fails, the user access is refused, and the user is redirected to a preset page with no permission prompt.

[0153] This permission verification process is usually carried out in the guard or hook function of the front-end route. It can provide an additional layer of security protection for the Web application to ensure that users cannot access unauthorized pages at the front end.

[0154] It should be noted that the front-end permission verification cannot replace the server-side permission control. The two need to be used in combination to build a truly secure and reliable system. In addition, the granularity of permission verification can also be adjusted according to actual needs, and permission control can be implemented at the route level, component level, or more detailed operation level.

[0155] Generally speaking, route permission verification is an important aspect of front-end permission control. By comparing the route permission requirements with the actual permissions of users, basic access control can be implemented at the front end to prevent users from accessing unauthorized pages and improve the security and maintainability of the system.

[0156] The technical solution of front-end intelligent menu caching and dynamic permission control provided in this embodiment is proposed in view of many deficiencies in the prior art. In traditional front-end application systems, the acquisition and display of menu data often rely on frequent network requests. Especially in a complex user permission system, the generation and verification of dynamic menus consume a large amount of server resources and client performance, resulting in slow system response speed and poor user experience. At the same time, due to the difficulty in ensuring the consistency and validity of cached data, as well as the confusion of internal and external link jump logics,

[0157] it further exacerbates the instability and maintenance cost of the system.

[0158] The core innovation point of this embodiment is to pre-position the user permission verification, use the intelligent caching mechanism to realize the on-demand acquisition and dynamic update of menu data, and complete the real-time generation of the accessible menu tree at the front end, thus minimizing the dependence on server data and improving system performance. At the same time, the invention scheme fully considers the characteristics and limitations of browser-side caching, and ensures the consistency of cached data and server data by introducing version control and expiration mechanisms. In addition, this solution also starts from the actual scenario of route jump, and proposes an intelligent recognition and permission verification mechanism for internal and external links to ensure the legality and security of page access.

[0159] In specific implementation, this embodiment cleverly utilizes browser local storage objects such as sessionStorage and localStorage to serialize and store menu cache data in the form of key-value pairs, and introduces metadata such as version numbers and expiration timestamps to form a complete cache strategy. When a user accesses, the system first decides whether to obtain the latest menu data from the server according to the cache situation. After obtaining it, it immediately updates the local storage and generates a customized accessible menu tree according to the user role permissions. At the same time, the system also maintains communication with the server side through timed or event-triggered methods to detect changes in menu data. Once a change is found, the cache is immediately marked as expired and re-obtained, thus ensuring real-time data synchronization. When performing route jumps, the system automatically determines whether it is an internal route or an external link by parsing the characteristics of the route address, and performs access control in combination with user permissions, simplifying the code logic and ensuring the consistency and correctness of the jump behavior.

[0160] In summary, the solution of this embodiment adopts a brand-new front-end data organization and interaction method, highly integrating complex logics such as user permission control, dynamic menu generation, intelligent cache management, and route jump determination, forming an effective closed-loop implementation, and completely solving many drawbacks in the traditional solution. While reducing the pressure on the server side, the system ensures high performance and stability of the front-end display and interaction, greatly improving the user experience.

[0161] More specifically, the key points of this application are mainly reflected in the following aspects:

[0162] First of all, the intelligent menu cache mechanism is a major highlight of this application. This mechanism uses browser local storage (such as sessionStorage or localStorage) to cache menu data and provides a cache update mechanism to ensure the validity of the cached data. This way avoids the need to request menu data from the server every time the page is loaded, improves the page loading speed and reduces network requests, significantly optimizing the system performance.

[0163] Secondly, this application designs a cache update mechanism to solve the problem of menu data cache invalidation or expiration. This mechanism dynamically updates the cached data by adding identifiers such as timestamps or version numbers to the cache, ensuring that the local cache is updated in a timely manner, thus avoiding the use of outdated menu data. This way effectively guarantees the real-time and accuracy of the cached data.

[0164] Again, dynamic permission control and menu management are another important feature of this application. This technology dynamically generates menus based on the user's permission information and restricts users from accessing pages that they are not allowed to visit through front-end route guards and permission control. In this way, the system can dynamically generate menu items according to the user's role and permission information, and only users who meet the permissions can see or access the corresponding menu items, ensuring that users can only access the pages they have permissions to. This method greatly improves the security and flexibility of the system.

[0165] In addition, this application has also optimized the processing logic of route jumps. By intelligently distinguishing external links from internal routes, the system can ensure that the jump logic is concise and accurate. External links will be opened in a new window, while internal routes are achieved through front-end route jumps, avoiding lengthy code and logical chaos, and improving the maintainability of the system.

[0166] Finally, this application further optimizes the system performance by simplifying the combination logic of menus and permissions. The front-end realizes permission control and dynamic menu generation, reducing the dependence on the back-end and improving the page response speed. Through the combination of front-end intelligent caching and dynamic permission control, the menu generation and permission control are made more efficient and flexible, avoiding the complexity of multiple interactions with the back-end.

[0167] In summary, the core innovation of this application lies in combining local caching, dynamic permission control, and route jump optimization to improve the performance and user experience of the front-end system. Its main protection points include: the local storage and caching mechanism of menu data, the cache data validity update mechanism, the dynamic menu generation based on user permissions, the intelligent route jump optimization, and the combination of front-end permission control and menu caching. The innovativeness of these technical points can significantly improve the performance and maintainability of dynamic Web applications, which is the core content that this application intends to protect.

[0168] The second embodiment of this application relates to a front-end intelligent menu cache and dynamic permission control system, the structure of which is as Figure 2 shown. This front-end intelligent menu cache and dynamic permission control system includes:

[0169] A menu data processing module, which is used to check whether there is valid menu cache data in the browser local storage; if it exists and has not expired, directly use the cache data; if it does not exist or has expired, obtain the latest menu data from the server through a preset interface, and store the menu data in the local storage according to a preset cache policy;

[0170] The cache update module is used to monitor the change status of the menu data on the server side; when a change is detected, mark the menu cache data in the local storage as expired, and trigger the menu data processing module to execute the data acquisition and caching process during the next access, ensuring the synchronization of the local cache data and the server data;

[0171] The permission menu generation module is used to obtain the role permission information of the currently logged-in user, match the role permission information with the menu data in the local storage, generate a menu tree accessible to the current user, and display it on the front-end interface;

[0172] The access control module is used to listen for the user's access operations on the menu tree and obtain the routing address corresponding to the target menu item; determine the type of the routing address, and when it is determined to be an internal routing address, perform access verification based on the user role permission information. If the verification passes, perform a jump through the front-end routing mechanism, and if the verification fails, block the access; when it is determined to be an external link address, open it in a new browser window.

[0173] The first embodiment is a method embodiment corresponding to this embodiment. The technical details in the first embodiment can be applied to this embodiment, and the technical details in this embodiment can also be applied to the first embodiment.

[0174] It should be noted that those skilled in the art should understand that the implementation functions of the various modules shown in the above embodiments of the front-end intelligent menu cache and dynamic permission control system can be understood with reference to the relevant descriptions of the foregoing front-end intelligent menu cache and dynamic permission control method. The functions of the various modules shown in the above embodiments of the front-end intelligent menu cache and dynamic permission control system can be implemented by a program (executable instruction) running on a processor or by specific logic circuits. If the front-end intelligent menu cache and dynamic permission control system in the embodiments of the present application is implemented in the form of software function modules and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiments of the present application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in the various embodiments of the present application. And the foregoing storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memories (ROMs), magnetic disks, or optical discs that can store program codes. In this way, the embodiments of the present application are not limited to any specific combination of hardware and software.

[0175] Accordingly, an embodiment of the present application further provides a computer storage medium storing computer-executable instructions, which, when executed by a processor, implement the method embodiments of the present application.

[0176] In addition, an embodiment of the present application further provides a front-end intelligent menu caching and dynamic permission control system, which includes a memory for storing computer-executable instructions and a processor. The processor is configured to implement the steps in the above method embodiments when executing the computer-executable instructions in the memory. The processor may be a central processing unit (CPU for short), or may also be other general-purpose processors, digital signal processors (DSP for short), application specific integrated circuits (ASIC for short), etc. The aforementioned memory may be a read-only memory (ROM for short), a random access memory (RAM for short), a flash memory, a hard disk, or a solid-state drive, etc. The steps of the methods disclosed in the embodiments of the present invention may be directly implemented by a hardware processor, or may be implemented by a combination of hardware and software modules in the processor.

[0177] It should be noted that in the application documents of this patent, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements but also other elements not expressly listed, or also includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "comprising one" does not exclude the existence of another identical element in the process, method, article or device comprising the element. In the application documents of this patent, if it is mentioned that a certain act is performed according to a certain element, it means at least performing the act according to the element, including two cases: performing the act only according to the element and performing the act according to the element and other elements. Expressions such as multiple, multiple times, multiple types, etc. include 2, 2 times, 2 types, as well as more than 2, more than 2 times, more than 2 types.

[0178] All documents mentioned in this application are considered to be incorporated herein in their entirety so as to serve as a basis for modification if necessary. In addition, it should be understood that after reading the above disclosure of this application, those skilled in the art can make various changes or modifications to this application, and these equivalent forms also fall within the scope of protection claimed in this application.

Claims

1. A method for front-end intelligent menu caching and dynamic permission control, characterized in that: The following steps are involved: S1. Acquisition and caching of menu data: The front-end application first checks whether there is valid menu cache data in the browser local storage; If it exists and has not expired, the cached data is used directly; if it does not exist or has expired, the latest menu data is obtained from the server through a preset interface, and the menu data is stored in the local storage according to the preset cache strategy; S2, dynamic update of cache data: monitor the change status of the menu data on the server side; when a change is detected, mark the menu cache data in the local storage as expired, and trigger the data acquisition and caching process in step S1 at the next access to ensure synchronization of the local cache data with the server data; S3, dynamic generation of permission menu: obtaining the role permission information of the currently logged-in user, matching the role permission information with the menu data in the local storage, generating a menu tree accessible to the current user, and displaying it on the front-end interface; S4. Menu access permission control: monitor the user's access operation to the menu tree, and obtain the routing address corresponding to the target menu item; determine the type of the routing address, and when it is determined to be an internal routing address, perform access verification based on the user role permission information. If the verification passes, jump through the front-end routing mechanism, and if the verification fails, block access; if it is determined to be an external link address, open it in a new browser window.

2. The method according to claim 1, characterized in that The preset caching strategy includes: after converting the menu data object into a JSON format string, storing it in the form of a key-value pair, with the version number of the menu data as the key and the serialized menu data content as the value; when writing to local storage, adding an expiration timestamp field to the menu data, and writing the menu data, version number and expiration timestamp fields at the same time; when reading local storage, judging whether the cache is expired by comparing the current time with the expiration timestamp field, and judging whether the cache is the latest by comparing the current version number with the menu data version number.

3. The method according to claim 1, characterized in that: The step of monitoring the change status of menu data on the server side includes: sending a menu data change query request to the server side through timed polling or WebSocket; receiving the menu data change status or version number returned by the server side, and comparing it with the menu data change status or version number recorded in the local storage; if the server side version number is higher than the local storage version number, it is determined that the menu data on the server side has changed, triggering the menu data update step.

4. The method according to claim 3, characterized in that During the WebSocket communication process: Dynamically build a bidirectional dependency graph based on user operation behavior and menu hierarchy structure, record the data association relationship between menu items, update propagation path, operation frequency weight, and access association probability of menu items; Using the workflow analysis engine, combined with the user's operation sequence and menu hierarchy, the access association probability between menu items is dynamically calculated; When changes in menu data on the server side are detected: the impact scope of the change is analyzed through the dependency graph, all affected associated menu items are identified, and the update priority of the change for high-frequency access items and other associated menu items is evaluated in combination with the user access association probability, operation frequency, menu item hierarchy and dependency graph weight; based on the priority, combined with the access association probability, dependency graph weight and heuristic optimization algorithm, the optimal data synchronization sequence is calculated, and high-frequency access items and high-association menu items are updated first; active push updates are performed for high-priority associated menu items, and a lazy loading strategy is adopted for low-priority associated menu items, and data loading is triggered when the user actually accesses, thereby balancing the real-time and performance of data synchronization; In the process of executing the menu data update, performance indicators are collected in real time, wherein the core performance indicators are selected from the following group: data transmission delay, cache hit rate, and front-end rendering time; The weights and access association probabilities of the dependency graph are dynamically optimized through machine learning models, so that the update strategy can be adaptively adjusted according to the system operation status and user behavior patterns; The above-mentioned collaborative mechanism improves the synchronization efficiency of menu updates, reduces server burden, and optimizes the smooth experience of user operations.

5. The method according to claim 3, characterized in that: The triggering method of sending the menu data change query request to the server includes: sending the query request regularly at a preset time interval; sending the query request when the user logs into the system; sending the query request when the user actively refreshes the menu operation.

6. The method according to claim 1, characterized in that The steps for dynamically generating the permission menu include: obtaining the permission identifier of each menu item in the menu data and the role permission information set of the current user; traversing each menu item in the menu data and matching its permission identifier with the role permission information set of the user; filtering and retaining menu items with matching permission identifiers, and generating menu data with a tree structure according to the hierarchical relationship between the menu items; and using the menu data with the tree structure for front-end interface display.

7. The method according to claim 1, characterized in that The step of determining the type of routing address is performed based on preset judgment rules, which include: if the routing address contains the "http: / / " or "https: / / " protocol prefix, it is determined to be an external link address; if the routing address starts with the " / " character and does not contain the protocol prefix, it is determined to be an internal routing address.

8. The method according to claim 1, characterized in that The steps of performing permission verification on the internal routing address include: matching the system preset routing configuration information according to the routing address, obtaining the permission requirement set corresponding to the routing; comparing the permission requirement set with the current user's role permission information set; if the user role permission information set completely covers the routing permission requirement set, then the verification is determined to be successful and access to the routing is allowed; if the user role permission information set does not completely cover the routing permission requirement set, then the verification is determined to be a failure and jumps to the system preset no permission prompt page.

9. A front-end intelligent menu cache and dynamic authority control system, characterized in that: include: The menu data processing module is used to check whether there is valid menu cache data in the browser local storage; If it exists and has not expired, the cached data is used directly; If it does not exist or has expired, the latest menu data is obtained from the server through a preset interface, and the menu data is stored in the local storage according to a preset cache strategy; The cache update module is used to monitor the change status of the menu data on the server side; when a change is detected, the menu cache data in the local storage is marked as expired, and the menu data processing module is triggered to execute the data acquisition and caching process at the next access, so as to ensure the synchronization of the local cache data with the server data; The permission menu generation module is used to obtain the role permission information of the currently logged-in user, match the role permission information with the menu data in the local storage, generate a menu tree accessible to the current user, and display it on the front-end interface; The access control module is used to monitor the user's access operations on the menu tree and obtain the routing address corresponding to the target menu item; determine the type of the routing address, and when it is determined to be an internal routing address, perform access verification based on the user role permission information. If the verification passes, jump through the front-end routing mechanism, and if the verification fails, block access; if it is determined to be an external link address, open it in a new browser window.

Images