Method, medium and equipment for realizing front-end management routing authority and page content authority based on vue.js

Abstract

The invention discloses a method, a medium and equipment for realizing front-end management routing permission and page content permission based on vue.js, belongs to the technical field of software development, and aims to solve the technical problems of how to flexibly configure and manage access permissions of different roles, ensure the accuracy and leakproofness of the permissions and improve the user experience. The technical scheme adopted by the invention is as follows: Vue routing information registration management: managing front-end page routing by using vue-router; the website user customizes role information: customizes the role information through the background management system; page permissions are allocated to the roles; the routing authority and the page authority are stored in a database; the data of the routing authority and the page authority are stored in the database through an API; the website user creates a new user and binds the new user to a corresponding role; and after a new user logs in, querying and returning a corresponding routing list and a page permission function point list according to the role of the user, and carrying out routing filtering and page content permission control at the front end.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a method, medium and device for implementing front-end management of routing permissions and page content permissions based on Vue.js. Background Art

[0002] In current web development, Vue.js is a widely used JavaScript framework. In modern web applications, permission management is a key issue, especially in enterprise applications, where different roles and users need to access different pages and content to ensure the security and privacy of information. Therefore, reasonable routing permissions and page content permission management methods are particularly important.

[0003] Traditional front-end permission management methods usually have the following disadvantages:

[0004] ① Poor scalability: Many current permission management systems use the method of pre-setting system roles and writing permissions directly into the code. This method is difficult to maintain and expand when requirements change, and it is difficult to adapt to complex business scenarios.

[0005] ② Security risks: Some web systems only perform permission judgment on the front end, lack back-end permission verification, and are easily bypassed, posing the risk of information leakage.

[0006] ③Poor user experience: Some web permission management systems directly deny access or redirect users to error pages when they access restricted pages, and fail to provide friendly prompts, affecting user experience.

[0007] Therefore, how to flexibly configure and manage access rights of different roles, ensure the accuracy and strictness of permissions, and improve user experience is a technical problem that needs to be solved urgently. Summary of the invention

[0008] The technical task of the present invention is to provide a method, medium and device for implementing front-end management of routing permissions and page content permissions based on vue.js, so as to solve the problem of how to flexibly configure and manage access permissions of different roles, ensure the accuracy and strictness of permissions, and improve user experience.

[0009] The technical task of the present invention is achieved in the following way: a method for implementing front-end management routing permissions and page content permissions based on vue.js, the method is as follows:

[0010] Vue routing information registration management: use vue-router to manage front-end page routing;

[0011] Website users customize role information: customize role information through the backend management system;

[0012] Assign page permissions to roles;

[0013] Save routing permissions and page permissions to the database: Save routing permissions and page permissions data to the database through the API;

[0014] Website users create new users and bind them to corresponding roles;

[0015] Query routes and permissions based on roles for filtering: After a new user logs in, the corresponding route list and page permission function point list are queried and returned based on the user role, and the front end performs route filtering and page content permission control.

[0016] As a preferred option, the Vue routing information registration management is as follows:

[0017] When registering a Vue route, add a name to each route. The name attribute is used to store page permissions in the user database, and quickly match and identify specific routes through the name. Add title information to the meta attribute of the route to store the text name displayed during menu management, which is used to display a more friendly route name in the user interface.

[0018] Add the permission attribute to the meta attribute of the route to describe the permission information of the current route. The permission attribute is stored in the form of an array, containing permission key-value pairs, which are used to control the content display on each page. For example, add a name attribute to each route. The name attribute will be used to store page permissions in the user database, so that specific routes can be quickly matched and identified by name.

[0019] Define a custom directive v-permission to show or hide page content based on user permissions.

[0020] Preferably, the implementation logic of the custom directive v-permission is as follows:

[0021] Determine whether the current user's permission list contains the specified permission parameters:

[0022] If not included, use el.parentNode.removeChild(el) to remove the corresponding content;

[0023] In the Vue component, the custom directive v-permission is used to determine whether the current content needs to be displayed, and the custom directive v-permission is used in the Vue component to control the display of specific content according to the user's permission function point list.

[0024] As a preference, page permissions are assigned to roles as follows:

[0025] Navigate to the permission allocation interface: Website users log in to the backend management system, navigate to the role management page, and select the role to which permissions need to be assigned;

[0026] Select pages and permissions: Browse the page list in the tree structure and find the page to which permissions need to be assigned; check the page checkbox, and the checkbox submenu will be expanded by default to display the permission checkboxes for the page content; and adjust the permission checkboxes in the submenu as needed to select or cancel permissions for specific content; the routed permissions should automatically apply to all page content permissions, unless the page content has specific permission settings. The inheritance mechanism simplifies permission management and reduces the workload of repeated settings;

[0027] Confirm and save permissions: After completing the permission allocation, click the "Save" button to save all permission settings to the database. The background management system prompts that the save is successful and displays confirmation information for the permission change.

[0028] As a preference, routing permissions and page permissions are saved to the database as follows:

[0029] After assigning page permissions, save the page's name and permission attributes to the database for use in subsequent permission verification and user access control; the steps for saving the page's name and permission attributes to the database are as follows:

[0030] Front-end collection of permission data: In the front-end interface, when the website user completes the page permission allocation and adjustment, the name and permission attributes of each page are collected and packaged into an object, ready to be sent to the back-end for storage;

[0031] Pass data to the backend through the API: Use an HTTP request library (such as Axios) to send permission data to the backend API interface;

[0032] The backend processes the request and stores the data: it parses the received data and saves the parsed data into the database.

[0033] As a preference, website users create new users and bind them to corresponding roles as follows:

[0034] Navigate to the user management interface: Website users log in to the backend management system, navigate to the user management page, and select the "Create a new user" option;

[0035] Enter user information: In the user registration interface, enter the basic information of the new user, including user name, password, email and name;

[0036] Select Roles: In the Role Selection section, site users select one or more roles from a list to assign to the new user.

[0037] As a preference, filtering is performed based on role query routing and permissions as follows:

[0038] The user enters the username and password to log in, and the backend interface performs verification. After the verification is successful, the identity of the logged-in user is queried. Based on the identity of the logged-in user, the backend queries the role bound to the user and the corresponding permission information, generates the corresponding user's routing list and page permission function point list, and returns the routing list and page permission function point list to the front end;

[0039] The front end receives and processes permission data: After receiving the user's route list and permission function point list, the front end performs route filtering and only retains the routes that the user has permission to access; when rendering the page, the v-permission directive is used to determine whether the content is displayed based on the permission function point list.

[0040] Preferably, the front end receives and processes permission data as follows:

[0041] Dynamic route loading and filtering: According to the returned route list, dynamically load the routes that the user has access to, and add the routes that the user has access to to Vue Router;

[0042] Page content permission control, based on the custom instruction v-permission, determines whether the current page content is displayed to the user.

[0043] An electronic device comprising: a memory and at least one processor;

[0044] Wherein, the memory stores a computer program;

[0045] The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the method for implementing front-end management routing permissions and page content permissions based on vue.js as described above.

[0046] A computer-readable storage medium stores a computer program, which can be executed by a processor to implement the method for managing front-end routing permissions and page content permissions based on vue.js as described above.

[0047] The method, medium and device for implementing front-end management of routing permissions and page content permissions based on vue.js of the present invention have the following advantages:

[0048] (1) The present invention realizes flexible permission configuration and management by adding a name and permission information to each route when registering the Vue route. The present invention also has the characteristics of flexible configuration, strict security, friendly user experience, and wide applicability, and can effectively protect information security and permission access control in Web applications;

[0049] (ii) The present invention can flexibly configure and manage the access rights of different roles, ensure the accuracy and strictness of the rights through the verification of the back-end permission interface, and also improve the user experience, thereby developing a more secure and efficient permission management system;

[0050] (III) The present invention ensures information security and permission access control in web applications through flexible configuration and effective permission management, and has the following characteristics:

[0051] ①Flexible configuration: Administrators can customize access rights according to different roles and users to adapt to complex and changing business scenarios;

[0052] ② Strict security: Only through the back-end interface can relevant permissions be obtained, ensuring the accuracy and strictness of permission verification, preventing permissions from being bypassed, and improving information security;

[0053] ③ Friendly user experience: When users access restricted pages, friendly prompts or guide pages are provided to improve user experience, instead of directly denying access or jumping to error pages;

[0054] ④Widely applicable: It can be applied to various Web applications that require permission management, especially information security management and access control in enterprise-level applications;

[0055] (iv) After the user logs in, the present invention can query and return the corresponding route list and page permission function point list according to the user role. The front end filters the routes and uses the v-permission instruction on the page to determine whether the corresponding content is displayed, so that the user can only see the content with the assigned permissions;

[0056] (V) While achieving efficient rights management, the present invention ensures the security of the system and the smoothness of user experience, is applicable to a variety of application scenarios, has broad application prospects and practical value, and has the following specific advantages:

[0057] ① Flexible permission management: By adding permission control to routes and page content, administrators can manage users' route and page content access rights in a fine-grained manner, achieving more flexible and efficient permission management;

[0058] ② User experience is not affected: When a user accesses a page, only the content with corresponding permissions will be displayed, and the content without permissions will be hidden, ensuring a smooth and consistent user experience, and the normal page display will not be affected by permission management;

[0059] ③Easy to maintain and expand: By using unified permission control logic in routing and components, the maintenance of system permission management can be simplified, and administrators can flexibly adjust permission configuration according to needs;

[0060] ④Security enhancement: Unified management and verification of user permissions on the back end to ensure the security and consistency of permission data and prevent unauthorized access and operation;

[0061] ⑤ Applicable to a variety of scenarios: The present invention is not only applicable to general internal enterprise systems, but can also be applied to sensitive information systems that require strict authority control, such as confidential unit website information management and product intellectual property protection, to ensure information security and compliance. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] The present invention is further described below in conjunction with the accompanying drawings.

[0063] Attached Figure 1 Assign role permissions to administrators and role flowcharts to users;

[0064] Attached Figure 2 Provide a page access flow chart for system users;

[0065] Attached Figure 3 Screenshot of the interface for assigning routing and page permissions to roles. DETAILED DESCRIPTION

[0066] With reference to the accompanying drawings and specific embodiments of the specification, the method, medium and device for implementing front-end management of routing permissions and page content permissions based on vue.js of the present invention are described in detail below.

[0067] Embodiment 1:

[0068] This embodiment provides a method for implementing front-end management of routing permissions and page content permissions based on vue.js, and the method is as follows:

[0069] S1. Vue routing information registration management: Use vue-router to manage front-end page routing;

[0070] S2. Website users customize role information: customize role information through the backend management system;

[0071] S3. Assign page permissions to roles;

[0072] S4. Save routing permissions and page permissions to the database: Save routing permissions and page permissions data to the database through the API;

[0073] S5. Website users create new users and bind them to corresponding roles;

[0074] S6. Query routes and permissions based on roles for filtering: After a new user logs in, the corresponding route list and page permission function point list are queried and returned based on the user role, and the front end performs route filtering and page content permission control.

[0075] The Vue routing information registration management in step S1 of this embodiment is specifically as follows:

[0076] S101. When registering a Vue route, add a name to each route. The name attribute is used to store page permissions in the user database, and quickly match and identify specific routes through the name; wherein the title information is added to the meta attribute of the route to store the text name displayed during menu management, which is used to display a more friendly route name in the user interface;

[0077] S102. Add a permission attribute to the meta attribute of the route to describe the permission information of the current route; wherein the permission attribute is stored in the form of an array, including permission key-value pairs, and is used to control the content display on each page; for example, add a name attribute to each route. This name attribute will be used to store page permissions in the user database, so that a specific route can be quickly matched and identified by name; the format is as follows:

[0078]

[0079] S103, define a custom instruction v-permission, and display or hide the page content according to the user's permission; wherein the implementation logic of the custom instruction v-permission is as follows:

[0080] Determine whether the current user's permission list contains the specified permission parameters:

[0081] If not included, use el.parentNode.removeChild(el) to remove the corresponding content;

[0082] In the Vue component, the custom directive v-permission is used to determine whether the current content needs to be displayed, and the custom directive v-permission is used in the Vue component to control the display of specific content according to the user's permission function point list. For example:

[0083]

[0084] Through the above steps, the basic information of front-end management permissions based on Vue.js is defined.

[0085] The website user (such as an administrator) in step S2 of this embodiment customizes the role information as follows:

[0086] Website users (such as administrators) need an easy way to customize and manage role information. This role information will be used to control different users' access rights to website pages and content. By customizing roles, administrators can flexibly define the permissions each role has and assign these roles to specific users to achieve refined permission management.

[0087] As attached Figure 1 and 3 As shown, the page permissions assigned to roles in step S3 of this embodiment are specifically as follows:

[0088] S301, navigating to the permission allocation interface: the website user logs in to the backend management system, navigates to the role management page, and selects the role to which permissions need to be allocated;

[0089] S302, select page and permission: browse the page list in the tree structure and find the page to which permission needs to be assigned; check the page checkbox, expand the checkbox submenu by default, and display the permission checkbox of the page content; and adjust the permission checkbox in the submenu as needed to select or cancel the permission of specific content; the route permission should be automatically applied to all page content permissions, unless the page content has specific permission settings, and the inheritance mechanism simplifies permission management and reduces the workload of repeated settings;

[0090] S303. Confirm and save permissions: After completing the permission allocation, click the "Save" button to save all permission settings to the database. The background management system prompts that the save is successful and displays confirmation information for the permission change.

[0091] In step S4 of this embodiment, the route authority and page authority are saved to the database as follows:

[0092] After assigning page permissions, save the page's name and permission attributes to the database for use in subsequent permission verification and user access control; the steps for saving the page's name and permission attributes to the database are as follows:

[0093] S401, front-end collection of permission data: In the front-end interface, after the website user completes the page permission allocation and adjustment, the name and permission attributes of each page are collected, and the name and permission attributes of each page are packaged into an object, ready to be sent to the back-end for storage;

[0094] S402, passing data to the backend through the API: using an HTTP request library (such as Axios) to send the permission data to the backend API interface;

[0095] S403, the backend processes the request and stores the data: parses the received data and saves the parsed data into a database.

[0096] In step S5 of this embodiment, the website user creates a new user and binds it to the corresponding role as follows:

[0097] S501, navigating to the user management interface: the website user logs in to the backend management system, navigates to the user management page, and selects the "create new user" option;

[0098] S502, input user information: in the user registration interface, input the basic information of the new user, the basic information of the new user includes user name, password, email and name;

[0099] S503, select role: In the role selection section, the website user selects one or more roles from the list to assign to the new user.

[0100] As attached Figure 2 As shown, the filtering based on role query routing and authority in step S6 of this embodiment is specifically as follows:

[0101] S601. The user enters the user name and password to log in. The backend interface performs verification. After the verification is successful, the identity of the logged-in user is queried. The backend queries the role bound to the user and the corresponding permission information based on the identity of the logged-in user, generates the routing list and page permission function point list of the corresponding user, and returns the routing list and page permission function point list to the frontend. The returned data format is as follows:

[0102]

[0103]

[0104] S602, the front end receives and processes permission data: after receiving the user's route list and permission function point list, the front end performs route filtering and only retains the routes that the user has permission to access; when rendering the page, the v-permission instruction is used to determine whether the content is displayed based on the permission function point list.

[0105] The front end receives and processes the authority data in step S602 of this embodiment as follows:

[0106] S60201. Dynamic route loading and filtering: According to the returned route list, dynamically load the routes that the user has access to, and add the routes that the user has access to to Vue Router;

[0107]

[0108] S60202, page content permission control, based on the custom instruction v-permission, determines whether the current page content is displayed to the user. The key logic of the instruction implementation is as follows:

[0109]

[0110]

[0111] Embodiment 2:

[0112] This embodiment provides a method for front-end management of routing permissions and page content permissions based on Vue.js, which can flexibly configure and effectively manage permissions, and ensure information security and permission access control in the Web system, including the following steps:

[0113] (1) Receive and parse the user permission data returned from the backend interface;

[0114] (2) Dynamically generate and configure the front-end routing list and access rights for specific page content based on permission data;

[0115] (3) When a user attempts to access a restricted page, a friendly prompt or guide page is provided based on the permission data, rather than directly denying access or redirecting to an error page.

[0116] The "receiving and parsing" in step (1) of this embodiment includes obtaining user authority data from a backend interface by sending an HTTP request, and parsing the obtained authority data structure.

[0117] The "dynamically generate and configure the front-end routing table and page content access permissions" in step (2) of this embodiment includes:

[0118] ①. Configure Vue Router's route guards according to the role and permission information in the permission data;

[0119] ②. Adjust the display and hiding of page content according to permission data, and control the display of components through instruction rendering (v-permission).

[0120] In step (3) of this embodiment, when a user accesses a restricted page, a user-friendly experience is provided by means of a prompt message or a guide page, and the prompt message or the guide page includes:

[0121] ① Friendly prompt information to inform users that their access rights are insufficient;

[0122] ② Guide users back to accessible pages or provide relevant help links.

[0123] The permission data in this embodiment is dynamically generated by the back-end interface according to the user identity and role, and supports complex permission management based on user groups, roles and permission levels.

[0124] This embodiment also includes preloading permission data when the application is initialized to ensure that the user can obtain the latest permission data and access control configuration in a timely manner when accessing the front-end page.

[0125] This embodiment is applicable to various Web applications that require permission management, especially information security management and access control in enterprise-level applications, and supports multi-role and multi-level permission configuration.

[0126] This embodiment can be used in combination with an existing identity authentication mechanism to achieve comprehensive verification and management of user identities and permissions.

[0127] Embodiment 3:

[0128] This embodiment also provides an electronic device, including: a memory and a processor;

[0129] Wherein, the memory stores computer-executable instructions;

[0130] The processor executes the computer-executable instructions stored in the memory, so that the processor executes the method for implementing front-end management routing permissions and page content permissions based on vue.js in any embodiment of the present invention.

[0131] The processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor may be a microprocessor or any conventional processor, etc.

[0132] The memory can be used to store computer programs and / or modules. The processor realizes various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory, and calling the data stored in the memory. The memory can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, at least one application required for a function, etc.; the data storage area can store data created according to the use of the terminal, etc. In addition, the memory can also include a high-speed random access memory, and can also include a non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart memory card (SMC), a secure digital (SD) card, a flash memory card, at least one disk storage period, a flash memory device, or other volatile solid-state storage devices.

[0133] Embodiment 4:

[0134] This embodiment also provides a computer-readable storage medium, which stores a plurality of instructions, which are loaded by a processor to enable the processor to execute the method for implementing front-end management of routing permissions and page content permissions based on vue.js in any embodiment of the present invention. Specifically, a system or device equipped with a storage medium can be provided, on which a software program code that implements the functions of any of the above embodiments is stored, and a computer (or CPU or MPU) of the system or device reads and executes the program code stored in the storage medium.

[0135] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0136] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RYM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer via a communication network.

[0137] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0138] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or written to a memory provided in an expansion unit connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or the expansion unit is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0139] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for implementing front-end management of routing permissions and page content permissions based on vue.js, characterized in that: The method is as follows: Vue routing information registration management: use vue-router to manage front-end page routing; Website users customize role information: customize role information through the backend management system; Assign page permissions to roles; Save routing permissions and page permissions to the database: Save routing permissions and page permissions data to the database through the API; Website users create new users and bind them to corresponding roles; Query routes and permissions based on roles for filtering: After a new user logs in, the corresponding route list and page permission function point list are queried and returned based on the user role, and the front end performs route filtering and page content permission control.

2. The method for implementing front-end management routing permissions and page content permissions based on vue.js according to claim 1 is characterized in that: The specific registration and management of Vue routing information is as follows: When registering a Vue route, add a name to each route. The name attribute is used to store page permissions in the user database, and quickly match and identify specific routes through the name. Add title information to the meta attribute of the route to store the text name displayed during menu management, which is used to display friendly route names in the user interface. Add the permission attribute to the meta attribute of the route to describe the permission information of the current route. The permission attribute is stored in the form of an array, containing permission key-value pairs, which are used to control the content display on each page. Define a custom directive v-permission to show or hide page content based on user permissions.

3. The method for implementing front-end management routing permissions and page content permissions based on vue.js according to claim 2 is characterized in that: The implementation logic of the custom instruction v-permission is as follows: Determine whether the current user's permission list contains the specified permission parameters: If not included, use el.parentNode.removeChild(el) to remove the corresponding content; In the Vue component, the custom directive v-permission is used to determine whether the current content needs to be displayed, and the custom directive v-permission is used in the Vue component to control the display of specific content according to the user's permission function point list.

4. The method for implementing front-end management routing authority and page content authority based on vue.js according to claim 1 is characterized in that: Assign page permissions to roles as follows: Navigate to the permission allocation interface: Website users log in to the backend management system, navigate to the role management page, and select the role to which permissions need to be assigned; Select pages and permissions: Browse the page list in the tree structure and find the page to which permissions need to be assigned; Check the page checkbox to expand the checkbox submenu by default, showing the permission checkboxes for the page content; And adjust the permission checkboxes in the submenu as needed to select or cancel permissions for specific content; Routing permissions should automatically apply to all page content permissions, unless the page content has specific permissions set; Confirm and save permissions: After completing the permission allocation, click the "Save" button to save all permission settings to the database. The backend management system will prompt that the save is successful and display confirmation information for the permission change.

5. The method for implementing front-end management of routing permissions and page content permissions based on vue.js according to claim 1 is characterized in that: Routing permissions and page permissions are saved to the database as follows: After assigning page permissions, save the page's name and permission attributes to the database for use in subsequent permission verification and user access control; the steps for saving the page's name and permission attributes to the database are as follows: Front-end collection of permission data: In the front-end interface, when the website user completes the page permission allocation and adjustment, the name and permission attributes of each page are collected and packaged into an object, ready to be sent to the back-end for storage; Pass data to the backend through the API: Use the HTTP request library to send permission data to the backend API interface; The backend processes the request and stores the data: it parses the received data and saves the parsed data into the database.

6. The method for implementing front-end management of routing permissions and page content permissions based on vue.js according to claim 1, characterized in that: Website users create new users and bind them to corresponding roles as follows: Navigate to the user management interface: Website users log in to the backend management system, navigate to the user management page, and select the "Create a new user" option; Enter user information: In the user registration interface, enter the basic information of the new user, including user name, password, email and name; Select Roles: In the Role Selection section, site users select one or more roles from a list to assign to the new user.

7. The method for implementing front-end management of routing permissions and page content permissions based on vue.js according to claim 1, characterized in that: Filtering based on role query routing and permissions is as follows: The user enters the username and password to log in, and the backend interface performs verification. After the verification is successful, the identity of the logged-in user is queried. Based on the identity of the logged-in user, the backend queries the role bound to the user and the corresponding permission information, generates the corresponding user's routing list and page permission function point list, and returns the routing list and page permission function point list to the front end; The front end receives and processes permission data: After receiving the user's route list and permission function point list, the front end performs route filtering and only retains the routes that the user has permission to access; when rendering the page, the v-permission directive is used to determine whether the content is displayed based on the permission function point list.

8. The method for implementing front-end management of routing permissions and page content permissions based on vue.js according to claim 7 is characterized in that: The front end receives and processes permission data as follows: Dynamic route loading and filtering: According to the returned route list, dynamically load the routes that the user has access to, and add the routes that the user has access to to Vue Router; Page content permission control, based on the custom instruction v-permission, determines whether the current page content is displayed to the user.

9. An electronic device, characterized in that: include: memory and at least one processor; Wherein, the memory stores a computer program; The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the method for implementing front-end management of routing permissions and page content permissions based on vue.js as described in any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which can be executed by a processor to implement the method for implementing front-end management routing permissions and page content permissions based on vue.js as described in any one of claims 1 to 8.

Images