Front-end menu longitudinal unauthorized protection method, system, equipment and medium
By configuring route access control and interceptors on the front end, combined with localStorage caching, the real-time and accurate protection against vertical access violations in the front-end menu is achieved. This solves the problems of poor real-time performance, high interaction overhead, complex logic, and untimely cache readiness in existing technologies, thereby improving user experience and system security.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-17
- Publication Date
- 2026-04-03
AI Technical Summary
Existing front-end menu vertical privilege escalation protection solutions suffer from poor real-time performance, high interaction overhead, complex logic, and untimely cache readiness, leading to abnormal user operations and system performance degradation.
By configuring route access control and interceptors on the front end, the system retrieves all menu information after a user logs in and caches it in localStorage. The route interceptor performs real-time verification to ensure that all route jump requests complete permission verification locally. Combined with cache synchronization and cleanup mechanisms, the system achieves instant protection.
It achieves real-time and accurate protection against vertical unauthorized access in the front-end menu, reduces system overhead, improves user experience and security, simplifies permission verification logic, and ensures permission consistency and timely cache updates.
Smart Images
Figure CN121786804A_ABST
Abstract
Description
Technical Field
[0001] This invention belongs to the field of front-end web application security technology, and relates to the fields of front-end routing permission control, local caching application and interceptor technology. Specifically, it is a method, system, device and medium for front-end menu vertical privilege escalation protection. Background Technology
[0002] With the widespread adoption of web applications and the increasing complexity of business processes, multi-role access control has become a core requirement for front-end systems. Menus, as the primary entry point for user operations, are directly related to system data security due to their access control limitations. Vertical privilege escalation refers to unauthorized operations between users with different permission levels. Specifically, in the front-end menu scenario, this means that a user with lower permissions attempts to access the page route corresponding to a higher-permission menu item without authorization by manually entering the URL or tampering with routing parameters, potentially leading to sensitive data leakage or unauthorized operations.
[0003] In front-end web application development, menu access control is a crucial aspect of system security. Vertical unauthorized access (i.e., low-privilege users attempting to access page routes corresponding to high-privilege menus) is a common security risk. Existing front-end menu access protection solutions mainly have the following shortcomings:
[0004] (1) Relying solely on backend validation: The frontend only obtains the menu list for page rendering when the user logs in, without synchronizing cached routes for validation, and relies entirely on backend interface permission interception. In this approach, malicious users can directly enter high-privilege route addresses to initiate requests. Even if the backend ultimately refuses to respond, it may still incur invalid request overhead, and the page may experience brief loading anomalies, affecting the user experience.
[0005] (2) Front-end validation relies on real-time back-end requests: Some solutions send a request to the back-end to validate the legality of the target route every time a route is navigated, and do not obtain all menu data in advance after login. Although this method can ensure the accuracy of validation, frequent front-end and back-end interactions will increase network overhead and reduce page navigation response speed. Especially in poor network conditions, it may cause page lag, and the first navigation after login is prone to validation delay due to missing cached data.
[0006] (3) Local caching logic is chaotic: Although some solutions attempt to store permission information in local caching, they do not obtain the full menu data immediately after login, or lack standardized caching format and unified verification mechanism, which can easily lead to problems such as inconsistency between cache and actual permissions and scattered verification logic, resulting in protection failure. Summary of the Invention
[0007] The technical objective of this invention is to provide a method, system, device, and medium for protecting vertical privilege escalation in front-end menus, in order to solve the problems of poor real-time performance, high interaction overhead, complex logic, and untimely cache readiness in existing front-end menu vertical privilege escalation protection schemes.
[0008] The technical objective of this invention is achieved as follows: a method for preventing vertical privilege escalation in front-end menus, the specific method of which is as follows:
[0009] Enable front-end route access control: Configure the front-end routing system based on a front-end framework (such as Vue Router, React Router) and enable the route interceptor (i.e., enable the global route guard function) to ensure that all route jump requests (including tab input URL, browser forward / back, programmatic navigation) can be intercepted;
[0010] User login, full menu retrieval and caching: After the user submits a login request on the front-end login interface, the back-end verifies the user's identity and immediately queries and returns the full menu information corresponding to the current user's permissions. The front-end receives the full menu information returned by the back-end, extracts the unique route address of all menus and organizes them into a set of valid route addresses, which is then stored in the browser's localStorage to form a local valid route cache. After caching is complete, the front-end renders the page menu navigation based on the full menu information, ensuring that caching operations take precedence over menu rendering to avoid caching not being ready due to rendering delays.
[0011] Route redirection interception: When the front end triggers a route redirection operation, the route interceptor intercepts the corresponding redirection request and extracts the target route address from the redirection request;
[0012] Route verification and verification result processing: The route interceptor reads the set of valid route addresses in localStorage and verifies whether the target route address exists in the set of valid route addresses. If the verification result is that it exists in the set of valid router addresses, the route jump is allowed to continue and the page loads normally. If the verification result is that it does not exist in the set of valid router addresses, the jump is refused and the preset exception handling mechanism is triggered.
[0013] Cache synchronization and cleanup: When user permissions change or the user logs out, synchronize and update or clean up the valid route cache in localStorage.
[0014] As a preferred option, the route redirection interception is as follows:
[0015] When the front end triggers a route jump by clicking a menu, entering a URL, or using programmatic navigation, the route interceptor immediately intercepts the jump request and pauses the jump process.
[0016] The interceptor extracts the target route address (such as " / system / admin" entered by the user) from the redirect request.
[0017] As a preferred option, the specific details of the exception handling mechanism are as follows:
[0018] Redirecting to a preset permission-invalid prompt page (such as the "403 Forbidden" page), or a pop-up window indicating insufficient permissions will appear, and you can choose to record an unauthorized access log; the unauthorized access log includes access time information, target route information, and user identification information.
[0019] As a preferred method, cache synchronization and cleanup are as follows:
[0020] When user permissions change (e.g., an administrator modifies user permissions), the front-end receives the new full menu data pushed by the back-end and updates the set of valid route addresses in localStorage to ensure that the cache is consistent with the actual permissions. Specifically, when a user logs out, the front-end proactively clears the set of valid route addresses stored in localStorage to prevent unauthorized users from attempting to access the site using cached information. Alternatively, a cache expiration period can be set; if a user does not perform any action within a set time (e.g., 2 hours), the cache is automatically cleared, triggering a re-login or permission refresh process upon the next redirect, further enhancing security.
[0021] Preferably, the method also includes data integrity guarantees, as follows:
[0022] After receiving the full menu data, the front-end checks whether it contains the "routePath" key field.
[0023] If any field is missing or the data format is abnormal, a retry request will be initiated immediately (maximum of 2 retries).
[0024] If the retry fails, the user will be prompted with "Permission loading failed, please log in again";
[0025] If the backend returns an empty full menu set (e.g., a user with low privileges has no menu permissions), the frontend caches the empty set and intercepts all non-login page routes during route redirection, directing the user to the permission application page.
[0026] More ideally, the full menu information covers all menus accessible under the current user's permissions, without omissions or redundancy, and includes a unique route address and route association attributes for each menu; the route association attributes include menu name, icon, hierarchical relationship and permission level;
[0027] The collection of route addresses stored in localStorage adopts a flat structure, and if there are multiple user login scenarios, the storage key name is associated with the user's unique identifier (such as user ID) to avoid cache overwriting;
[0028] Routing actions include at least one of the following: entering a URL in a tab, browser forward or back navigation, menu clicks, and programmatic navigation.
[0029] A front-end menu vertical privilege escalation protection system, the system comprising:
[0030] The permission route caching module is used to receive all the valid menu information returned by the backend after the user logs in and passes authentication, extract the route address, perform standardization processing, and store it in localStorage immediately.
[0031] The route interceptor module is used to intercept all route redirection requests from the front end, extract the target route address, and match and verify it with the set of valid route addresses in localStorage;
[0032] The exception handling module is used to execute preset exception handling logic for unauthorized redirects when the target route verification fails.
[0033] The cache synchronization module is used to update the cache when user permissions change and to clear the cache when the user logs out or the cache times out.
[0034] The menu rendering module is used to render the page navigation menu based on the full menu information, ensuring that the menu display is consistent with the permission verification criteria.
[0035] As a preferred option, the permission routing cache module also has a data integrity verification function, specifically as follows:
[0036] After receiving the full menu information, verify whether it contains the route address field:
[0037] If any field is missing or the format is incorrect, initiate a retry request.
[0038] The route interceptor module covers all route navigation methods, including entering a URL in a tab, browser forward or back navigation, and programmatic navigation.
[0039] localStorage, as a browser local storage technology, has the characteristics of moderate storage capacity, persistent storage (unless actively cleared), and fast read speed, making it suitable for storing fixed user permission information. Meanwhile, the front-end route interceptor can uniformly intercept and process all route jump behaviors. The combination of the two, along with the design of "instantly obtaining the full menu after login", can realize front-end permission verification without real-time back-end intervention, effectively making up for the shortcomings of existing solutions.
[0040] An electronic device includes: a memory and at least one processor;
[0041] The memory stores computer-executed instructions;
[0042] The at least one processor executes the computer execution instructions stored in the memory, causing the at least one processor to perform the front-end menu vertical privilege escalation protection method as described above.
[0043] A computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the aforementioned front-end menu vertical privilege escalation protection method.
[0044] The front-end menu vertical privilege escalation protection method, system, device, and medium of the present invention have the following advantages:
[0045] (i) Strong real-time protection: The route verification of this invention is completed locally on the front end with a response time of milliseconds. It can immediately block unauthorized redirects, avoid invalid backend requests and abnormal page loading, and cache the full menu immediately after login to ensure that effective verification is triggered on the first route jump, with no protection gap period.
[0046] (ii) Reduced system overhead: This invention only interacts with the backend to obtain menu data during login and permission changes. Subsequent jumps do not require requests to the backend, reducing network transmission pressure and backend processing burden, and improving page response speed.
[0047] (III) High consistency of permissions: The full menu obtained after login is used for both page navigation rendering and route verification, ensuring that the "menu seen by the user" and the "route accessible by the user" are completely matched, avoiding contradictory scenarios such as "menu is displayed but route is blocked" or "menu is hidden but route is accessible"; at the same time, the cached content comes directly from the backend and supports real-time updates and cleanup, further ensuring the accuracy of permissions.
[0048] (iv) Simple and easy to implement: This invention is based on the existing front-end framework's route interceptor and localStorage technology, without the need to introduce complex dependencies, resulting in low development costs; it supports compatibility with mainstream frameworks such as Vue and React, can flexibly adapt to different system architectures, and the exception handling logic and caching strategy can be customized and adjusted according to business needs;
[0049] (V) Enhanced security: This invention effectively prevents malicious users from gaining unauthorized access by tampering with routes or entering URLs through dual protection of "front-end proactive interception + back-end fallback verification (optional)". At the same time, it reduces the risk of cache leakage by combining cache expiration and exit cleanup mechanisms, thus comprehensively improving the system security level.
[0050] (vi) After the user login operation is completed and the identity authentication is passed, the front end immediately sends a request to the back end to obtain all menu information under the current user's permissions. The route address corresponding to the menu is organized and cached in localStorage. When the route jumps, the route interceptor verifies in real time whether the target route matches the legal route cached in localStorage. Unauthorized access can be intercepted without frequent requests to the back end. This ensures the real-time and accuracy of protection, reduces system interaction overhead, simplifies the verification logic, and improves the security and user experience of the front end system. It is applicable to Web systems developed based on mainstream front end frameworks such as Angular, Vue, and React. It aims to solve the security protection problem of vertical unauthorized access to the front end menu. The core is to obtain and cache the full menu immediately after the user logs in, providing local basis for subsequent route verification.
[0051] (vii) This invention aims to solve the problems of poor real-time performance, high interaction overhead, complex logic, and untimely cache readiness in existing front-end menu vertical privilege escalation protection schemes. Specific objectives include:
[0052] ① Real-time validation of front-end route jumps: Without relying on real-time back-end requests, it quickly determines whether the target route is authorized by the locally cached set of valid routes and promptly intercepts unauthorized jumps;
[0053] ② Reduce system interaction overhead: Only retrieve and cache the full set of valid menu routes once when a user logs in, and perform subsequent route verification locally, reducing the number of network requests between the front end and the back end;
[0054] ③Simplify permission verification logic: Through a unified interceptor and cache management mechanism, the route verification process is centrally handled, avoiding scattered verification logic and improving code maintainability;
[0055] ④ Ensure consistent permissions: The cached content comes directly from the user's valid permissions returned by the backend, and supports cache synchronization when permissions are updated, ensuring the accuracy of the verification basis;
[0056] ⑤ Implement immediate retrieval of the full menu after login: Ensure that after a user completes the login operation, the front end obtains all menu information corresponding to the current user's permissions as soon as possible, to avoid verification failure due to missing cached data during subsequent route jumps;
[0057] ⑥ Establish a complete local permission dataset: By caching all menu routes immediately after login, the routing interceptor is provided with comprehensive and accurate legal routing basis, covering all menu scenarios accessible to users, with no verification omissions. Attached Figure Description
[0058] The invention will be further described below with reference to the accompanying drawings.
[0059] AppendixFigure 1 This is a flowchart illustrating the method for preventing vertical privilege escalation in front-end menus. Detailed Implementation
[0060] The following detailed description of the front-end menu vertical overreach protection method, system, device, and medium of the present invention is based on the accompanying drawings and specific embodiments.
[0061] Example 1:
[0062] As attached Figure 1 As shown, this embodiment provides a method for preventing vertical privilege escalation in front-end menus. This method involves the front-end immediately retrieving all valid menu items and caching them in localStorage after the user logs in and passes authentication. A front-end route interceptor is then used to uniformly intercept redirection requests and verify them against the cached routes, achieving real-time protection against vertical privilege escalation. The specific details are as follows:
[0063] S1. Enable front-end route access control: Configure the front-end routing system based on a front-end framework (such as Vue Router, React Router) and enable the route interceptor (i.e., enable the global route guard function) to ensure that all route jump requests (including tab input URL, browser forward / backward, programmatic navigation) can be intercepted;
[0064] S2. User Login and Full Menu Retrieval and Caching: After the user submits a login request on the front-end login interface, the back-end verifies the user's identity and immediately queries and returns the full menu information corresponding to the current user's permissions. The front-end receives the full menu information returned by the back-end, extracts the unique route address of all menus and organizes them into a set of valid route addresses, which is then stored in the browser's localStorage to form a local valid route cache. After caching is complete, the front-end renders the page menu navigation based on the full menu information, ensuring that caching operations take precedence over menu rendering to avoid caching not being ready due to rendering delays.
[0065] S3, Route Jump Interception: When the front end triggers a route jump operation, the route interceptor intercepts the corresponding jump request and extracts the target route address from the jump request;
[0066] S4. Route verification and verification result processing: The route interceptor reads the set of valid route addresses in localStorage and verifies whether the target route address exists in the set of valid route addresses. If the verification result is that it exists in the set of valid route addresses, the route jump is allowed to continue and the page loads normally. If the verification result is that it does not exist in the set of valid route addresses, the jump is refused and the preset exception handling mechanism is triggered.
[0067] S5. Cache Synchronization and Cleanup: When user permissions change or the user logs out, synchronize and update or clean up the valid route cache in localStorage.
[0068] S6. Data Integrity Guarantee: After receiving the full menu data, the front end verifies whether the "routePath" key field is included. If the field is missing or the data format is abnormal, a retry request is immediately initiated (maximum of 2 retries). If the retry fails, the user is prompted "Permission loading failed, please log in again". If the full menu data returned by the back end is empty (e.g., low-permission users have no menu permissions), the front end caches the empty set and intercepts all non-login page routes during route redirection, guiding the user to the permission application page.
[0069] In step S2 of this embodiment, the full menu information covers all menus accessible under the current user's permissions, without omissions or redundancy, and includes a unique route address and route association attributes for each menu; the route association attributes include menu name, icon, hierarchical relationship and permission level.
[0070] The specific details of the route redirection interception in step S3 of this embodiment are as follows:
[0071] S301. When the client triggers a route jump by clicking a menu, entering a URL, or using programmatic navigation, the route interceptor immediately intercepts the jump request and suspends the jump process.
[0072] S302, The interceptor extracts the target route address (such as " / system / admin" entered by the user) from the redirect request.
[0073] The specific details of the exception handling mechanism in step S4 of this embodiment are as follows:
[0074] Redirecting to a preset permission-invalid prompt page (such as the "403 Forbidden" page), or a pop-up window indicating insufficient permissions will appear, and you can choose to record an unauthorized access log; the unauthorized access log includes access time information, target route information, and user identification information.
[0075] The cache synchronization and cleanup in step S5 of this embodiment are as follows:
[0076] When user permissions change (e.g., an administrator modifies user permissions), the front-end receives the new full menu data pushed by the back-end and updates the set of valid route addresses in localStorage to ensure that the cache is consistent with the actual permissions. Specifically, when a user logs out, the front-end proactively clears the set of valid route addresses stored in localStorage to prevent unauthorized users from attempting to access the site using cached information. Alternatively, a cache expiration period can be set; if a user does not perform any action within a set time (e.g., 2 hours), the cache is automatically cleared, triggering a re-login or permission refresh process upon the next redirect, further enhancing security.
[0077] In this embodiment, the set of route addresses stored in localStorage adopts a flat structure, and if there is a multi-user login scenario, the storage key name is associated with the user's unique identifier (such as user ID) to avoid cache overwriting;
[0078] In this embodiment, the routing jump operation includes at least one of the following: entering a URL in a tab, going forward or backward in the browser, clicking a menu, and programmatic navigation.
[0079] In this embodiment, the timing of requests after login is controlled: asynchronous programming using Promise ensures the sequential execution of the process "backend authentication successful → retrieve full menu → cache routes → render menu," preventing the frontend from prematurely redirecting the page (e.g., to the homepage) before the menu data is returned, which would cause the cache to be incomplete during homepage route verification. Example code logic (using Vue as an example):
[0080] handleLogin(){
[0081] this.$api.login(this.loginForm) / / Submit login authentication
[0082] then(authRes=>{}
[0083] / / After successful authentication, immediately request the full menu.
[0084] return this.$api.getUserAllMenus(authRes.userId);
[0085] })
[0086] then(menuRes=>{
[0087] / / Extract routes and cache them in localstorage
[0088] const legalRoutes=menuRes.map(menu=>menu.routePath);
[0089] localstorage.setItem(`userLegalMenuRoutes${authRes.userId},jsoN.stringify(legalRoutes));
[0090] / / After caching is complete, render the menu and redirect to the homepage.
[0091] this.renderMenu(menuRes):
[0092] this.$router.push(" / home");
[0093] })
[0094] .catch(error=>{
[0095] this.$message.error(error.message||"Login or permissions failed to load, please try again");
[0096] });
[0097] }
[0098] This embodiment enables route standardization: the route information returned by the backend may contain a hierarchical structure (such as nested routes), and the frontend needs to extract the "routePath" of all leaf nodes and parent nodes to form a flat route set without repetition, ensuring the matching accuracy during verification;
[0099] This embodiment enables secure processing of localStorage: the stored routing information is non-sensitive data and does not require encryption, but cache conflicts between different system versions can be avoided by adding a version number (such as "userLegalMenuRoutes_v1");
[0100] The interceptor coverage in this embodiment is as follows: By configuring the "beforeEach" global route guard (VueRouter) or "useEffect+history.listen" (React Router), the interceptor is ensured to be effective for all route navigation methods without any omissions.
[0101] This embodiment enables flexible exception handling: it supports custom exception handling methods and can be configured with different behaviors such as "redirecting to the page without permission", "pop-up prompt + return to the previous page", and "pop-up prompt only" according to system requirements, to meet diverse business scenarios.
[0102] Example 2:
[0103] This embodiment provides a front-end menu vertical privilege escalation protection system, the system comprising:
[0104] The permission route caching module is used to receive all the valid menu information returned by the backend after the user logs in and passes authentication, extract the route address, perform standardization processing, and store it in localStorage immediately.
[0105] The route interceptor module is used to intercept all route redirection requests from the front end, extract the target route address, and match and verify it with the set of valid route addresses in localStorage;
[0106] The exception handling module is used to execute preset exception handling logic for unauthorized redirects when the target route verification fails.
[0107] The cache synchronization module is used to update the cache when user permissions change and to clear the cache when the user logs out or the cache times out.
[0108] The menu rendering module is used to render the page navigation menu based on the full menu information, ensuring that the menu display is consistent with the permission verification criteria.
[0109] The permission routing cache module in this embodiment also has a data integrity verification function, specifically as follows:
[0110] After receiving the full menu information, verify whether it contains the route address field:
[0111] If any fields are missing or have incorrect formats, initiate a retry request.
[0112] The route interceptor module in this embodiment covers all route redirection methods, including entering a URL in a tab, browser forward or back navigation, and programmatic navigation.
[0113] The working process of this system is as follows:
[0114] (1) Enable front-end route access control: Configure the routing system based on the front-end framework (such as Vue Router, React Router), enable the global route guard (interceptor) function, and ensure that all route navigation behaviors (including tab input URL, browser forward / backward, programmatic navigation) can be intercepted;
[0115] (2) User login, full menu retrieval and caching, as detailed below:
[0116] a) Users enter their username and password (or use other authentication methods such as verification code or OAuth2.0) on the front-end login interface and click the "Login" button to submit an authentication request;
[0117] b) The backend receives the authentication request and verifies the user's identity (such as password encryption comparison, token verification, etc.). If the authentication is successful, it immediately queries the full menu data associated with the current user's permissions (including menu name, route address, icon, hierarchy, permission level, etc.).
[0118] c) The backend encapsulates all menu data into a standardized JSON response (example: [{"menuName":"User Management","routePath":" / system / user","icon":"user"},{"menuName":"Role Management","routePath":" / system / role","icon":"role"}]) and returns it to the frontend;
[0119] d) After the front-end receives the full menu data returned by the back-end, it first performs caching operations: extract the "routePath" field of all menus, organize it into a flat "set of legal route addresses" (such as [" / home", " / system / user", " / system / role"]), and store it in localStorage with a fixed key name (such as "userLegalMenuRoutes". If there is a multi-user login scenario, it can be associated with a unique user identifier, such as "userLegalMenuRoutes_1001").
[0120] e) After caching is complete, the front end uses the menu rendering module to render the page navigation menu based on the full menu data, ensuring that caching operations take precedence over menu rendering and avoiding caching not being ready due to rendering delays.
[0121] (3) Route redirection interception and verification, as detailed below:
[0122] a) When the client triggers a route jump by clicking a menu, entering a URL, programmatic navigation, etc., the route interceptor immediately intercepts the jump request and suspends the jump process;
[0123] b) The interceptor extracts the target route address (such as " / system / admin" entered by the user) from the redirect request;
[0124] c) The interceptor reads the "set of valid route addresses" cached in localStorage and determines whether the target route address exists in the set;
[0125] (4) Verification result processing, as detailed below:
[0126] a) If the target route address exists in the valid set, route redirection is allowed to continue execution, and the page loads normally;
[0127] b) If the target route address does not exist in the valid set, the redirection is refused and the exception handling mechanism is triggered: redirect to the preset unauthorized prompt page (such as the "403 Forbidden" page), or pop up a prompt window indicating insufficient permissions, and you can choose to record the unauthorized access log (including access time, target route, user ID and other information).
[0128] (5) Cache synchronization and cleanup, as detailed below:
[0129] a) When user permissions change (e.g., an administrator modifies user permissions), the front end receives the new full menu data pushed by the back end and updates the "set of valid route addresses" in localStorage to ensure that the cache is consistent with the actual permissions;
[0130] b) When a user logs out, the front end actively clears the "set of valid route addresses" stored in localStorage to prevent unauthorized users from attempting to access the site using cached information.
[0131] c) Optional: Set the cache expiration time. If the user does not operate for a long time (such as 2 hours), the cache will be automatically cleared and a re-login or permission refresh process will be triggered on the next redirect to further improve security.
[0132] (6) Data integrity protection, as detailed below:
[0133] a) After receiving the full menu data, the front end checks whether it contains key fields such as "routePath". If there are missing fields or abnormal data format, a retry request is immediately initiated (maximum of 2 retries). If the retry fails, the user is prompted "Permission loading failed, please log in again".
[0134] b) If the full menu data returned by the backend is empty (e.g., a user with low privileges has no menu permissions), the frontend caches the empty set and intercepts all non-login page routes during route redirection, guiding the user to the permission application page.
[0135] In this embodiment, the trigger condition for "the backend immediately queries and returns all menu information" is "user authentication is successful", and this operation is executed synchronously with the backend returning the authentication result, without the frontend needing to initiate an additional menu query request.
[0136] In this embodiment, the execution timing of "instant storage to localStorage" is earlier than that of "rendering page menu navigation" in step S4, ensuring that the route cache is ready first.
[0137] The full menu information in this embodiment covers all menus accessible under the current user's permissions, without omissions or redundancy, and includes at least two of the following attributes: menu name, routing address, icon, and hierarchical relationship.
[0138] In this embodiment, the set of route addresses stored in localStorage adopts a flat structure, and if there is a multi-user login scenario, the storage key name is associated with the user's unique identifier (such as user ID) to avoid cache overwriting.
[0139] The routing jump operation in this embodiment includes at least one of tab input URL, browser forward / backward, menu click, and programmatic navigation.
[0140] The exception handling mechanism in this embodiment includes one or more combinations of redirecting to a permission-invalid prompt page, popping up a permission-insufficient pop-up window, and logging unauthorized access.
[0141] In this embodiment, cache synchronization includes the front end receiving new full menu information pushed by the back end when user permissions change, and updating the set of route addresses in localStorage accordingly; cache clearing includes: actively clearing the cache when the user logs out, or setting a cache expiration period and automatically clearing the cache after the timeout.
[0142] Example 3:
[0143] This embodiment also provides an electronic device, including: a memory and at least one processor;
[0144] The memory stores computer-executed instructions;
[0145] The at least one processor executes the computer execution instructions stored in the memory, causing the at least one processor to execute the front-end menu vertical privilege escalation protection method according to any one of the present invention.
[0146] The processor can be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), off-the-shelf programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor can be a microprocessor or any conventional processor.
[0147] Memory is used to store computer programs and / or modules. The processor implements various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory, and by accessing data stored in the memory. Memory can mainly include a program storage area and a data storage area. The program storage area can store the operating system, at least one application program required for a function, etc.; the data storage area can store data created based on the use of the terminal, etc. In addition, memory can also include high-speed random access memory, and can also include non-volatile memory, such as hard disks, RAM, plug-in hard disks, smart memory cards (SMC), secure digital cards (SD cards), flash memory cards, at least one disk storage device, flash memory device, or other volatile solid-state storage devices.
[0148] Example 4:
[0149] This embodiment also provides a computer-readable storage medium storing multiple instructions, which are loaded by a processor to cause the processor to execute the front-end menu vertical privilege escalation protection method in any embodiment of the present invention. Specifically, a system or apparatus equipped with a storage medium may be provided, on which software program code implementing the functions of any of the above embodiments is stored, and the computer (or CPU or MPU) of the system or apparatus may read and execute the program code stored in the storage medium.
[0150] In this case, the program code read from the storage medium can itself implement the function of any of the above embodiments, and therefore the program code and the storage medium storing the program code constitute part of the present invention.
[0151] Examples of storage media used to provide program code include floppy disks, hard disks, magneto-optical disks, optical disks (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), magnetic tapes, non-volatile memory cards, and ROMs. Alternatively, program code can be downloaded from a server computer via a communication network.
[0152] Furthermore, it should be clear that not only can the program code read by the computer be executed, but also the operating system or other components operating on the computer can be instructed based on the program code to perform some or all of the actual operations, thereby realizing the function of any of the embodiments described above.
[0153] Furthermore, it is understood that the program code read from the storage medium is written to the memory set in the expansion board inserted into the computer or to the memory set in the expansion unit connected to the computer. Then, based on the instructions of the program code, the CPU or other components installed on the expansion board or expansion unit execute some and all of the actual operations, thereby realizing the function of any of the embodiments described above.
[0154] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.
Claims
1. A method for preventing vertical privilege escalation in front-end menus, characterized in that, The method is as follows: Enable front-end route access control: Configure the front-end routing system based on the front-end framework and enable the route interceptor to ensure that all route jump requests can be intercepted; User login, full menu retrieval and caching: When a user submits a login request on the front-end login interface, the back-end verifies the user's identity and immediately queries and returns the full menu information corresponding to the current user's permissions; the front-end receives the full menu information returned by the back-end, extracts the unique route address of all menus and organizes them into a set of valid route addresses, and immediately stores them in the browser's localStorage to form a local valid route cache. After caching is complete, the front-end renders the page menu navigation based on the full menu information; Route redirection interception: When the front end triggers a route redirection operation, the route interceptor intercepts the corresponding redirection request and extracts the target route address from the redirection request; Route verification and verification result processing: The route interceptor reads the set of valid route addresses in localStorage and verifies whether the target route address exists in the set of valid route addresses. If the verification result shows that it exists in the set of valid route addresses, the route jump is allowed to continue execution and the page loads normally. If the verification result is that the address does not exist in the set of valid router addresses, the redirection will be refused and the preset exception handling mechanism will be triggered. Cache synchronization and cleanup: When user permissions change or the user logs out, synchronize and update or clean up the valid route cache in localStorage.
2. The front-end menu vertical privilege escalation protection method according to claim 1, characterized in that, The specific details of route redirection interception are as follows: When the front end triggers a route jump by clicking a menu, entering a URL, or using programmatic navigation, the route interceptor immediately intercepts the jump request and pauses the jump process. The interceptor extracts the target route address from the redirect request.
3. The front-end menu vertical privilege escalation protection method according to claim 1, characterized in that, The specific details of the exception handling mechanism are as follows: Redirecting to the preset permission-invalid prompt page, or a pop-up window indicating insufficient permissions will appear, and you can choose to record an unauthorized access log; the unauthorized access log includes access time information, target route information, and user identification information.
4. The front-end menu vertical privilege escalation protection method according to claim 1, characterized in that, The cache synchronization and cleanup are detailed below: When user permissions change, the front end receives the new full menu data pushed by the back end and updates the set of valid route addresses in localStorage. Specifically, when a user logs out, the front end actively clears the set of valid route addresses stored in localStorage; or a cache expiration period is set, and if the user does not perform any operation within the set time, the cache is automatically cleared, and a re-login or permission refresh process is triggered the next time the user is redirected.
5. The front-end menu vertical privilege escalation protection method according to claim 1, characterized in that, This method also includes data integrity guarantees, as detailed below: After receiving the full menu data, the front-end checks whether it contains the "routePath" key field. If any field is missing or the data format is abnormal, a retry request will be initiated immediately (maximum of 2 retries). If the retry fails, the user will be prompted with "Permission loading failed, please log in again"; If the backend returns an empty full menu, the frontend caches an empty set and intercepts all non-login page routes during route navigation, directing the user to the permission application page.
6. The front-end menu vertical privilege escalation protection method according to any one of claims 1 to 5, characterized in that, The full menu information covers all menus accessible under the current user's permissions, and includes a unique route address and route association attributes for each menu; the route association attributes include menu name, icon, hierarchy, and permission level; The collection of route addresses stored in localStorage adopts a flat structure, and if there are multiple user login scenarios, the storage key name is associated with the user's unique identifier; Routing actions include at least one of the following: entering a URL in a tab, browser forward or back navigation, menu clicks, and programmatic navigation.
7. A front-end menu vertical privilege escalation protection system, characterized in that, The system includes: The permission route caching module is used to receive all the valid menu information returned by the backend after the user logs in and passes authentication, extract the route address, perform standardization processing, and store it in localStorage immediately. The route interceptor module is used to intercept all route redirection requests from the front end, extract the target route address, and match and verify it with the set of valid route addresses in localStorage; The exception handling module is used to execute preset exception handling logic for unauthorized redirects when the target route verification fails. The cache synchronization module is used to update the cache when user permissions change and to clear the cache when the user logs out or the cache times out. The menu rendering module is used to render the page navigation menu based on the full menu information, ensuring that the menu display is consistent with the permission verification criteria.
8. The front-end menu vertical privilege escalation protection system according to claim 7, characterized in that, The permission routing cache module also has a data integrity verification function, as follows: After receiving the full menu information, verify whether it contains the route address field: If any field is missing or the format is incorrect, initiate a retry request. The route interceptor module covers all route navigation methods, including entering a URL in a tab, browser forward or back navigation, and programmatic navigation.
9. An electronic device, characterized in that, include: Memory and at least one processor; The memory stores computer-executed instructions; The at least one processor executes the computer execution instructions stored in the memory, causing the at least one processor to perform the front-end menu vertical privilege escalation protection method as described in any one of claims 1 to 6.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by the processor, implement the front-end menu vertical privilege escalation protection method as described in any one of claims 1 to 6.