Page display method of application program based on dynamic routing and related equipment

Abstract

The invention provides a page display method of an application program based on dynamic routing and related equipment. The method comprises the following steps: acquiring a user role identifier of a user role; matching a file path of a target page of the application program corresponding to the user role from a pre-constructed file path table of the application program according to the user role identifier, and adding the file path of the target page as routing data of the user role into a routing table; and determining permission information of a user role according to the routing data, and displaying a permission identifier corresponding to the permission information on a target menu in the target page. Therefore, when the file path of the target page of the application program corresponding to the user role is matched, the file path of the target page is matched from the pre-constructed file path table by depending on the user role identifier of the user role instead of depending on path configuration of a local page.

Description

Technical Field

[0001] The present disclosure relates to the field of data processing technology, and in particular to a page display method of an application program based on dynamic routing and related equipment. Background Art

[0002] The current website application has many users. To facilitate management, different application permissions can be configured for different user roles. However, when adding routing data, it is necessary to rely on the path configuration of the local page to obtain the file path of the page, which is cumbersome. Summary of the invention

[0003] In view of this, the purpose of the present disclosure is to propose a page display method of an application based on dynamic routing and related devices to solve or partially solve the above technical problems.

[0004] Based on the above purpose, the first aspect of the present disclosure proposes a page display method of an application based on dynamic routing, the method comprising:

[0005] Get the user role ID of the user role;

[0006] Matching the file path of the target page of the application corresponding to the user role from the pre-built file path table of the application according to the user role identifier, and adding the file path of the target page as routing data of the user role to the routing table;

[0007] The authority information of the user role is determined according to the routing data, and the authority identifier corresponding to the authority information is displayed on the target menu in the target page.

[0008] Based on the same inventive concept, the second aspect of the present disclosure proposes a page display device for an application based on dynamic routing, comprising:

[0009] A user role identification acquisition module configured to acquire a user role identification of a user role;

[0010] a routing data adding module, configured to match the file path of the target page of the application corresponding to the user role from the pre-built file path table of the application according to the user role identifier, and add the file path of the target page as the routing data of the user role to the routing table;

[0011] The target menu display module is configured to determine the permission information of the user role according to the routing data, and display the permission identification corresponding to the permission information on the target menu in the target page.

[0012] Based on the same inventive concept, the third aspect of the present disclosure proposes an electronic device, including a memory, a processor, and a computer program stored in the memory and executable by the processor, wherein the processor implements the method as described above when executing the computer program.

[0013] Based on the same inventive concept, a fourth aspect of the present disclosure proposes a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the method as described above.

[0014] Based on the same inventive concept, a fifth aspect of the present disclosure proposes a computer program product, including computer program instructions. When the computer program instructions are executed on a computer, the computer is enabled to execute the method described above.

[0015] From the above, it can be seen that the page display method and related equipment of the application based on dynamic routing provided by the present disclosure. Obtain the user role identifier of the user role. Match the file path of the target page of the application corresponding to the user role from the pre-built file path table of the application according to the user role identifier, and add the file path of the target page as the routing data of the user role to the routing table. In this way, when matching the file path of the target page of the application corresponding to the user role, it is not necessary to rely on the path configuration of the local page, but to rely on the user role identifier of the user role to match the file path of the target page from the pre-built file path table. Determine the permission information of the user role based on the routing data, and display the permission identifier corresponding to the permission information on the target menu in the target page. In this way, the permission information of the user role can be quickly determined based on the permission identifier displayed on the target menu. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the present disclosure or related technologies, the drawings required for use in the embodiments or related technical descriptions are briefly introduced below. Obviously, the drawings described below are only embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0017] Figure 1 A flowchart of a page display method of an application based on dynamic routing according to an embodiment of the present disclosure;

[0018] Figure 2 A flowchart of a method for configuring a routing table based on dynamic routing according to an embodiment of the present disclosure;

[0019] Figure 3 is a schematic diagram of target menus for different roles according to an embodiment of the present disclosure;

[0020] Figure 4 is a schematic diagram of a member menu of an embodiment of the present disclosure;

[0021] Figure 5 A schematic diagram of a membership expiration menu according to an embodiment of the present disclosure;

[0022] Figure 6 A schematic diagram of a member menu that prohibits clicking according to an embodiment of the present disclosure;

[0023] Figure 7 A schematic diagram of the structure of a page display device based on a dynamic routing application program according to an embodiment of the present disclosure;

[0024] Figure 8 It is a schematic diagram of the structure of an electronic device according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0025] In order to make the objectives, technical solutions and advantages of the present disclosure more clearly understood, the present disclosure is further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.

[0026] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present disclosure should be understood by people with ordinary skills in the field to which the present disclosure belongs. The "first", "second" and similar words used in the embodiments of the present disclosure do not indicate any order, quantity or importance, but are only used to distinguish different components. "Including" or "comprising" and similar words mean that the elements or objects appearing before the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0027] As mentioned above, how to avoid relying on the path configuration of local pages when adding routing data has become an important research issue.

[0028] Based on the above description, if Figure 1 As shown, the page display method of the application based on dynamic routing proposed in this embodiment includes:

[0029] Step 101: Obtain a user role identifier of a user role.

[0030] In specific implementation, different user roles correspond to different user role identifiers Code, and user roles correspond to user role identifiers one by one. The user role identifier Code is used to match the file path value of the target page of the application corresponding to the user role.

[0031] Step 102, matching the file path of the target page of the application corresponding to the user role from the pre-built file path table of the application according to the user role identifier, and adding the file path of the target page as routing data of the user role into the routing table.

[0032] In specific implementation, the pre-built file path table uses a key-value pair to store the correspondence between the file path and the user role identifier. Different user role identifiers Code correspond to different file paths (value). According to the user role identifier Code, the file name (key) is matched from the pre-built file path table of the application, and the file path (value) is determined according to the file name (key). The file path of the target page is used as the routing data of the user role, and the routing data is added to the routing table.

[0033] Step 103: determining the authority information of the user role according to the routing data, and displaying the authority identifier corresponding to the authority information on the target menu in the target page.

[0034] In specific implementation, the permission information of the user role is determined according to the routing data, the version type corresponding to the permission information is judged, and the permission information corresponding to the permission information is displayed on the target menu in the target page, so that the displayed target menu is the menu corresponding to the permission information of the user role.

[0035] Through the above embodiment, the user role identifier of the user role is obtained. According to the user role identifier, the file path of the target page of the application corresponding to the user role is matched from the pre-built file path table of the application, and the file path of the target page is added to the routing table as the routing data of the user role. In this way, when matching the file path of the target page of the application corresponding to the user role, it is not necessary to rely on the path configuration of the local page, but to rely on the user role identifier of the user role to match the file path of the target page from the pre-built file path table. The permission information of the user role is determined according to the routing data, and the permission identifier corresponding to the permission information is displayed on the target menu in the target page. In this way, the permission information of the user role can be quickly determined according to the permission identifier displayed on the target menu.

[0036] In some embodiments, step 101 includes:

[0037] Step 1011, determining whether the user has logged into the application through the routing entry of the dynamic routing.

[0038] Step 1012, in response to determining that the user has not logged into the application through the routing entry of the dynamic routing, jump to the login page of the application and display login prompt information for the user to log in to the application on the login page according to the login prompt information.

[0039] Step 1013, in response to determining that the user has logged into the application through the routing entry of the dynamic routing, obtaining the user role identifier of the user role of the user from the interface data when the user logged in through the routing entry of the dynamic routing.

[0040] In specific implementation, dynamic routing is used to handle the permissions of multi-role users, so it is necessary to determine whether the application is logged in. Only when the application is logged in can the subsequent steps be executed, the routing data is added to the routing table and the target page is jumped. When the application is not logged in, it jumps to the login page of the application and prompts the user to log in to the application.

[0041] Among them, whether the application has been logged in is judged based on whether the token already exists. A token is a token used to verify the user's identity. It can be a temporary, one-time code or a long-term key used to access protected resources.

[0042] Figure 2 FIG. 1 is a flow chart of a method for configuring a routing table based on dynamic routing according to an embodiment of the present disclosure. Figure 2 As shown, it is determined whether the user has logged in to the application through the routing entrance of dynamic routing. When the user has not logged in to the application through the routing entrance of dynamic routing, jump to the login page of the application. When the user has logged in to the application through the routing entrance of dynamic routing, determine whether there is routing data. When there is no routing data, request the routing tree by initiating an interface request, the routing tree is recursively processed into routing data and added to the routing table in a loop, and custom permission control instructions are added to the routing template to complete the rendering of the routing menu, complete the other logic of the routing entrance, and complete the routing jump. When routing data already exists, complete the other logic of the routing entrance, and complete the routing jump.

[0043] Through the above scheme, before obtaining the user role identifier of the user's user role, it is first determined whether the user has logged in to the application through the routing entrance of the dynamic route, and the target page can be jumped after the application is logged in. When the application is not logged in, it jumps to the login page of the application, which is convenient for the user to log in to the application on the login page, so that the target page can be jumped after the user logs in to the application.

[0044] In some embodiments, the method further includes: determining whether there is routing data of the target page corresponding to the user role in the routing table;

[0045] Step 103 includes: Step 103A, in response to determining that routing data of the target page corresponding to the user role exists in the routing table, determining the permission information of the user role according to the routing data, and displaying the permission identifier corresponding to the permission information on the target menu in the target page.

[0046] Step 102 includes: Step 102A, in response to determining that the routing data of the target page corresponding to the user role does not exist in the routing table, matching the file path of the target page of the application corresponding to the user role from a pre-built file path table of the application according to the user role identifier, and adding the file path of the target page as the routing data of the user role to the routing table.

[0047] In specific implementation, after the user logs in to the application program and before obtaining the user role identifier of the user role, it also includes: determining whether routing data of the target page corresponding to the user role already exists in the routing table.

[0048] After matching the file path of the target page and using it as routing data, the routing data is saved in the global state vuex. vuex is a state management mode developed specifically for Vue.js applications. vuex uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.

[0049] Each time a user jumps to the target page after logging into the application, it will determine whether the routing data already exists in the routing table. If the routing data already exists in the routing table, the user will directly jump to the target page. If the routing data does not exist in the routing table, the file path of the target page is matched according to the user role ID of the user role, and the file path of the target page is added to the routing table as the routing data of the user role, and then the user will jump to the target page.

[0050] Through the above solution, when routing data already exists in the routing table, it jumps directly to the target page without matching the file path of the target page again, nor adding the file path of the target page as routing data to the routing table again, which can reduce server pressure and avoid wasting local resources.

[0051] In some embodiments, the pre-construction process of the file path table includes:

[0052] Step 10A, traversing all page files in the page folder corresponding to the application; wherein the page folder includes multiple page files for the same page, and the multiple page files correspond to pages corresponding to different user roles of the same page.

[0053] Step 10B: construct the file path table based on the file name and file path of the page file.

[0054] In specific implementation, all page files are traversed in the page folder corresponding to the application, and a file path table is constructed based on the file name key and file path value of each page file. The file path table includes the file name keys and file path values ​​of multiple page files.

[0055] The program code for building the file path table is as follows:

[0056]

[0057]

[0058] Through the above scheme, based on the file name and file path of the page file, the constructed file path table is more comprehensive, ensuring that the file path table contains the file paths of all page files, thereby ensuring that the file path of the target page of the application corresponding to the user role can be matched from the pre-built file path table of the application according to the user role identifier.

[0059] In some embodiments, step 102 includes:

[0060] Step 1021 : Match the user role identifier of the user role with the file name in the pre-built file path table of the application program to determine the file path of the target page corresponding to the user role.

[0061] Step 1022: determine the routing object of the user role, and determine the permission information of the user role according to the routing meta-information of the routing object.

[0062] Step 1023: Use the file path of the target page and the permission information as routing data of the user role, and add the routing data to a routing table.

[0063] In specific implementation, the routing data includes the file path of the target page and the permission information of the user role. The multiple page files in the pre-built file path table are traversed recursively to obtain the file name key that matches the user role identification Code of the user role, and the file path value is determined according to the file name key. The routing meta information of the routing object is used to store the routing attribute information, and the permission information of the user role is determined according to the routing meta information of the routing object.

[0064] The program code for recursive processing is as follows:

[0065]

[0066] In the above program code, the purpose of the initRouteItems function is to recursively traverse the file path table.

[0067] Through the above scheme, by recursively traversing multiple page files in the pre-built file path table, the file path corresponding to the user role identifier of the user role can be accurately matched, without relying on the path configuration of the local page, and completely relying on the user role identifier of the user role. The file path of the target page is added to the routing table as routing data, and the target page can be jumped. The permission information of the user role is added to the routing table as routing data, and the permission identifier corresponding to the permission information can be displayed on the target menu in the target page.

[0068] In some embodiments, after step 1022, the method further includes:

[0069] Step 1022A: Determine the page level of the target page according to the routing path information of the routing object.

[0070] Step 1022B, determining the page name, routing component, routing level and routing global information of the target page according to the routing meta information of the routing object.

[0071] Step 1022C: judging whether the target menu in the target page is hidden according to the hidden attribute information of the routing object.

[0072] Step 1022D: Determine whether there is a sub-route under the current route corresponding to the route object according to the sub-route attribute information of the route object.

[0073] In specific implementation, the routing object of the user role includes: routing path information, routing meta information, hidden attribute information and sub-routing attribute information. Among them, the routing path information is used to determine the page level of the target page. The routing path information is a combination of the parent node and child node of the target page. When the target page is a child node, the parent node is spliced. When the target page is the deepest child node, all parent nodes are spliced. Routing meta information is used to store routing attribute information, such as the page name of the target page, routing components (routing icon), routing level (routing level) and routing global information, among which the most important is routing global information. Hidden attribute information is used to determine whether the target menu in the target page is hidden in the menu bar. Sub-routing attribute information is used to determine whether there is a sub-route under the current route corresponding to the routing object.

[0074] The program code to determine the routing data is as follows:

[0075]

[0076]

[0077] In the above program code, path represents path information; meta represents routing meta information; hidden represents hidden attribute information; and children represents child routing attribute information.

[0078] Through the above scheme, the page level of the target page is determined according to the routing path information of the routing object, and the jump to the target page can be achieved according to the page level. The permission information of the user role is determined according to the routing meta information of the routing object, and the permission identifier corresponding to the permission information can be displayed on the target menu in the target page. According to the hidden attribute information of the routing object, it is determined whether the target menu in the target page is hidden, thereby determining the menu displayed in the target page. According to the sub-route attribute information of the routing object, it is possible to determine whether there is a sub-route under the current route corresponding to the routing object.

[0079] In some embodiments, step 1023 includes:

[0080] Step 10231, adding the routing data to the routing table in a cyclic addition manner through the add routing function in the routing algorithm framework.

[0081] In the specific implementation, through the routing algorithm framework (vue-router) in the add routing function (addRoute function), the processed routing data is added to the routing table in a loop, and the normal routing jump can be completed, and it can jump to the target page.

[0082] Through the above scheme, the routing data is added to the routing table in a circular adding manner, which can ensure that all the routing data is added to the routing table and avoid missing routing data.

[0083] In some embodiments, after step 1023, the method further includes:

[0084] Step 1023A, determining whether the routing data has been added.

[0085] Step 1023B, in response to determining that the routing data is added completely, setting an added flag of the routing data by adding an asynchronous target menu data attribute.

[0086] In specific implementation, when the route data is added, the added flag of the route data is set by adding the asynchronous target menu data attribute (isAddAsyncMenuData attribute) to indicate that the route data has been added. If the route data has been added, there is no need to add the route data again to avoid the error of infinitely repeated addition of route data.

[0087] Through the above scheme, when the route data is added, the added flag of the route data is set by adding the asynchronous target menu data attribute. In this way, the completion of the route data addition can be identified according to the added flag, avoiding the error of repeated addition of route data.

[0088] In some embodiments, step 103 includes:

[0089] Step 1031, determining the permission information of the user role according to the routing data, and determining the version type corresponding to the permission information.

[0090] Step 1032, in response to determining that the version type of the permission information is a membership type, inserting a pre-stored membership icon component under the current routing node, and displaying a membership logo on the target menu in the target page.

[0091] In specific implementation, the permission information of the user role includes at least one of the following: ordinary user role, member user role, expired member user role and disabled user role. The version type corresponding to the ordinary user role is ordinary type, the version type corresponding to the member user role is member type (versionType), the version type corresponding to the expired member user role is member expired type (versionTypeExpire), and the version type corresponding to the disabled user role is disabled type.

[0092] Figure 3 FIG. 1 is a schematic diagram of target menus for different roles in an embodiment of the present disclosure. Figure 3As shown, when the permission information of the determined user role is a common user role, the version type is a common type, and the target menu in the target page is a common menu ( Figure 3 1); when the permission information of the determined user role is a member user role, the version type is the member type, and the target menu in the target page is the member menu ( Figure 3 2); when the permission information of the determined user role is a disabled role user, the version type is a disabled type, and the target menu in the target page is a prohibited click menu ( Figure 3 3) in the menu.

[0093] When the version type of the permission information is a member type, a pre-stored member icon component (vipicon) is inserted under the current routing node (dom node), and the member logo is displayed on the target menu in the target page. Figure 4 Schematic diagram of the member menu of the embodiment of the present disclosure. Figure 4 As shown, a member identification vip is displayed on the target menu in the target page, so that the displayed target menu is a member menu.

[0094] In programming, a DOM (Document Object Model) node is part of the document object model, which is an interface that provides access to the structured representation of HTML and XML documents. A DOM node can represent an HTML element, attribute, or text content.

[0095] Through the above scheme, when the version type of the permission information is a membership type, by inserting a pre-stored member icon component under the current routing node, the member logo can be displayed on the target menu in the target page, making it convenient for users to quickly determine that the target menu is a member menu based on the member logo on the target menu.

[0096] In some embodiments, step 1032 includes:

[0097] Step 10321, obtain the current routing node in the routing data through the routing algorithm framework custom instructions.

[0098] Step 10322: insert the pre-stored member icon component into the current routing node through an additional algorithm.

[0099] In the specific implementation, the current routing node (dom node) is directly obtained in the routing data through the custom instructions of the routing algorithm framework vue. Through the additional algorithm (Vue.extend algorithm), the pre-stored member icon component (vip icon component) is inserted into the current routing node (dom node) using the add function (append() function).

[0100] Among them, the append() function is used to append elements to the end of a list. The append() function is a commonly used method in programming, which is used to add one or more elements to the end of a list, string, or other iterable objects. This method has similar applications in different programming languages, but the specific usage and supported parameter types may vary.

[0101] Through the above scheme, the current routing node can be accurately obtained through the routing algorithm framework automatically with instructions. The pre-stored member icon component can be accurately inserted under the current routing node through the additional algorithm, so that the member logo is displayed on the target menu in the target page.

[0102] In some embodiments, after step 1032, the method further includes:

[0103] Step 10323, determine whether the version type of the permission information is a member expiration type.

[0104] Step 10324, in response to determining that the version type of the permission information is a membership expiration type, an event monitoring algorithm is added to bind a mouse-in event and a mouse-out event on the current routing node, and a membership expiration prompt information is displayed in the surrounding area of ​​the target menu in the target page.

[0105] In specific implementation, the additional algorithm Vue.extend is used to insert the member expiration prompt information component in the surrounding area of ​​the target menu, but the member expiration prompt information is only displayed when the mouse moves into the target menu. In this way, there is no need to insert the member expiration prompt information component in each node, avoiding wasting too much performance and increasing browser pressure.

[0106] When the version type of the permission information is the member expiration type, the mouse entry event (mouseenter event) and mouse exit event (mouseeleave event) are bound to the current routing node (dom node) by adding an event listening algorithm (addEventListener algorithm).

[0107] When the mouse enter event (mouseenter event) is monitored, the member expiration reminder information is displayed in the surrounding area of ​​the target menu in the target page. When the mouse exit event (mouseleave event) is monitored, the member expiration reminder information is canceled.

[0108] Through the above solution, when the mouse enters the event, the member expiration prompt information is displayed, and when the mouse leaves the event, the member expiration prompt information is cancelled. It is not necessary to insert the member expiration prompt information component in each node, avoiding wasting too much performance and increasing the pressure on the browser. The member expiration prompt information is displayed in the surrounding area of ​​the target menu in the target page to avoid the member expiration prompt information blocking the target menu.

[0109] In some embodiments, step 10324 includes:

[0110] Step 10324A, in response to determining that the target menu in the target page receives the mouse move event, obtain the position information of the current routing node, determine the display position of the membership expiration reminder information in the surrounding area of ​​the target menu in the target page according to the position information, and display the membership expiration reminder information at the display position in the surrounding area of ​​the target menu in the target page.

[0111] Step 10324B, in response to determining that the target menu in the target page receives the mouse-out event, canceling the display of the membership expiration reminder information in the surrounding area of ​​the target menu in the target page.

[0112] In specific implementation, when the target menu receives a mouse move event, the member expiration prompt information is displayed in the surrounding area of ​​the target menu in the target page. The specific process of displaying the member expiration prompt information is: obtain the position information of the current routing node (dom node) through el.getBoundingClientRect, and determine the display position in the surrounding area of ​​the target menu according to the position information of the current routing node (dom node).

[0113] Among them, el.getBoundingClientRect is a JavaScript DOM interface that returns a ClientRect object, which contains the size of the element and its position relative to the view window.

[0114] Figure 5 FIG. 1 is a schematic diagram of a membership expiration menu according to an embodiment of the present disclosure. Figure 5 As shown, the member logo vip is displayed on the target menu in the target page, and when the mouse moves into the target menu, the member expiration prompt information is displayed. When the mouse moves out of the target menu, the member expiration prompt information is cancelled, so that the displayed target menu is a member expiration menu.

[0115] Through the above scheme, when the mouse moves into the target menu, the display position is determined in the surrounding area of ​​the target menu according to the position information of the current routing node, and the member expiration prompt information is displayed at the display position, so that the pop-up window of the member expiration prompt information will not exceed the browser and will not block the target menu, thereby enhancing the user experience. When the mouse moves out of the target menu, the prompt information is cancelled, which can reduce the pressure on the browser.

[0116] In some embodiments, after step 103, the method further includes:

[0117] Step 1033, determining whether the target menu is a click-forbidden menu.

[0118] Step 1034, in response to determining that the target menu is a click-forbidden menu, bind a click event on the current routing node by adding an event monitoring algorithm, and add a click event blocking function to display the click-forbidden target menu on the target page.

[0119] In specific implementation, when the target menu meets the unclickable condition, it is determined that the target menu is a click-forbidden menu. When the target menu is a click-forbidden menu, by adding an event listening algorithm (addEventListener algorithm) to bind the click event (click event), and by adding a click event blocking function (event.stopImmediatePropagation() function), the click-forbidden target menu displayed on the target page can disable the click event and not respond to the received click event. When the mouse clicks the click-forbidden target menu, the click-forbidden target menu does not respond.

[0120] The click event occurs when a mouse button is pressed and released on an object, and occurs when the value of a control changes. The main function of the event.stopImmediatePropagation() function is to prevent the execution of the same type of event listening function of the same element, and to prevent the event from continuing to propagate in the current routing node (DOM node).

[0121] The target menus that cannot be clicked include: a common menu that cannot be clicked and a member menu that cannot be clicked. The common menu that cannot be clicked is gray and does not contain a member ID VIP. The member menu that cannot be clicked is gray and contains a member ID VIP.

[0122] Figure 6 FIG. 1 is a schematic diagram of a member menu that prohibits clicking according to an embodiment of the present disclosure. Figure 6 As shown, when the target menu is a member menu that is prohibited from being clicked, the target menu is gray and contains a member identification VIP.

[0123] Through the above scheme, when the target menu is a prohibited click menu, the click event is bound to the current routing node by adding an event monitoring algorithm, and a click event blocking function is added, so that the prohibited click target menu displayed on the target page can not respond to the click event, and thus can not respond when the mouse clicks on the prohibited click target menu.

[0124] In some embodiments, after step 1034, the method further includes:

[0125] Step 1034A, in response to determining that the click-disabled target menu receives the click event, does not respond to the click event, and changes the mouse pointer style to a disabled style.

[0126] In specific implementation, the click event is a mouse click on the prohibited click target menu, and the disabled style is an unavailable pointer. When the mouse clicks the prohibited click target menu, the prohibited click target menu does not respond, and the mouse pointer style is changed from the default arrow cursor to an unavailable pointer.

[0127] The arrow cursor is the standard mouse cursor, which is a small arrow pointing to the upper left and is mainly used for a section of navigation in most programs. The unavailable pointer is a small circle with a line through it, indicating that the resource is currently unavailable.

[0128] Through the above solution, when the mouse clicks the prohibited target menu, the prohibited target menu does not respond. By changing the mouse pointer style to a disabled style, the user can quickly determine the reason why the target menu does not respond according to the mouse pointer style.

[0129] Through the above embodiment, the user role identifier of the user role is obtained. According to the user role identifier, the file path of the target page of the application corresponding to the user role is matched from the pre-built file path table of the application, and the file path of the target page is added to the routing table as the routing data of the user role. In this way, when matching the file path of the target page of the application corresponding to the user role, it is not necessary to rely on the path configuration of the local page, but to rely on the user role identifier of the user role to match the file path of the target page from the pre-built file path table. The permission information of the user role is determined according to the routing data, and the permission identifier corresponding to the permission information is displayed on the target menu in the target page. In this way, the permission information of the user role can be quickly determined according to the permission identifier displayed on the target menu.

[0130] It should be noted that the embodiments of the present disclosure may be further described in the following manner:

[0131] 1. Add a global routing guard to the entry file in Vue.

[0132] Each page jump will pass through the entry file, which is convenient for doing some global logic processing, such as processing routing related logic first.

[0133] 2. Determine whether the application is logged in.

[0134] Dynamic routing is used to handle the permissions of multi-role users, so it is necessary to determine whether the application is logged in. If the application is logged in, it will proceed to the next step. If the application is not logged in, it will jump to the login page and prompt the user to log in.

[0135] Login is determined by whether the token exists. Each time a redirect occurs, the routing guard will first determine whether the user has logged in, which is a prerequisite for subsequent logic processing.

[0136] 3. When the application is logged in, determine whether the routing data already exists.

[0137] After processing the routing data, it will be saved in the global state vuex. Every time you jump, it will determine whether the routing data already exists. Although it is completely OK not to determine, if you do not determine, the relevant logic of dynamic routing will be processed every time, which will increase the pressure on the server and waste local resources. It is completely unnecessary. So if the routing data already exists, go directly to the next step.

[0138] 4. The routing data does not exist.

[0139] First, an API request will be sent to the backend to get routing data. If the backend does not return routing data, the frontend will directly throw an exception and prompt. If the backend successfully returns routing data, the dynamic routing function will be executed.

[0140] 4.1 Build the file path table.

[0141] By using webpack's require,context, a context can be obtained through this function, so as to realize engineering automation (traverse the files in the folder, obtain the specified files from them, and automatically import the modules) and complete the one-time introduction of all files. The specific implementation is as follows:

[0142]

[0143] 4.2 Execute dynamic routing processing function.

[0144] The routing metadata is a tree structure, so a recursive method is used. The routing object is as follows:

[0145]

[0146]

[0147] The Path path is a combination of parent and child nodes. If it is a child node, it will be spliced ​​with the parent node. The deepest child node will splice all parent nodes. This path also needs to match the file path in the end.

[0148] Meta stores other related attributes of the route, such as the name displayed on the page, the route icon, the route level, etc. The most important thing is the global information of the route.

[0149] Hidden indicates whether it exists in the menu bar. Some sub-page menus do not need to be displayed on the page, and this attribute is used to determine whether it is hidden.

[0150] Children contains child page data, if any child pages exist.

[0151] The recursive implementation is as follows:

[0152]

[0153] 4.3 Add to the routing table.

[0154] By adding the routing function (addRoute function) of the routing algorithm framework (vue-router), the processed routing data is added to the routing table in a loop to complete the normal routing jump, and the asynchronous target menu data attribute (isAddAsyncMenuData attribute) is added to indicate whether the routing data has been added. If the routing data has been added, there is no need to add it again, otherwise there will be a bug of infinite repeated addition.

[0155] 5. Permission control and global prompts.

[0156] Through the vue custom directive v-auth, add the v-auth directive in the .vue template of the menu and pass in the current route object to determine the permission information and hover prompt. The specific implementation is as follows:

[0157] 5.1 Receive the current routing object.

[0158] Get the meta information in the current route object, which contains permission information, such as the membership type (versionType) or membership expiration type (versionTypeExpire) in the project, that is, whether the route is VIP or whether the VIP has expired.

[0159] 5.2 If the current route is VIP, add the VIP icon and display it on the target page.

[0160] Through the additional algorithm (Vue.extend algorithm), the pre-stored icon component is inserted into the current routing node (dom node). Through the custom instructions of the routing algorithm framework vue, the current routing node (dom node) is directly obtained, and the member icon component (vip icon component) is inserted through the addition function (append() function).

[0161] 5.3 If the current route is VIP and expires, you also need to add a hover event to display a prompt message.

[0162] Although the prompt information component can also be inserted through the additional algorithm (Vue.extend algorithm), the member expiration prompt information will only be displayed when hovering, unlike the icon which needs to be displayed on the page all the time. Therefore, it is not necessary to insert the prompt information component into each node, otherwise it will waste too much performance and increase the pressure on the browser.

[0163] By adding an event listening algorithm (addEventListener algorithm), the mouse entry event (mouseenter event) and mouse exit event (mouseeleave event) are bound to the current routing node (dom node), and the pre-stored method is executed to display the membership expiration prompt information. In addition, the membership expiration prompt information will only be displayed when the mouse enters the target menu, and the membership expiration prompt information component will be removed when the mouse moves out, so as not to waste browser performance.

[0164] At the same time, when displaying the prompt information pop-up window, the location information of the current routing node (dom node) will be obtained through el.getBoundingClientRect, and the display position of the member expiration prompt information pop-up window will be calculated, so that the pop-up window will not exceed the browser and affect the user experience. And the member expiration prompt information will be passed in for display, so that the member expiration prompt information can be configured.

[0165] 5.4 Permission control, whether it is clickable.

[0166] When the target menu meets the unclickable conditions, disable the click jump event of the routing node.

[0167] Also use the addEventListener algorithm to bind the click event, add the click event blocking function (event.stopImmediatePropagation() function), you can disable the click event and change the mouse pointer style.

[0168] Through the above embodiment, when matching the file path of the target page of the application corresponding to the user role, it is not necessary to rely on the path configuration of the local page, but rely on the user role identifier of the user role to match the file path of the target page from the pre-built file path table, thereby improving the user experience.

[0169] It should be noted that the method of the embodiment of the present disclosure can be performed by a single device, such as a computer or a server. The method of the present embodiment can also be applied in a distributed scenario and completed by multiple devices cooperating with each other. In the case of such a distributed scenario, one of the multiple devices can only perform one or more steps in the method of the embodiment of the present disclosure, and the multiple devices will interact with each other to complete the described method.

[0170] It should be noted that the above describes some embodiments of the present disclosure. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the above embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0171] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, the present disclosure also provides a page display device for an application based on dynamic routing.

[0172] refer to Figure 7 , the page display device of the application based on dynamic routing includes:

[0173] A user role identification acquisition module 301 is configured to acquire a user role identification of a user role;

[0174] The routing data adding module 302 is configured to match the file path of the target page of the application corresponding to the user role from the pre-built file path table of the application according to the user role identifier, and add the file path of the target page as the routing data of the user role to the routing table;

[0175] The target menu display module 303 is configured to determine the permission information of the user role according to the routing data, and display the permission identification corresponding to the permission information on the target menu in the target page.

[0176] In some embodiments, the user role identification acquisition module 301 includes:

[0177] a login determination unit configured to determine whether the user has logged into the application through a routing entry of the dynamic routing;

[0178] A login page jump unit, configured to jump to a login page of the application in response to determining that the user has not logged in to the application through a routing entry of a dynamic route, and display login prompt information so that the user can log in to the application on the login page according to the login prompt information;

[0179] The user role identification acquisition unit is configured to, in response to determining that the user has logged into the application through the routing entry of the dynamic routing, acquire the user role identification of the user role of the user from the interface data when the user logs in through the routing entry of the dynamic routing.

[0180] In some embodiments, the apparatus further comprises: a routing data determination module configured to: determine whether routing data of the target page corresponding to the user role exists in the routing table;

[0181] The target menu display module 303 is specifically configured to: in response to determining that the routing data of the target page corresponding to the user role exists in the routing table, determine the permission information of the user role according to the routing data, and display the permission identifier corresponding to the permission information on the target menu in the target page;

[0182] The routing data adding module 302 is specifically configured to: in response to determining that the routing data of the target page corresponding to the user role does not exist in the routing table, match the file path of the target page of the application corresponding to the user role from a pre-built file path table of the application according to the user role identifier, and add the file path of the target page as the routing data of the user role to the routing table.

[0183] In some embodiments, the device further includes a file path table construction module; the file path table construction module includes:

[0184] A page file traversal unit is configured to traverse all page files in a page folder corresponding to the application; wherein the page folder includes multiple page files for the same page, and the multiple page files correspond to pages corresponding to different user roles of the same page;

[0185] The file path table construction unit is configured to construct the file path table based on the file name and file path of the page file.

[0186] In some embodiments, the routing data adding module 302 includes:

[0187] A file path determination unit is configured to match the user role identifier of the user role with the file name in the pre-built file path table of the application program to determine the file path of the target page corresponding to the user role;

[0188] a permission information determining unit, configured to determine a routing object of the user role, and determine permission information of the user role according to routing meta information of the routing object;

[0189] The routing data adding unit is configured to use the file path of the target page and the permission information as the routing data of the user role, and add the routing data to the routing table.

[0190] In some embodiments, after determining the routing object of the user role, the routing data adding module 302 further includes:

[0191] A page level determination unit, configured to determine the page level of the target page according to the routing path information of the routing object;

[0192] A routing meta-information determining unit, configured to determine the page name, routing component, routing level and routing global information of the target page according to the routing meta-information of the routing object;

[0193] a target menu hiding determination unit, configured to determine whether the target menu in the target page is hidden according to the hidden attribute information of the routing object;

[0194] The sub-route determination unit is configured to determine whether there is a sub-route under the current route corresponding to the route object according to the sub-route attribute information of the route object.

[0195] In some embodiments, the routing data adding unit includes:

[0196] The routing data adding subunit is configured to add the routing data to the routing table in a cyclic adding manner through an adding routing function in the routing algorithm framework.

[0197] In some embodiments, after adding the routing data to the routing table, the routing data adding module 302 further includes:

[0198] An adding judgment unit, configured to judge whether the routing data has been added;

[0199] The added flag setting unit is configured to set the added flag of the routing data by adding an asynchronous target menu data attribute in response to determining that the routing data is added completely.

[0200] In some embodiments, the target menu display module 303 includes:

[0201] a first version type determination unit, configured to determine permission information of a user role according to the routing data, and determine a version type corresponding to the permission information;

[0202] The member identification display unit is configured to, in response to determining that the version type of the permission information is a member type, insert a pre-stored member icon component under the current routing node and display the member identification on the target menu in the target page.

[0203] In some embodiments, the member identification display unit includes:

[0204] The current routing node acquisition subunit is configured to acquire the current routing node in the routing data through a routing algorithm framework custom instruction;

[0205] The member icon component inserting subunit is configured to insert the pre-stored member icon component under the current routing node through an additional algorithm.

[0206] In some embodiments, in response to determining that the version type of the permission information is a VIP type, inserting a pre-stored VIP icon component under the current routing node, and displaying a member logo on the target menu in the target page, the target menu display module 303 further includes:

[0207] A second version type determination unit is configured to determine whether the version type of the permission information is a member expiration type;

[0208] The member expiration prompt information display unit is configured to respond to determining that the version type of the permission information is a member expiration type, bind the mouse entry event and the mouse exit event on the current routing node by adding an event monitoring algorithm, and display the member expiration prompt information in the surrounding area of ​​the target menu in the target page.

[0209] In some embodiments, the member expiration reminder information display unit includes:

[0210] The member expiration prompt information display subunit is configured to, in response to determining that the target menu in the target page receives the mouse move event, obtain the position information of the current routing node, determine the display position of the member expiration prompt information in the surrounding area of ​​the target menu in the target page according to the position information, and display the member expiration prompt information at the display position in the surrounding area of ​​the target menu in the target page;

[0211] The member expiration prompt information display cancellation subunit is configured to cancel the display of the member expiration prompt information in the surrounding area of ​​the target menu in the target page in response to determining that the target menu in the target page receives the mouse move-out event.

[0212] In some embodiments, after determining the permission information of the user role according to the routing data and displaying the permission identification corresponding to the permission information on the target menu in the target page, the device further includes:

[0213] A click-forbidden menu determination module is configured to determine whether the target menu is a click-forbidden menu;

[0214] The module for displaying a target menu forbidding clicking is configured to, in response to determining that the target menu is a menu forbidding clicking, bind a click event on the current routing node by adding an event monitoring algorithm, and add a click event blocking function, so as to display a target menu forbidding clicking on the target page.

[0215] In some embodiments, after displaying the prohibited click target menu on the target page, the prohibited click target menu display module further includes:

[0216] The mouse pointer style changing unit is configured to, in response to determining that the click-prohibited target menu receives the click event, not respond to the click event and change the mouse pointer style to a disabled style.

[0217] For the convenience of description, the above device is described by dividing it into various modules according to its functions. Of course, when implementing the present disclosure, the functions of each module can be implemented in the same or multiple software and / or hardware.

[0218] The device of the above embodiment is used to implement the corresponding page display method of the application based on dynamic routing in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be repeated here.

[0219] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, the present disclosure also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the page display method of the application based on dynamic routing described in any of the above embodiments is implemented.

[0220] Figure 8A more specific schematic diagram of the hardware structure of an electronic device provided in this embodiment is shown, and the device may include: a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040 are connected to each other through the bus 1050 in the device.

[0221] The processor 1010 can be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0222] The memory 1020 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 may store an operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program codes are stored in the memory 1020 and are called and executed by the processor 1010.

[0223] The input / output interface 1030 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0224] The communication interface 1040 is used to connect a communication module (not shown in the figure) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB (Universal Serial Bus), network cable, etc.), or through a wireless mode (such as mobile network, WIFI (Wireless Fidelity, wireless network communication technology), Bluetooth, etc.).

[0225] The bus 1050 includes a path that transmits information between the various components of the device (eg, the processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040).

[0226] It should be noted that, although the above device only shows the processor 1010, the memory 1020, the input / output interface 1030, the communication interface 1040 and the bus 1050, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiments of the present specification, and does not necessarily include all the components shown in the figure.

[0227] The electronic device of the above embodiment is used to implement the page display method of the application based on dynamic routing corresponding to any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be repeated here.

[0228] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, the present disclosure also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the page display method of the dynamic routing-based application as described in any of the above embodiments.

[0229] The computer-readable medium of this embodiment includes permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0230] The computer instructions stored in the storage medium of the above embodiment are used to enable the computer to execute the page display method of the application based on dynamic routing as described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0231] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, the present disclosure also provides a computer program product, including computer program instructions. When the computer program instructions are executed on a computer, the computer executes the page display method of the dynamic routing-based application as described in any of the above embodiments.

[0232] The computer program instructions of the computer program product of the above embodiment are used to enable the computer to execute the page display method of the application based on dynamic routing as described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0233] Those skilled in the art should understand that the discussion of any of the above embodiments is merely illustrative and is not intended to imply that the scope of the present disclosure (including the claims) is limited to these examples. Based on the concept of the present disclosure, the technical features in the above embodiments or different embodiments may be combined, the steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present disclosure as described above, which are not provided in detail for the sake of simplicity.

[0234] In addition, to simplify the description and discussion, and in order not to make the embodiments of the present disclosure difficult to understand, the known power / ground connections to the integrated circuit (IC) chips and other components may or may not be shown in the provided figures. In addition, the device can be shown in the form of a block diagram to avoid making the embodiments of the present disclosure difficult to understand, and this also takes into account the fact that the details of the implementation of these block diagram devices are highly dependent on the platform on which the embodiments of the present disclosure will be implemented (that is, these details should be fully within the scope of understanding of those skilled in the art). Where specific details (e.g., circuits) are set forth to describe exemplary embodiments of the present disclosure, it is apparent to those skilled in the art that the embodiments of the present disclosure can be implemented without these specific details or with changes in these specific details. Therefore, these descriptions should be considered illustrative rather than restrictive.

[0235] Although the present disclosure has been described in conjunction with specific embodiments of the present disclosure, many replacements, modifications and variations of these embodiments will be apparent to those skilled in the art from the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may use the embodiments discussed.

[0236] The embodiments of the present disclosure are intended to cover all such substitutions, modifications and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present disclosure should be included in the scope of protection of the present disclosure.

Claims

1. A page display method for an application based on dynamic routing, characterized in that: The method comprises: Get the user role ID of the user role; Matching the file path of the target page of the application corresponding to the user role from the pre-built file path table of the application according to the user role identifier, and adding the file path of the target page as routing data of the user role to the routing table; The authority information of the user role is determined according to the routing data, and the authority identifier corresponding to the authority information is displayed on the target menu in the target page.

2. The method according to claim 1, characterized in that The step of obtaining the user role identifier of the user role includes: Determining whether the user has logged into the application through a routing entry of a dynamic route; In response to determining that the user has not logged into the application through the routing entry of the dynamic routing, jump to the login page of the application and display login prompt information for the user to log into the application on the login page according to the login prompt information; In response to determining that the user has logged into the application through a routing entry of dynamic routing, a user role identifier of the user role of the user is obtained from interface data when the user logs in through the routing entry of dynamic routing.

3. The method according to claim 1, characterized in that The method further includes: determining whether there is routing data of the target page corresponding to the user role in the routing table; The determining the permission information of the user role according to the routing data, and displaying the permission identification corresponding to the permission information on the target menu in the target page, comprises: in response to determining that the routing data of the target page corresponding to the user role exists in the routing table, determining the permission information of the user role according to the routing data, and displaying the permission identification corresponding to the permission information on the target menu in the target page; The matching the file path of the target page of the application corresponding to the user role from a pre-built file path table of the application according to the user role identifier, and adding the file path of the target page as routing data of the user role to the routing table includes: in response to determining that the routing data of the target page corresponding to the user role does not exist in the routing table, matching the file path of the target page of the application corresponding to the user role from a pre-built file path table of the application according to the user role identifier, and adding the file path of the target page as routing data of the user role to the routing table.

4. The method according to claim 1, characterized in that: The pre-construction process of the file path table includes: Traversing all page files in a page folder corresponding to the application; wherein the page folder includes multiple page files for the same page, and the multiple page files correspond to pages corresponding to different user roles of the same page; The file path table is constructed based on the file name and file path of the page file.

5. The method according to claim 1, characterized in that The matching the file path of the target page of the application corresponding to the user role from the pre-built file path table of the application according to the user role identifier, and adding the file path of the target page as the routing data of the user role to the routing table includes: Matching the user role identifier of the user role with the file name in the pre-built file path table of the application program to determine the file path of the target page corresponding to the user role; Determine a routing object of the user role, and determine permission information of the user role according to routing meta information of the routing object; The file path of the target page and the permission information are used as routing data of the user role, and the routing data is added to a routing table.

6. The method according to claim 5, characterized in that After determining the routing object of the user role, the method further includes: Determining the page level of the target page according to the routing path information of the routing object; Determine the page name, routing component, routing level and routing global information of the target page according to the routing meta information of the routing object; According to the hidden attribute information of the routing object, determining whether the target menu in the target page is hidden; According to the sub-route attribute information of the route object, it is determined whether there is a sub-route under the current route corresponding to the route object.

7. The method according to claim 5, characterized in that The adding the routing data to the routing table includes: The routing data is added to the routing table in a cyclic addition manner through the add routing function in the routing algorithm framework.

8. The method according to claim 5, characterized in that After adding the routing data to the routing table, the method further includes: Determine whether the routing data has been added; In response to determining that the addition of the routing data is completed, an added flag of the routing data is set by adding an asynchronous target menu data attribute.

9. The method according to claim 1, characterized in that: The determining the permission information of the user role according to the routing data, and displaying the permission identification corresponding to the permission information on the target menu in the target page, includes: Determine the permission information of the user role according to the routing data, and determine the version type corresponding to the permission information; In response to determining that the version type of the permission information is a membership type, a pre-stored membership icon component is inserted under the current routing node, and a membership logo is displayed on a target menu in the target page.

10. The method according to claim 9, characterized in that The inserting of the pre-stored member icon component into the current routing node includes: Obtain the current routing node in the routing data through a custom instruction of the routing algorithm framework; Through the additional algorithm, the pre-stored member icon component is inserted under the current routing node.

11. The method according to claim 9, characterized in that In response to determining that the version type of the permission information is a VIP type, inserting a pre-stored VIP icon component under the current routing node, and displaying a member logo on a target menu in the target page, the method further includes: Determine whether the version type of the permission information is a member expiration type; In response to determining that the version type of the permission information is a membership expiration type, an event monitoring algorithm is added to bind a mouse-in event and a mouse-out event on the current routing node, and membership expiration prompt information is displayed in an area surrounding a target menu on the target page.

12. The method according to claim 11, characterized in that The member expiration reminder information is displayed in the surrounding area of ​​the target menu in the target page, including: In response to determining that the target menu in the target page receives the mouse move event, acquiring the position information of the current routing node, determining the display position of the membership expiration prompt information in the surrounding area of ​​the target menu in the target page according to the position information, and displaying the membership expiration prompt information at the display position in the surrounding area of ​​the target menu in the target page; In response to determining that the target menu in the target page receives the mouse move-out event, the member expiration prompt information is undisplayed in the surrounding area of ​​the target menu in the target page.

13. The method according to claim 1, characterized in that After determining the permission information of the user role according to the routing data and displaying the permission identification corresponding to the permission information on the target menu in the target page, the method further includes: Determine whether the target menu is a click-forbidden menu; In response to determining that the target menu is a click-forbidden menu, an event monitoring algorithm is added to bind a click event on the current routing node, and a click event blocking function is added to display the click-forbidden target menu on the target page.

14. The method according to claim 13, characterized in that After displaying a target menu that prohibits clicking on the target page, the method further includes: In response to determining that the click-disabled target menu receives the click event, the click event is not responded to, and the mouse pointer style is changed to a disabled style.

15. A page display device for an application based on dynamic routing, characterized in that: include: A user role identification acquisition module configured to acquire a user role identification of a user role; a routing data adding module, configured to match the file path of the target page of the application corresponding to the user role from the pre-built file path table of the application according to the user role identifier, and add the file path of the target page as the routing data of the user role to the routing table; The target menu display module is configured to determine the permission information of the user role according to the routing data, and display the permission identification corresponding to the permission information on the target menu in the target page.

16. An electronic device, characterized in that: The method comprises a memory, a processor and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method according to any one of claims 1 to 14 is implemented.

17. A non-transitory computer-readable storage medium, characterized in that: The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause a computer to execute the method according to any one of claims 1 to 14.

18. A computer program product comprising computer program instructions, characterized in that When the computer program instructions are executed on a computer, the computer is caused to perform the method according to any one of claims 1 to 14.

Images