Vue-based permission data processing methods, systems, devices, and readable storage media

Abstract

This invention discloses a method, system, device, and readable storage medium for processing permission data based on Vue.js. The method includes: acquiring source data; acquiring first clone data, second clone data, and third clone data based on the source data; acquiring dynamic routing table data based on the first clone data; acquiring dynamic menu data based on the second clone data; acquiring a set of page button data based on the third clone data; rendering the dynamic routing table data and dynamic menu data to generate a routing table and a menu; extracting page button data from the set of page button data according to the pages corresponding to routes in the routing table; determining whether each button on the page should be rendered based on the page button data; and displaying the rendered buttons on the page. By cloning the source data and processing the clone data separately, dynamic routing table data, dynamic menu data, and a set of page button data can be generated. The dynamic generation of the above data from the source data is easy to operate and maintain.

Description

Technical Field

[0001] This invention relates to the field of web front-end technology, and in particular to a data processing method based on the syntax logic provided by JavaScript, and a method for implementing functions based on the features and APIs provided by Vue, Vue-router, and Vuex. Specifically, it relates to a permission data processing method, system, device, and readable storage medium based on Vue. Background Technology

[0002] In a Single-Page Application (SPA) scenario, all the functionality of the front-end application resides on a single page. This differs from multi-page applications, where different content and functions are placed on different pages. The advantages are faster page switching and easier data transfer. SPA page switching primarily relies on JavaScript to listen for URL changes and determine which page fragments to render. This requires establishing a relationship between the URL and the page fragments; this relationship is the routing table. There are static and dynamic routing tables. Static routing tables directly define the association between page fragments and URLs in the code; dynamic routing tables establish the association between URLs and page fragments at runtime based on data.

[0003] Static routing tables are generally suitable for fixed pages, such as 404 pages, homepages, login pages, registration pages, etc. These pages are usually present in every web application, and their names and routes are relatively fixed.

[0004] Dynamic routing is more suitable for business-oriented pages. By designing the mapping data into a suitable structure and storing it in the backend database, configuration and maintenance become very convenient. Since most pages are accessed through menus, there's a strong correspondence between the routing table and the menu. Therefore, generally one menu item corresponds to one page. The common practice is to merge routing data and menu data into a single data object. However, there are special cases. To handle single routes, such as pages not in the menu (e.g., subpages of complex functional pages), or single menus that require navigation to external links, special handling methods need to be designed. Furthermore, with increasingly stringent access control requirements, sometimes it's necessary to control not only the menu but also page functions, such as allowing only certain users to delete data. Since most functions are implemented through buttons, it's also possible to control button permissions. Since button data is associated with the page, making button control data a suitable sub-item of the page is appropriate. Therefore, this data includes routing data, menu data, and page button data.

[0005] A search revealed that Chinese patent CN113254100A, published on August 31, 2021, discloses a method for dynamically loading multi-level routes based on Vue. The method involves: configuring static routes on the front end; creating menus on the web side, specifying component paths for different menu levels; user login, retrieving route data corresponding to role permissions from the server and returning it to the front end; the front end converting component strings in the route data into objects using lazy loading, and establishing mappings between different levels of routes and components according to mapping rules; the front end dynamically loading routes using the addRoutes method to obtain a processed route table; and the browser displaying the content based on the processed route table. However, this method does not consider the need for special handling of complex functional pages or single menus when dealing with single routes, nor does it consider controlling the functionality within the page.

[0006] In order to better process this data and implement functions such as dynamic routing, menus, and button access control, this invention proposes a data processing method by combining tools such as Vue, Vuex, and Vue-router. Summary of the Invention

[0007] To overcome the shortcomings of the prior art, the present invention provides a method, system, device and readable storage medium for processing permission data based on Vue. The method dynamically generates data on routes, menus and buttons by using specific data structures, thereby realizing the functions of dynamic route table establishment, multi-level menu rendering and button permission control.

[0008] This invention provides a method for processing permission data based on Vue.js, comprising: acquiring source data; acquiring first clone data, second clone data, and third clone data based on the source data; acquiring dynamic routing table data based on the first clone data; acquiring dynamic menu data based on the second clone data; acquiring a set of page button data based on the third clone data; rendering the dynamic routing table data and dynamic menu data to generate a routing table and a menu; extracting page button data from the set of page button data according to the page corresponding to the route in the routing table; determining whether each button on the page should be rendered based on the page button data; and displaying the rendered buttons on the page.

[0009] In the above technical solution, the menu data configured in the database is obtained through the interface as the source data. By cloning the source data and processing the cloned data separately, dynamic routing table data, dynamic menu data, and page button data sets can be generated. The dynamic routing table data, dynamic menu data, and button name data are rendered in sequence. The above data is dynamically generated from the source data, which is easy to operate and maintain.

[0010] Specifically, the source data can be menu data in a tree structure format, and the data object can be defined by the type field as a menu, route, or button.

[0011] Specifically, the main data structure attributes are: type: the type of the data object, currently with three possible values: route, menu, and button; path: data specific to menus and routes, such as page routes or external URLs; component: the relative path of page fragments (components); name: the route name or the internationalized key value for menus and buttons; and children: the collection of data child items.

[0012] Specifically, the source data is cloned through deep copying so as not to destroy the source data.

[0013] Preferably, the first cloned data is subjected to route reconstruction processing to obtain dynamic routing table data, further including:

[0014] Iterate through the first cloned data, remove data objects whose type is "button", remove data objects whose component field value is "URL", and filter out fields that are not route data; then dynamically import the components corresponding to the components to obtain the route data object tree;

[0015] The route data object tree and the default static routes are combined to form complete route data. The routes are then rebuilt using the vue-router API's createRouter method, and the matcher values ​​of the existing routes are replaced. At this point, the dynamic route table is generated.

[0016] Preferably, the second clone data undergoes attribute reset processing to obtain dynamic menu data, further including:

[0017] Initialize the temporary variable TEMP, and initialize the menu set MENUS;

[0018] Traverse the second clone data. Each time, extract the node data NODE and the parent node data PARENT. If PARENT is not empty and the path attribute exists in PARENT, and the path attribute in NODE is a route value and the path attribute in NODE does not start with the character / , then reassign the path attribute in NODE to the path in PARENT plus the character / plus the path value in NODE to obtain the actual route of the menu.

[0019] Initialize variable FP to the path value of PARENT. If PARENT does not exist or the path value in PARENT does not exist, FP is initialized to an empty string. If the type attribute of NODE is menu, filter the attributes in NODE and keep only the attributes required for the menu. If the children attribute does not exist, initialize it to an empty array. Create a temporary variable FN. If FP exists and the FP attribute exists in the TEMP collection, assign the FP attribute value in TEMP to FN; otherwise, FN is empty. Store the path in NODE as the key and NODE as the value in TEMP. If FN exists, add NODE to the array FN.children; otherwise, add NODE to MENUS. After traversal, obtain the MENUS menu data.

[0020] Store the MENUS in Vuex and the local cache. Iterate through the MENUS to get the NODE data. If the NODE does not have a tag attribute, create the tag attribute with the initial value of el-menu-item. After creating the tag attribute, if the NODE has a children attribute with a length greater than 0, reset the tag value to el-sub-menu. At this point, the dynamic menu data generation is complete.

[0021] Preferably, the third clone data is processed by storing it into a collection to obtain button name data, which further includes:

[0022] By traversing the third clone data using a pathfinding algorithm, a set of path nodes for all leaf nodes is obtained, which is a two-dimensional array.

[0023] The obtained set of path nodes is processed by storing the page route as the key and the button name as the value in an object collection.

[0024] In each page component, the set of button names for that page is obtained through page routing, and the button names are used as conditions to control whether the buttons are rendered.

[0025] Preferably, when rendering a button, if the attribute value is a boolean value, the button is rendered by checking if the button name set contains the attribute corresponding to the button name. If the attribute value is not a boolean value but an object, the object data is bound to the button component to configure the button attribute.

[0026] Another aspect of the present invention provides a Vue-based permission data processing system, comprising: a user data acquisition module for acquiring source data; a source data cloning module for acquiring first cloned data, second cloned data, and third cloned data based on the source data; a dynamic routing table generation module for acquiring dynamic routing table data based on the first cloned data; a dynamic menu data generation module for acquiring dynamic menu data based on the second cloned data; a page button data set generation module for acquiring a page button data set based on the third cloned data; an initial rendering module for rendering the dynamic routing table data and dynamic menu data to generate a routing table and a menu; and a permission button rendering module for extracting page button data from the page button data set according to the page corresponding to the route in the routing table, determining whether each button on the page should be rendered based on the page button data, and displaying the rendered buttons on the page.

[0027] Specifically, the user data acquisition module acquires source data; the source data cloning module clones the source data to obtain first clone data, second clone data, and third clone data based on the source data; the dynamic routing table generation module reconstructs routes from the first clone data to obtain dynamic routing table data; the dynamic menu data generation module resets attributes from the second clone data to obtain dynamic menu data; the page button data set generation module extracts and merges the third clone data to obtain a page button data set; the initial rendering module renders the dynamic routing table data and dynamic menu data based on the obtained dynamic routing table data and dynamic menu data to generate a routing table and menu; the permission button rendering module extracts page button data from the page button data set based on the pages corresponding to the routes in the routing table, determines whether each button on the page should be rendered based on the page button data, and displays the rendered buttons on the page.

[0028] In another aspect, the present invention provides a permission data processing device based on Vue, comprising: a memory and a processor connected in sequence, wherein the memory is used to store a computer program, and the processor is used to read the computer program and execute a permission data processing method based on Vue.

[0029] In another aspect, the present invention provides a readable storage medium storing instructions that, when executed on a computer, perform a permission data processing method based on Vue.

[0030] Compared with the prior art, the beneficial effects of the present invention include:

[0031] (1) This invention obtains the menu data configured in the database through the interface as the source data. By cloning the source data and processing the cloned data separately, dynamic routing table data, dynamic menu data, and page button data set can be generated. The dynamic routing table data, dynamic menu data, and button name data are rendered in sequence. The above data are generated dynamically through the source data, which is easy to operate and maintain.

[0032] (2) This invention uses a specific data structure to dynamically generate data for routes, menus and button permissions, so as to realize the functions of dynamic route table establishment, multi-level menu rendering and button permission control. Attached Figure Description

[0033] Figure 1 This is a flowchart of a method according to an embodiment of the present invention;

[0034] Figure 2 This is a schematic diagram of a system according to an embodiment of the present invention;

[0035] Figure 3 This is a schematic diagram of the original data according to an embodiment of the present invention;

[0036] Figure 4 This is a schematic diagram of obtaining a routing data object tree according to an embodiment of the present invention;

[0037] Figure 5 This is a schematic diagram of the MENUS data obtained according to an embodiment of the present invention;

[0038] Figure 6 This is a schematic diagram illustrating the generated menu tree rendering data according to an embodiment of the present invention;

[0039] Figure 7 This is a schematic diagram of PS data obtained according to an embodiment of the present invention;

[0040] Figure 8 This is a schematic diagram of an apparatus according to an embodiment of the present invention. Detailed Implementation

[0041] The technical solutions of various embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0042] like Figure 1This invention provides a method for processing permission data based on Vue, including: obtaining source data; obtaining first clone data, second clone data, and third clone data based on the source data; obtaining dynamic routing table data based on the first clone data; obtaining dynamic menu data based on the second clone data; obtaining a set of page button data based on the third clone data; rendering the dynamic routing table data and dynamic menu data to generate a routing table and a menu; extracting page button data from the set of page button data according to the page corresponding to the route in the routing table; determining whether each button on the page should be rendered based on the page button data; and displaying the rendered buttons on the page.

[0043] Specifically, the steps include the following:

[0044] Step 1: Retrieve user-specific menu data by calling the API. The menu data format is tree-structured, and the data object's data type is defined by the `type` field; it can be a menu, route, or button. The data is generated using MOCK, and the original data is as follows: Figure 3 As shown.

[0045] Step 2: 1a. Clone the source data by deep copying to obtain the first clone data A1, where the first clone data A1 is a tree database. The purpose of cloning here is to avoid destroying the source data.

[0046] 1b. Traverse data A1, remove data objects whose type is "button" and whose component field value is "URL", then filter out non-route data fields. Based on the component field value, dynamically import components to obtain the route data object tree B. The obtained data object tree B is as follows: Figure 4 As shown, subsequent steps will generate route instances and route tables based on this data. To improve efficiency, B is stored in Vuex and the local cache, so that when the page is refreshed, data B can be retrieved directly without needing to process data A1.

[0047] 1c. Combine the B-tree and the default static route to form complete routing data, and use the createRouter method to reconstruct the route to obtain route instance C.

[0048] 1d. If the current route instance already exists, replace the `matcher` attribute of the current route instance with the value of the `matcher` attribute of `C`. Otherwise, directly set `C` to the current route instance. This completes the dynamic routing data processing.

[0049] Step 3: 2a. Initialize the temporary object TEMP, and initialize the empty array MENUS as the menu object. Clone the source data using a deep copy to obtain the second cloned data A2.

[0050] 2b. Create a data object cache TN, a route path cache TI, and an empty menu data object RM. Traverse A2 to obtain the current node data NODE and the parent node data PARENT. If PARENT exists, and both NODE and PARENT have a path attribute that is not a URL, then reset NODE's path attribute to PARENT's path + / +NODE's path value.

[0051] 2c. Initialize the variable FP to the PARENT's path value. If PARENT or its path does not exist, FP is set to null. If the NODE's type value is menu, a temporary variable FN is created. If FP does not exist or TEMP has no FP attribute, FN is set to null; otherwise, FN is assigned the FP attribute value from TEMP. Then, filter the NODE attributes, keeping only name, path, icon, label, target, tag, and children attributes. If NODE has no children attribute, children is reset to an empty array. The path from NODE is used as the key, and the NODE object is used as the value in the TEMP object. FN is checked; if it exists, the NODE object is added to FN's children object; if FN does not exist, the NODE object is added to the MENUS object. The resulting MENUS data is as follows: Figure 5 As shown.

[0052] If the parent node exists, retrieve it from TN; otherwise, set the parent node as the root node RM. Then, extract the necessary data for the menu from the current node, assemble it into a new object, and place it into the child item of the parent node. This ultimately yields the menu data RM.

[0053] 2d. Store the MENUS in Vuex and local cache. Iterate through the MENUS to obtain the NODE node data. If a NODE does not have a tag attribute, create it with an initial value of el-menu-item. After creating the tag attribute, if the NODE has a children attribute with a length greater than 0, reset the tag value to el-sub-menu. After the iteration is complete, pass the data to the component to complete the rendering of the dynamic menu. The generated menu tree rendering data is as follows: Figure 6 As shown.

[0054] The menu data set (RM) is stored in Vuex and a local cache. The RM is then iterated through, and each menu data object (ITEM) is processed. The `children` property of the ITEM is checked for truth; if true, the node is a parent menu item; otherwise, it's a bottom-level menu item. This rule is used to generate the menu tree and render the data. Finally, Vue's dynamic component functionality is used to render the entire menu. This completes the dynamic menu data processing.

[0055] Step 4: 3a. Clone the source data using a deep copy to obtain data A3.

[0056] 3b. Obtain the set LA of all leaf nodes and their parent nodes of A3 using a tree-based data path algorithm. This set is a two-dimensional array, where each item in the array is a set of leaf nodes and their parent nodes.

[0057] 3c. Create new permission data and combine it with PS. Iterate through LA. For each sub-item in LA, extract the first node as NODE (a leaf node). Then, filter and process the array, concatenate the path attribute of the remaining nodes as KEY. Check if the KEY attribute exists in PS; if not, create a new KEY attribute object. Extract the name attribute from NODE and set it as a property of the PS.KEY object, with a value of either the leaf node object or true. The resulting PS data is as follows: Figure 7 As shown.

[0058] 3d. Store PS in Vuex and local cache. In the page, get the current page path through the vue-router instance. Use path as the key to get the current page's permission data collection P. When rendering the button, if the attribute value is a boolean value, determine whether the button should be rendered by checking if the attribute corresponding to the button's name is in the P collection. If the attribute value is not a boolean value but an object, bind the object data to the button component.

[0059] Whether a button on the page is rendered is controlled by parsing the properties of P. The button permission data processing is now complete.

[0060] By retrieving this data using Vuex on the page and then controlling the button permissions through logical judgment, you can effectively manage the button permissions.

[0061] Furthermore, the rendering data here uses components from the element-ui component library. The entire menu can be rendered using Vue dynamic components.

[0062] like Figure 2In another aspect, this invention provides a Vue-based permission data processing system, comprising: a user data acquisition module for acquiring source data; a source data cloning module for acquiring first cloned data, second cloned data, and third cloned data based on the source data; a dynamic routing table generation module for acquiring dynamic routing table data based on the first cloned data; a dynamic menu data generation module for acquiring dynamic menu data based on the second cloned data; a page button data set generation module for acquiring a page button data set based on the third cloned data; an initial rendering module for rendering the dynamic routing table data and dynamic menu data, generating a routing table and a menu; and a permission button rendering module for extracting page button data from the page button data set according to the page corresponding to the route in the routing table, determining whether each button on the page should be rendered based on the page button data, and displaying the rendered buttons on the page.

[0063] like Figure 8 In another aspect, the present invention provides a permission data processing device based on Vue, comprising: a memory and a processor connected in sequence, wherein the memory is used to store a computer program, and the processor is used to read the computer program and execute a permission data processing method based on Vue.

[0064] In another aspect, the present invention provides a readable storage medium storing instructions that, when executed on a computer, perform a permission data processing method based on Vue.

[0065] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features therein; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the technical solutions of the embodiments of the present invention.

Claims

1. A method for handling permission data based on Vue, characterized in that, include, Obtain source data; Obtain the first clone data, second clone data, and third clone data based on the source data; Obtain dynamic routing table data based on the first clone data; The first cloned data is used to reconstruct the routing data to obtain dynamic routing table data, which further includes: Iterate through the first cloned data, remove data objects whose type is "button", remove data objects whose component field value is "URL", and filter out fields that are not route data; then dynamically import the components corresponding to the components to obtain the route data object tree; The route data object tree and the default static routes are combined to form complete route data. The route is rebuilt using the vue-router API createRouter method to obtain route instance C. If the current route instance already exists, the matcher property of the current route instance is replaced with the matcher property value of C. Otherwise, C is directly set as the current route instance. At this point, the dynamic route table is generated. Obtain dynamic menu data based on the second clone data; perform attribute reset processing on the second clone data to obtain dynamic menu data, further including: Initialize the temporary variable TEMP, and initialize the menu set MENUS; Traverse the second clone data. Each time, extract the node data NODE and the parent node data PARENT. If PARENT is not empty and the path attribute exists in PARENT, and the path attribute in NODE is a route value and the path attribute in NODE does not start with the character / , then reassign the path attribute in NODE to the path in PARENT plus the character / plus the path value in NODE to obtain the actual route of the menu. Initialize variable FP to the path value of PARENT. If PARENT does not exist or the path value in PARENT does not exist, FP is initialized to an empty string. If the type attribute of NODE is menu, filter the attributes in NODE and keep only the attributes required for the menu. If the children attribute does not exist, initialize it to an empty array. Create a temporary variable FN. If FP exists and the FP attribute exists in the TEMP collection, assign the FP attribute value in TEMP to FN; otherwise, FN is empty. Store the path in NODE as the key and NODE as the value in TEMP. If FN exists, add NODE to the array FN.children; otherwise, add NODE to MENUS. After traversal, obtain the MENUS menu data. Store the MENUS in Vuex and local cache. Iterate through the MENUS to get the NODE data. If the NODE does not have a tag attribute, create the tag attribute with an initial value of el-menu-item. After creating the tag attribute, if the NODE has a children attribute with a length greater than 0, reset the tag value to el-sub-menu. At this point, the dynamic menu data generation is complete. Obtain the page button data set based on the third clone data; process the third clone data into a set to obtain button name data, which further includes: By traversing the third clone data using a pathfinding algorithm, a set of path nodes for all leaf nodes is obtained, which is a two-dimensional array. The obtained set of path nodes is processed by storing the page route as the key and the button name as the value in an object collection. In each page component, the set of button names for that page is obtained through the page route, and the button name is used as a condition to control whether the button is rendered; Render dynamic routing table data and dynamic menu data to generate the routing table and menu; Based on the page corresponding to the route in the routing table, extract the page button data from the page button data set, determine whether each button on the page should be rendered based on the page button data, and display the rendered buttons on the page.

2. The permission data processing method based on Vue according to claim 1, characterized in that, When rendering a button, if the attribute value is a boolean value, the button is rendered by checking if the attribute corresponding to the button's name is in the button name collection. If the attribute value is not a boolean value but an object, the object data is bound to the button component to configure the button attribute.

3. A Vue-based permission data processing system, used to implement the steps of the Vue-based permission data processing method according to any one of claims 1 to 2, characterized in that, include, The user data acquisition module is used to acquire source data; The clone source data module is used to acquire the first clone data, the second clone data, and the third clone data based on the source data. The dynamic routing table generation module is used to obtain dynamic routing table data based on the first clone data; A dynamic menu data generation module is used to obtain dynamic menu data based on the second clone data; The module for generating a page button data set is used to obtain a page button data set based on the third clone data; The initial rendering module is used to render dynamic routing table data and dynamic menu data, and generate the routing table and menu; The permission button rendering module is used to extract page button data from the page button data set based on the page corresponding to the route in the routing table, determine whether each button on the page should be rendered based on the page button data, and display the rendered buttons on the page.

4. A permission data processing device based on Vue, characterized in that, include: A memory and a processor are connected in sequence, wherein the memory is used to store a computer program, and the processor is used to read the computer program and execute the permission data processing method based on Vue as described in any one of claims 1 to 2.

5. A readable storage medium, characterized in that, The readable storage medium stores instructions that, when executed on a computer, perform the permission data processing method based on Vue as described in any one of claims 1 to 2.

Images