Menu authority dynamic routing implementation method, routing system and computer readable medium

Abstract

The invention discloses a menu permission dynamic routing implementation method, a routing system and a computer readable medium, relates to the technical field of front-end routing, and can complete automatic integration of a component file and a file path before an application program is mounted and generate a corresponding routing object according to asynchronously acquired menu permission data so as to realize dynamic routing of the menu permission. The dynamic registration of the route is completed before the application program is mounted to the html element, so that the problem of blank pages is solved, and the use experience of a user is improved; according to the method, by means of a JS single-thread execution mechanism, the generation mode and the registration time of the route are controlled, the menu permission data can be acquired through asynchronous requests by writing codes, coupling between derivative data is reduced, conciseness and smoothness of development are guaranteed, and the accuracy of route configuration is improved; according to the method, the menu permission data can be acquired by asynchronous requests, the risk of permission data leakage is reduced, full automation of routing configuration and file association is realized, and the configuration flexibility and security of menu permission routing are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end routing, and in particular to a method for implementing menu authority dynamic routing, a routing system and a computer-readable medium. Background Art

[0002] In application development, routing is a mapping relationship between URLs and pages, which includes routing objects and routing rules. Routing objects cover back-end processing functions and front-end component files. Front-end components are compiled into page codes that can be recognized by browsers to display page content. Routing rules define the mapping relationship between URLs and processing functions, where URLs are used to locate resources in applications. URLs contain routing addresses, which can be mapped to specific resources or handlers on the server.

[0003] Menu permission routing refers to a routing mechanism combined with menu permission control to ensure that users can only access authorized routes; refer to Figure 1 As shown, the existing implementation method of menu permission dynamic routing is usually to manually create a complete routing object and the component file it points to first, and then complete the menu information in the menu management after the application is mounted, obtain the permission data according to the binding relationship between the menu and the routing address, filter the routing object according to the permission data, and finally register the route in the application, and provide it to the user in a display or hidden manner; the implementation of this type of routing mechanism, due to the strong coupling between the routing object and the routing address, if the routing address of the front-end URL changes, it is necessary to manually create the routing object again according to the routing address, which has the problems of cumbersome development and easy association errors, and because the display or hiding method is provided to the user, if the matching routing address is entered by a general developer, the hidden restricted menu can be obtained, resulting in the problem of insecure permission control data.

[0004] In addition, the dynamic routing of this type of routing mechanism, such as the Chinese patent with patent number CN111259295A, discloses a method for dynamically mounting web page routing, which is to register a dynamic routing with menu permissions after mounting a single page. Since the single-page application has only one html file, the browser dynamically loads the component file mapped by the URL by sensing the change of the routing URL; when the page is refreshed, the routing information will be cleared, the component mapped by the current URL cannot be found, the access path does not match the server resource path, and the page content cannot be loaded normally, resulting in the problem of displaying a blank page. Summary of the invention

[0005] The purpose of the present invention is to provide a method for implementing dynamic routing of menu permissions, a routing system and a computer-readable medium to solve the problem that in the existing dynamic routing with menu permission function, the routing information will be cleared when the page is refreshed, and the component mapped by the current URL cannot be found, resulting in the inability to load the page content normally and a blank page will be displayed.

[0006] The present invention provides a method for implementing menu authority dynamic routing, comprising the following steps:

[0007] Before the application is mounted, the initialization process of the JS main thread is blocked by the plug-in;

[0008] Acquire menu data, and extract menu configuration information from the menu data; the configuration information includes: menu name, keep-alive status and multiple routing addresses;

[0009] Scan the existing component files in the agreed directory; splice multiple file paths corresponding to each of the routing addresses;

[0010] Generate a routing object according to the file path and the stored component file;

[0011] Dynamically registering a route containing the route object with the application;

[0012] Mount the application.

[0013] The method for implementing dynamic routing of menu permissions of the present invention obtains menu data and extracts menu configuration information before the application is mounted, that is, completes the automatic integration of component files and file paths corresponding to the routing address, completes the parsing of menu data, the generation of component files, and the dynamic registration of routing; obtains menu data before the application is mounted, completes intelligent scanning and automatic creation of component files, completes the dynamic registration of complete routing before the application is mounted to the HTML element, and completes the mounting of the application after the routing is automatically and dynamically registered, so that the application has complete routing registration information after mounting, and will not be deleted after refreshing, solves the problem of blank pages, and improves the user experience; and, the present invention uses the JS single-threaded execution mechanism to control the generation method and registration timing of routing before the application is mounted, thereby ensuring the unidirectionality of data flow, reducing the coupling between derived data, and ensuring the simplicity and fluency of the entire development process.

[0014] The present invention further improves the method for implementing the menu authority dynamic routing, and generating a routing object specifically includes the following steps:

[0015] Determine whether all of the multiple components corresponding to each of the file paths exist in the stored component file;

[0016] If all of the plurality of components exist in the existing component file, a first routing object is generated; the first routing object includes the existing component file;

[0017] If the plurality of components do not all exist in the existing component file, recording a newly added file path corresponding to the non-existing components;

[0018] Dynamically generate new component files, directories and component templates corresponding to the new file paths through Node file management; call the processing function to generate a second routing object; the second routing object includes the existing component files and the new component files;

[0019] The dynamic registration of routes specifically includes the following steps: dynamically registering the route containing the first route object or the route containing the second route object to the application.

[0020] The need to manually create a routing object again according to the routing address has the problem of cumbersome development and easy association errors; or the traditional acquisition of menu permission data is synchronously obtained after the application is mounted, the generation method of the routing component is an explicit path, and the component file is provided to the user in a displayed or hidden manner, which easily causes the risk of permission data leakage; the further improved scheme of the present invention records the newly added file path according to the change or increase of the routing address, and dynamically generates a new file component corresponding to the newly added file path with the help of Node file management, and then configures the routing object containing the newly added component file, and does not need to manually create the routing object again according to the routing address, avoiding the traditional complicated file creation and static routing configuration development cumbersome problems; also avoids human-caused code errors as much as possible, thereby improving the accuracy of configuring menu permission routing; the present invention can realize asynchronous request to obtain menu permission data by judging whether the newly added component file asynchronously loaded in the routing object exists, and then generates the corresponding routing object and registers the route, avoiding the risk of permission data leakage caused by synchronously obtaining the menu permission data after mounting, realizing the full automation of menu permission management routing configuration and file association, and improving the flexibility and security of configuring menu permission routing.

[0021] Further improvement of the method for implementing dynamic routing of menu permissions described in the present invention,

[0022] Before obtaining the menu data, the following steps are also included: using the scaffolding provided by Vite to create a single-page project; creating entries in the src directory, configuring the entry file of the page, and writing the first logic, which does not include the routing logic;

[0023] Blocking the JS main thread specifically includes the following steps: using the await method at the top of the ts file; the plug-in includes: the vite-plugin-top-level-await plug-in.

[0024] As a further improvement of the present invention, by using the scaffolding provided by Vite to create a single-page project, the user's navigation in the application is smoother, there is no need to reload the entire page, and the server load and bandwidth consumption are reduced. By configuring the entry file of the page, the first logic is written, and the first logic does not include the routing logic, which can be used to configure the routing system and define different views and corresponding URL paths. By writing the first logic that does not include the routing logic, the await method is used at the top of the ts file, and the plug-in includes: the vite-plugin-top-level-await plug-in, which can cooperate with the plug-in to block the initialization process of the JS main thread, avoid data derivation and association between the initialization logic and the routing logic, reduce the possibility of code errors caused by complicated writing, and further improve the accuracy of the configuration menu permission routing.

[0025] Further improvement of the method for implementing dynamic routing of menu permissions described in the present invention,

[0026] Before splicing the file paths, the method further includes the steps of: writing common components according to the menu permission data, the common components including: a header component and a side menu component; and writing a second logic for obtaining the menu permission data in the use-entity;

[0027] The registration of the route specifically includes the following steps: creating a router, writing a third logic for executing the route, and obtaining the data of the route object; calling the addRoute method of the router, cyclically registering the route object data to the router, and setting it as the default route.

[0028] As a further improvement scheme of the present invention, by first writing a common component according to the menu permission data, and writing a second logic for obtaining the menu permission data in the use-entity, it is possible to prepare for obtaining the menu permission data, so as to facilitate accurate and reliable acquisition of the menu permission data; and, firstly, the logic for obtaining the menu permission data is written to provide customized menus and functions, and then after the routing object is generated, a router is created and a third logic for executing routing is written to obtain the data of the routing object, so that the routing logic and the logic for obtaining the menu permission data are written separately, thereby reducing the probability of code errors caused by complex codes and data derivatives, and further improving the accuracy of the implementation method of the dynamic routing of menu permissions.

[0029] A further improvement of the method for implementing dynamic routing of menu permissions described in the present invention further includes the steps of: applying the router to a Vue instance, obtaining an application instance, and mounting the application instance to a page element; using mock to simulate the acquisition of menu permission data, and starting the project for verification.

[0030] As a further improved solution of the present invention, by applying the router to a Vue instance, based on the above routing configuration, an application instance with complete routing information can be obtained, so that the route generated after obtaining the menu permission data has complete routing information, and then by using mock to simulate the acquisition of menu permission data, the project is started for verification, and the dynamic route is verified, which facilitates further identification and improvement of the dynamic route, and further improves the accuracy of the implementation method of the menu permission dynamic route.

[0031] To achieve the purpose of the present invention, the present invention also provides a menu authority dynamic routing system, which is used to implement the above-mentioned menu authority dynamic routing implementation method, and specifically includes: at least one processor, and a server configured with the menu authority dynamic routing implemented by at least one of the processors;

[0032] The configuration of the server is as follows:

[0033] Before the application is mounted, the initialization process of the JS main thread is blocked by the plug-in; menu data is obtained, and the configuration information of the menu is extracted from the menu data; the configuration information includes: menu name, keep-alive status and multiple routing addresses;

[0034] Scanning the existing component files in the agreed directory; concatenating multiple file paths corresponding to each of the routing addresses; generating a routing object according to the file paths and the existing component files;

[0035] Dynamically registering a route containing the route object with the application;

[0036] Mount the application.

[0037] The menu permission dynamic routing system of the present invention, with the help of JS single-threaded execution mechanism, configures the route generated according to the menu permission data before the application is mounted to realize the asynchronous request of the menu permission data, thereby controlling the execution logic, adjusting the generation method and registration timing of the route, obtaining the menu data before the application is mounted, and then generating a complete routing object and registering it in the application, thus realizing the automation of the entire development process and the pre-registration of the route, thereby ensuring the flexibility and fluency of the application development and the integrity of the route when the application is running.

[0038] A further improvement of the menu authority dynamic routing system of the present invention, wherein the server is used for:

[0039] Determine whether all of the components corresponding to each of the file paths exist in the stored component file;

[0040] If all of the plurality of components exist in the existing component file, a first routing object is generated; the first routing object includes the existing component file;

[0041] If the plurality of components do not all exist in the existing component file, recording a newly added file path corresponding to the non-existing components;

[0042] Dynamically generate new component files, directories and component templates corresponding to the new file paths through Node file management; call the processing function to generate a second routing object; the second routing object includes the existing component files and the new component files;

[0043] Dynamically register a route containing the first routing object or a route containing the second routing object with the application.

[0044] The menu permission dynamic routing system advances the timing of dynamic registration of routing to before the application is mounted. It does not explicitly specify the generation method of routing components. It dynamically generates missing new component files and new file paths according to the menu permission configuration, realizes on-demand addition of menu permissions, and emphasizes permission verification after login, thereby improving the effectiveness of menu control and data security. Moreover, as long as the menu data information is obtained, it can complete the intelligent scanning and automatic creation of project files, and automatic dynamic registration of routing, avoiding the previous complicated file creation and static routing configuration.

[0045] A further improvement of the menu permission dynamic routing system described in the present invention specifically includes the following modules: a menu permission management module, a menu configuration module, a dynamic routing configuration module, a guard module, and a loading module; the menu permission management module is used to manage and obtain menu data; the menu configuration module is used to configure the menu items of the application; the dynamic routing configuration module is used to generate routing objects according to the menu data to implement routing configuration; the guard module is used to check the access rights before and after the routing and web page jump; the loading module is used to mount the configured routing to the application.

[0046] As a further improvement of the present invention, by dividing and designing it into a menu permission management module, a menu configuration module, a dynamic routing configuration module, a guard module, and a loading module, on the basis that the system described in the present invention can execute the method described in the present invention, the functional division of the program module is made clearer and clearer, which can improve the efficiency of configuring routing, reduce the code compilation error rate caused by complex data, and further increase the performance of the routing system.

[0047] To achieve the purpose of the present invention, the present invention also provides a non-transitory computer-readable medium containing computer-executable instructions. When executed by a processor of a computer, the computer-executable instructions cause the computer to perform steps, the steps comprising:

[0048] Before the application is mounted, the initialization process of the JS main thread is blocked by the plug-in; menu data is obtained, and the configuration information of the menu is extracted from the menu data; the configuration information includes: menu name, keep-alive status and multiple routing addresses;

[0049] Scanning the existing component files in the agreed directory; concatenating multiple file paths corresponding to each of the routing addresses; generating a routing object according to the file paths and the existing component files;

[0050] Dynamically registering a route containing the route object with the application;

[0051] Mount the application.

[0052] The non-temporary computer-readable medium of the present invention, when executed by a computer processor, the computer executable instructions enable the computer to execute dynamic routing of menu permissions, thereby reducing the coupling between derived data, ensuring the simplicity and fluency of the entire development process, and avoiding as many human-caused code errors as possible; and, as long as the menu data information is obtained, the intelligent scanning and automatic creation of project files and the automatic dynamic registration of routes can be completed, thus avoiding the previous complicated file creation and static route configuration; so that the application has complete route registration information after mounting, and the problem of being deleted after refreshing will not occur, thus completely solving the problem of blank pages.

[0053] Compared with the prior art, the present invention has the following advantages and beneficial effects:

[0054] (1) The present invention obtains menu data and extracts menu configuration information before the application is mounted, that is, completes the automatic integration of component files and file paths corresponding to the routing address, completes the parsing of menu data, the generation of component files, and the dynamic registration of routing. By obtaining menu data before the application is mounted and completing intelligent scanning and automatic creation of component files, the application has complete routing registration information after mounting, and the problem of being deleted after refreshing will not occur, thus solving the problem of blank pages and improving the user experience;

[0055] (2) The present invention uses the JS single-threaded execution mechanism to control the generation method and registration timing of the route before the application is mounted. By writing code, it can realize asynchronous request to obtain menu permission data, ensure the unidirectionality of the data flow, reduce the coupling between derived data, and ensure the simplicity and smoothness of the entire development process.

[0056] (3) The present invention configures the routing object containing the corresponding component file according to the change or increase of the routing address, and guides the configuration of the component file from the routing address, thereby ensuring the unidirectionality of the data flow, reducing the coupling between the derived data, and ensuring the simplicity and smoothness of the entire development process; avoiding the setting of routing information such as component files of all routing objects in advance, thereby avoiding the traditional complicated file creation and static routing configuration, thereby avoiding code errors caused by human beings as much as possible, and improving the accuracy of the configuration menu permission routing. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] Figure 1 It is a flowchart of a method for implementing traditional menu permission routing;

[0058] Figure 2 A is a flow chart of a method for implementing dynamic routing of menu permissions according to the present invention;

[0059] Figure 3 Schematic diagram b of the process of implementing the menu authority dynamic routing of the present invention;

[0060] Figure 4 It is a module schematic diagram of the menu authority dynamic routing system of the present invention. DETAILED DESCRIPTION

[0061] The present invention is further described in detail below in conjunction with examples, but the embodiments of the present invention are not limited thereto.

[0062] Example 1

[0063] Combined with Figure 2 and Figure 3 As shown, a method for implementing menu authority dynamic routing provided by the present invention includes the following steps:

[0064] S1: Before the application is mounted, the initialization process of the JS main thread is blocked by the plug-in; the menu data is obtained, and the configuration information of the menu is extracted from the menu data; the configuration information includes: menu name, keep-alive status and multiple routing addresses;

[0065] S2: Scan the existing component files in the agreed directory; splice multiple file paths corresponding to each routing address; according to the file path and the existing component files;

[0066] S3: Generate routing object;

[0067] S4: Dynamically register the route containing the route object to the application;

[0068] S5: Mount the application.

[0069] Specifically, refer to Figure 3 As shown, before obtaining the menu data, through step S11: use the scaffolding provided by Vite to create a single-page project; create entries in the src directory, configure the entry file of the page, and write the first logic, which does not include the routing logic; through step S12: the plug-in includes: vite-plugin-top-level-await plug-in, using the await method at the top of the ts file to implement the initialization process of blocking the JS main thread, thereby preventing the application from being mounted, and realizing the ability to asynchronously obtain the menu permission data.

[0070] Specifically, refer to Figure 2 As shown, after obtaining the menu data, step S13: building tool can be used. The building tool will scan the static resource files corresponding to all routes; for example, the name of an existing component, cyclically check the permissions and routing addresses, and parse the menu data. The specific method can be to streamline the permission data, cyclically extract key configuration information, routing address, menu name, whether to keep alive and other information, to prepare for the subsequent generation of routing objects; then step S2: scan all existing component files for generating menu interfaces in the agreed directory, such as scanning the agreed directory / src / views / pages / ** / * / index.vue; and then splice the file paths corresponding to each routing address, for example, splicing to / src / views / pages / ${path} / index.vue.

[0071] For details, please refer to Figure 2 As shown, generating a routing object specifically includes the following steps:

[0072] S31: Determine whether all components corresponding to each file path exist in the existing component file; if all components exist in the existing component file, generate a first routing object; the first routing object includes the existing component file;

[0073] S32: if the multiple components do not all exist in the existing component files, then record the newly added file path corresponding to the non-existing components; dynamically generate the newly added component files, directories and component templates corresponding to the newly added components through Node file management; call the processing function to generate a second routing object; the second routing object includes the existing component files and the newly added component files;

[0074] The dynamic registration of routes in S4 specifically includes the following steps: dynamically registering a route containing the first route object or a route containing the second route object to an application.

[0075] It should be noted that the first routing object and the second routing object are understood to be named for the purpose of distinguishing component files according to different routing addresses, and the first or second is not interpreted in a substantial mathematical order; for example, since the first routing object produced already has a component corresponding to or matching the routing address, a routing object can be directly generated, that is, it contains complete routing information, such as the complete: routing address, menu name, meta data and component; if a component file that completely matches the routing address is not obtained, then by recording the newly added file path of the component corresponding to the routing address, the newly added component file, directory and component template are generated through the Node file management function, and then a second routing object with all component files corresponding to the required routing address can be generated; it should be noted that the newly added file path is understood to be the file path of the added non-existing component relative to the existing file path corresponding to the existing component.

[0076] In this embodiment, after the first routing object or the second routing object is generated, the first routing object or the second routing object is registered in the application according to the actual menu authority requirements, that is, Figure 2 or Figure 3 The complete routing object shown is either the first routing object or the second routing object, because it contains all the component files corresponding to the routing address, and is therefore a complete routing object; it should be noted that the routing is dynamically registered to the application, such as Figure 2 The route shown may be registered cyclically, that is, according to the update of the menu data, the updated route object is cyclically generated, and the route is registered dynamically and cyclically; it should also be noted that the registration of the route can be achieved through step S41: assembling the data of the generated complete route object, and then using the application initialization process to realize the registration of the route.

[0077] Specifically, before obtaining the menu data, the following steps are also included: using the scaffolding provided by Vite to create a single-page project, for example, creating a front-end project based on Vue3+Vite4+TS, creating entries in the src directory, and configuring the entry file of the page; after configuring the entry file of the page, step S14 is also performed: writing the first logic, the first logic does not include the routing logic; the first logic does not include the routing logic. It should be noted that the first logic is understood as follows Figure 3 The following figure shows the logic used to perform registration and binding of information other than routing.

[0078] It should be noted that the JS main thread is usually a single thread that executes JavaScript code, such as a browser or Node.js; the Node file management usually refers to using Node.js to operate and process various tasks of the file system, such as creating, reading, writing, modifying and deleting files or directories; the Vite is a front-end build tool used to import ESM to serve files using native ES modules in a development environment. It can use the native ESM function of the browser to achieve fast module loading; the src is usually used to store source code in front-end projects, and entries usually refers to the entry file of the project. For example, in Vite, the entry file is the starting point of the application and is used to tell the build tool where to start packaging; the ts file is an open source programming language developed by Microsoft, which is understood as a superset of JavaScript; the vite-plugin-top-level-await plug-in is understood as a plug-in designed specifically for Vite. Using it can simplify asynchronous programming, especially when processing asynchronous tasks in lazy loading scenarios or Web Workers.

[0079] Specifically, obtaining menu data and extracting configuration information include the following steps: writing common components according to menu permission data, the common components include: header components and side menu components; writing the second logic for obtaining menu permission data in use-entity; and then being able to obtain corresponding and matching menu permission data, further completing the automatic integration of all necessary data required in the development process; it should be noted that use-entity usually refers to the logic used to process specific entities in functional components in front-end development.

[0080] Specifically, based on obtaining menu data and implementing the above steps, route registration specifically includes the following steps: creating a router, writing a third logic for executing routing, and obtaining the data of the routing object; calling the addRoute method of the router, assembling the data of the routing object through step S41, and registering the routing object data in a loop to the router, and setting it as the default route; it should be noted that router is understood as the program framework of the router, and ddRoute usually refers to adding or defining a new routing rule to the application.

[0081] Specifically, in this embodiment, step S6 is also included: applying the router to the Vue instance, obtaining the application instance, and mounting the application instance to the page element; using mock to simulate the acquisition of menu permission data, and starting the project for verification; it should be noted that the Vue instance refers to an object containing data, templates, methods, and lifecycle hooks, which can connect a DOM element with the Vue data binding and rendering logic; mock usually refers to simulating data or simulating server responses in routing development.

[0082] Example 2

[0083] To implement the method of embodiment 1, this embodiment provides a menu authority dynamic routing system, which specifically includes: specifically includes: at least one processor, and a server implemented by at least one of the processors and configured with the menu authority dynamic routing; the configuration of the server is as follows:

[0084] Before the application is mounted, the initialization process of the JS main thread is blocked by the plug-in; the menu data is obtained, and the configuration information of the menu is extracted from the menu data; the configuration information includes: menu name, keep-alive status and multiple routing addresses;

[0085] Scan the existing component files in the agreed directory; concatenate multiple file paths corresponding to each routing address; generate routing objects based on the file paths and the existing component files; dynamically register the routes containing the routing objects to the application; and mount the application.

[0086] Specifically, the server is configured according to the following steps:

[0087] Determine whether all components corresponding to each file path exist in the existing component file; if all components exist in the existing component file, generate a first routing object; the first routing object includes the existing component file;

[0088] If the multiple components do not all exist in the existing component files, then record the newly added file path corresponding to the non-existing components; dynamically generate the newly added component files, directories and component templates corresponding to the newly added file paths through Node file management; call the processing function to generate a second routing object; the second routing object includes the existing component files and the newly added component files;

[0089] Dynamically register the route containing the first route object or the route containing the second route object with the application.

[0090] Specifically, the menu authority dynamic routing system in this embodiment refers to Figure 4 As shown, it can be set to include the following modules: menu permission management module, menu configuration module, dynamic routing configuration module, guard module, loading module; the menu permission management module is used to manage and obtain menu data; the menu configuration module is used to configure the menu items of the application; the dynamic routing configuration module is used to generate routing objects according to the menu data to realize the configuration of routing; the guard module is used to check the access rights before and after the routing and web page jump; the loading module is used to mount the configured routing to the application.

[0091] It should be noted that the modules included in the menu permission dynamic routing system described in the present invention are not limited to the modules listed in this embodiment, including modules that implement basic functions such as processors or servers to implement conventional control modules and storage modules, which are not listed in detail here.

[0092] Example 3

[0093] To implement the method described in Example 1, this embodiment discloses a non-transitory computer-readable medium containing computer-executable instructions. When executed by a processor of a computer, the computer-executable instructions cause the computer to execute the steps of Example 1. For example, the steps of Example 1 include:

[0094] Before the application is mounted, the initialization process of the JS main thread is blocked by the plug-in; the menu data is obtained, and the configuration information of the menu is extracted from the menu data; the configuration information includes: menu name, keep-alive status and multiple routing addresses;

[0095] Scan the existing component files in the agreed directory; concatenate multiple file paths corresponding to each routing address; generate routing objects based on the file paths and the existing component files; dynamically register the routes containing the routing objects to the application; and mount the application.

[0096] Although the present invention is described herein with reference to the illustrative embodiments of the present invention, the above embodiments are only preferred embodiments of the present invention, and the embodiments of the present invention are not limited to the above embodiments. It should be understood that those skilled in the art can design many other modifications and embodiments, which will fall within the scope and spirit of the principles disclosed in this application.

Claims

1. A method for implementing dynamic routing of menu permissions, It is characterized in that The following steps are involved: Before the application is mounted, the initialization process of the JS main thread is blocked by the plug-in; Acquire menu data, and extract menu configuration information from the menu data; the configuration information includes: menu name, keep-alive status and multiple routing addresses; Scan the existing component files in the agreed directory; splice multiple file paths corresponding to each of the routing addresses; Generate a routing object according to the file path and the stored component file; Dynamically registering a route containing the route object with the application; Mount the application.

2. The method for implementing menu authority dynamic routing according to claim 1, It is characterized in that Generating a routing object specifically includes the following steps: Determine whether all of the multiple components corresponding to each of the file paths exist in the stored component file; If all of the plurality of components exist in the existing component file, a first routing object is generated; the first routing object includes the existing component file; If the plurality of components do not all exist in the existing component file, recording a newly added file path corresponding to the non-existing components; Dynamically generate new component files, directories and component templates corresponding to the new file paths through Node file management; call the processing function to generate a second routing object; the second routing object includes the existing component files and the new component files; The dynamic registration of routes specifically includes the following steps: dynamically registering the route containing the first route object or the route containing the second route object to the application.

3. The method for implementing menu authority dynamic routing according to claim 1 or 2, It is characterized in that Before obtaining the menu data, the following steps are also included: using the scaffolding provided by Vite to create a single-page project; creating entries in the src directory and configuring the entry file of the page; after configuring the entry file of the page, writing the first logic, which does not include the routing logic; Blocking the JS main thread specifically includes the following steps: using the await method at the top of the ts file; the plug-in includes: the vite-plugin-top-level-await plug-in.

4. The method for implementing menu authority dynamic routing according to claim 3, It is characterized in that Before splicing the file paths, the method further includes the steps of: writing common components according to the menu permission data, the common components including: a header component and a side menu component; and writing a second logic for obtaining the menu permission data in the use-entity; The registration of the route specifically includes the following steps: creating a router, writing a third logic for executing the route, and obtaining the data of the route object; calling the addRoute method of the router, cyclically registering the route object data to the router, and setting it as the default route.

5. The method for implementing menu authority dynamic routing according to claim 4, It is characterized in that After the application is mounted, the steps include: applying the router to the Vue instance, obtaining the application instance, and mounting the application instance to the page element; using mock to simulate the acquisition of menu permission data, and starting the project for verification.

6. A menu authority dynamic routing system, It is characterized in that Specifically include: at least one processor, and A server configured with the menu authority dynamic routing implemented by at least one of the processors; the server is configured according to the following steps: Before the application is mounted, the initialization process of the JS main thread is blocked by the plug-in; Acquire menu data, and extract menu configuration information from the menu data; the configuration information includes: menu name, keep-alive status and multiple routing addresses; Scanning the existing component files in the agreed directory; concatenating multiple file paths corresponding to each of the routing addresses; generating a routing object according to the file paths and the existing component files; Dynamically registering a route containing the route object with the application; Mount the application.

7. The menu authority dynamic routing system according to claim 6, It is characterized in that The server is configured specifically according to the following steps: Determine whether all of the components corresponding to each of the file paths exist in the stored component file; If all of the plurality of components exist in the existing component file, a first routing object is generated; the first routing object includes the existing component file; If the plurality of components do not all exist in the existing component file, recording a newly added file path corresponding to the non-existing components; Dynamically generate new component files, directories and component templates corresponding to the new file paths through Node file management; call the processing function to generate a second routing object; the second routing object includes the existing component files and the new component files; Dynamically register a route containing the first routing object or a route containing the second routing object with the application.

8. The menu authority dynamic routing system according to claim 6 or 7, It is characterized in that Specifically includes the following modules: Menu permission management module, menu configuration module, dynamic routing configuration module, guard module, loading module; The menu permission management module is used to manage and obtain menu data; the menu configuration module is used to configure the menu items of the application; the dynamic routing configuration module is used to generate routing objects according to the menu data to configure routing; the guard module is used to check the access rights before and after the routing and web page jump; the loading module is used to mount the configured routing to the application.

9. A non-transitory computer readable medium containing computer executable instructions, which, when executed by a processor of a computer, cause the computer to perform the steps of the method of claim 1 or 2.

Images