Button permission control method, system, device and storage medium based on vue

Abstract

The application provides a vue-based button permission control method, system, device and storage medium, the method comprises the following steps: obtaining the front-end page port corresponding to the front-end page according to the front-end login information; obtaining the button permission corresponding to the front-end page according to the front-end page port and the preset port permission corresponding table; obtaining the preset name of each callable button according to the button permission corresponding to the front-end page; according to the preset name of each callable button and the current display condition of each callable button, calling the corresponding function in the public file library to display or disable each callable button on the front-end page, the public file library comprises all function functions of buttons, and the function function is used for judging whether the input button is displayed according to the current display condition. By maintaining all button permission control related logics in the same public file library, the management of permissions is facilitated, and the readability and maintainability of the code are improved.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method, system, device, and storage medium for button permission control based on Vue. Background Technology

[0002] Access control is a very common feature in backend management. Many backend management systems determine whether to display a button based on different job levels, business functions, and scenarios. In the development of systems based on the Vue framework, the common practice is to use the v-if directive and then arrange logical operators such as "||" and "&&" to write expressions to determine whether the button is "truthful" in order to achieve button access control. This method is relatively convenient when the conditions are simple.

[0003] When dealing with complex conditions and numerous buttons, this approach can easily lead to bloated expressions and difficult-to-understand code. Furthermore, because the code written using this method is scattered across various files, and developers have different coding styles, it becomes increasingly difficult to maintain as the project grows, turning into a ticking time bomb and potentially causing production issues. Summary of the Invention

[0004] This invention provides a button permission control method, system, device, and storage medium based on Vue. The main purpose is to improve code readability and reduce code maintenance costs.

[0005] In a first aspect, embodiments of the present invention provide a button permission control method based on Vue, including:

[0006] Based on the front-end login information, obtain the port number of the front-end page corresponding to the front-end page;

[0007] According to the mapping table of front-end page port and preset port permissions, obtain the button permissions corresponding to the front-end page;

[0008] Based on the button permissions corresponding to the front-end page, obtain all callable buttons, and based on the correspondence table between each callable button and its name, obtain the preset name of each callable button;

[0009] Based on the preset name of each callable button and the current display conditions of each callable button, the corresponding function in the public file library is called to display or disable each callable button on the front-end page. The public file library includes all function functions of the buttons, and the function functions are used to determine whether the input button is displayed based on the current display conditions.

[0010] Preferably, the public file library includes button creation functions, button handling functions, and hook functions, wherein:

[0011] The button creation function is used to create a corresponding button based on the input button name;

[0012] The button processing function is used to show or disable a button based on the input button name and preset display conditions;

[0013] The hook function is used to show or disable a button based on the input button name and changes in function control conditions.

[0014] Preferably, the hook functions include a bind hook function, an insert hook function, and an update hook function, wherein:

[0015] The bind hook function is used to bind attributes to the input button;

[0016] The insert hook function is used to show or disable the button when an input is inserted, based on the insertion conditions of the input.

[0017] The update hook function is used to show or disable the button when updating the input, based on the update conditions of the input.

[0018] Preferably, the front-end login information includes user login information, user business information, and user scenario information.

[0019] Preferably, obtaining the front-end page port corresponding to the front-end page based on the front-end login information includes:

[0020] Obtain the token key based on the user's login account and password;

[0021] Based on the token key, obtain the user business information and the user scenario information;

[0022] Based on the user login information, the user business information, and the user scenario information, and in conjunction with preset port matching rules, the front-end page port is obtained.

[0023] Preferably, obtaining all callable buttons based on the button permissions corresponding to the front-end page includes:

[0024] Define the button access permission status object using Vuex, create button directives, and bind a button directive to each button;

[0025] In the button call permission file, obtain the instruction value corresponding to each callable button, and determine whether each callable button has permission from the button call permission status object. If it does, then each callable button is designated as the callable button.

[0026] Preferably, the public file library includes a button display structure, which includes button names and display conditions.

[0027] Secondly, embodiments of the present invention provide a button permission control system based on Vue, comprising:

[0028] The port module is used to obtain the port of the front-end page corresponding to the front-end page based on the front-end login information.

[0029] The permission module is used to obtain the button permissions corresponding to the front-end page according to the front-end page port and the preset port permission mapping table;

[0030] The name module is used to obtain all callable buttons according to the button permissions corresponding to the front-end page, and to obtain the preset name of each callable button according to the correspondence table between each callable button and the button name;

[0031] The display module is used to call the corresponding function in the public file library according to the preset name of each callable button and the current display condition of each callable button, and to display or disable each callable button on the front-end page. The public file library includes all function functions of the button, and the function functions are used to determine whether the input button is displayed according to the current display conditions.

[0032] Thirdly, embodiments of the present invention provide a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described Vue-based button permission control method.

[0033] Fourthly, embodiments of the present invention provide a computer storage medium storing a computer program, which, when executed by a processor, implements the steps of the above-described Vue-based button permission control method.

[0034] This invention proposes a button permission control method, system, device, and storage medium based on Vue.js. It finds the corresponding permission based on the front-end page port, directly associating the permission with the front-end page port rather than the traditional user role. This method avoids the modifications required by role changes in traditional methods, ensuring code stability and reducing development difficulty. Furthermore, the entire button display condition judgment process is concentrated within a function. When the condition judgment process needs modification, only the code specifically performing the condition judgment needs to be modified. This allows the modified condition judgment process to be applied throughout the entire project, avoiding the need to screen and modify the entire code, thereby improving the readability and maintainability of the entire code. Attached Figure Description

[0035] Figure 1 This is a schematic diagram illustrating an application scenario of a button permission control method based on Vue, as provided in an embodiment of the present invention.

[0036] Figure 2 A flowchart illustrating a button permission control method based on Vue, provided for an embodiment of the present invention;

[0037] Figure 3 A schematic diagram of a button permission control system based on Vue provided in an embodiment of the present invention;

[0038] Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention.

[0039] The realization of the objective, functional features and advantages of the present invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0040] It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

[0041] In the description of this application, it should be understood that the terms "center", "longitudinal", "lateral", "length", "width", "thickness", "upper", "lower", "front", "rear", "left", "right", "vertical", "horizontal", "top", "bottom", "inner", "outer", "clockwise", "counterclockwise", "axial", "circumferential", "radial", etc., indicating the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings, are only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this application.

[0042] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this application, "multiple" means two or more, unless otherwise explicitly specified.

[0043] Figure 1 This is a schematic diagram illustrating an application scenario of a button permission control method based on Vue, as provided in an embodiment of the present invention. Figure 1 As shown, the user enters the front-end login information on the client side. After the client obtains the front-end login information, it sends the front-end login information to the server side. After the server receives the front-end login information, it executes this Vue-based button permission control method.

[0044] It should be noted that the server can be implemented using a standalone server or a server cluster consisting of multiple servers. The client can be a smartphone, tablet, laptop, desktop computer, etc., but is not limited to these. The client and server can connect via Bluetooth, USB (Universal Serial Bus), or other communication connection methods, which are not limited in this embodiment of the invention.

[0045] Vue is currently one of the most popular front-end frameworks, and one of the three major mainstream front-end frameworks. It's a complete solution, but it can be highly intrusive to a project; switching frameworks mid-project often requires a complete refactoring. Vue provides a framework for building user interfaces, allowing you to focus solely on the view layer. It's easy to learn and has supporting third-party libraries. Using Vue can improve development efficiency, helping to reduce unnecessary DOM manipulation; it features two-way data binding, and through the framework's provided directives, the front-end only needs to focus on business logic, no longer needing to worry about how the DOM is rendered.

[0046] In many practical applications, it's not just about requiring users to log in and register; it's also about requiring different types of users to have different access permissions to different resources. Within a large enterprise, shared materials, files, and code are often categorized according to different projects. Senior management can access all project materials, while ordinary employees can only access materials for their own project. Therefore, it is essential to implement access control for different situations.

[0047] In current Vue development systems, the common approach to implementing button visibility control based on different conditions is to use the `v-if` directive and then write conditional expressions. This method works well when the conditions are simple and there are few buttons. However, in scenarios with complex conditions and many buttons, every condition in the code needs to be tested and verified, even if some is repetitive. This increases the workload for employees and significantly reduces code readability and maintainability. To address this issue... Figure 2 A flowchart illustrating a button permission control method based on Vue.js provided in this embodiment of the invention is shown below. Figure 2 As shown, the method includes:

[0048] S210: Based on the front-end login information, obtain the front-end page port corresponding to the front-end page;

[0049] First, the user enters their username and password on the login page of the front-end webpage. If it's the user's first time logging into the system, they need to register. During registration, they need to fill in information such as their account, employee ID, job title, length of service, level, and project. This registration information is then stored in relation to the user's employee ID. Later, when the user logs into the front-end webpage, the system searches the memory for the user's account to find the corresponding front-end login information. Based on this login information, the system locates the corresponding front-end page and its port. In this embodiment of the invention, the front-end login information can be one or more combinations of user employee ID, user account, user business information, and business scenario information. The specific details can be determined based on the actual situation, and this embodiment of the invention does not impose any specific limitations on this.

[0050] In this embodiment of the invention, the front-end page is the webpage being developed. This webpage needs to include button components. When developing with Vue, currently the most mainstream front-end framework, button components are a crucial part. In fact, all Vue applications are assembled from numerous small components. Because Vue button components are so important, the Vue ecosystem boasts many UI component libraries, the most famous being Element-UI, which offers a vast array of well-encapsulated components, greatly enhancing development efficiency. During the development of some button components, some need to be displayed while others need to be hidden; the specific choice depends on the current conditions.

[0051] S220, Obtain the button permissions corresponding to the front-end page according to the front-end page port and preset port permission mapping table;

[0052] Then, based on the front-end page port and preset port permission mapping table, the button permission corresponding to that front-end page port is found. Typically, this preset port permission mapping table pre-records the permissions corresponding to each port. Permissions can be divided according to different granularities. For example, they can be divided into high, medium, and low permissions using a coarse-grained approach, with different ports corresponding to different permissions. When the sensitivity of permissions corresponding to different ports is not high, coarse-grained port division can be used, so that even if the port changes at some time, it will not significantly affect the corresponding permissions. Alternatively, permissions can be divided into first-level, second-level, third-level, fourth-level, and fifth-level permissions, with different ports corresponding to different permissions. Fine-grained division is suitable for project data requiring strict confidentiality, where users without access rights are strictly prohibited from access. The specific determination depends on the actual situation, and this embodiment of the invention does not impose specific limitations on this.

[0053] In this embodiment of the invention, the corresponding permissions are looked up based on the front-end page port. The permission is directly associated with the front-end page port, rather than the traditional user role. Traditional user roles are associated with permissions, requiring permission division based on user roles. However, in existing technologies, internal company roles are often ambiguous, leading to unclear role permissions. Furthermore, even with finely defined user roles, frequent changes in company business necessitate constant modification of permissions, which is inconvenient. This embodiment of the invention, by associating permissions with the port, avoids the modifications required by role changes in traditional methods, ensuring code stability and reducing development difficulty.

[0054] S230, based on the button permissions corresponding to the front-end page, obtain all callable buttons, and based on the correspondence table between each callable button and its name, obtain the preset name of each callable button;

[0055] Next, the button permissions corresponding to the front-end page are obtained, resulting in all callable buttons on the page. Callable buttons are those that the front-end page can access under a given permission. The specific details and number of callable buttons correspond to button permissions; different button permissions generally correspond to different callable buttons, which can be determined based on actual circumstances. This embodiment of the invention does not impose specific limitations on this. Then, based on the correspondence between each callable button and its name, a preset name for each callable button is obtained. In this embodiment, the name of each button is pre-set to maintain consistency with the button names used in the public file library, preventing errors during program execution. In this embodiment, the button name correspondence table is stored based on a unique attribute of the button and its corresponding name. When searching for the name of each callable button using the button name correspondence table, one callable button can be searched one by one in the table. After finding the preset name of the current callable button, the same method is used to find the name of the next callable button, and so on, until all the preset names of the callable buttons are found. Alternatively, a binary search method can be used, starting from the middle. The specific process will not be elaborated here.

[0056] S240, based on the preset name of each callable button and the current display condition of each callable button, call the corresponding function in the public file library to display or disable each callable button on the front-end page. The public file library includes all function functions of the button, and the function functions are used to determine whether the input button is displayed based on the current display conditions.

[0057] Then, based on the preset name of each callable button and its current display condition, the corresponding function in the public file library is called. Specifically, the public file library in this embodiment contains all button-related functions, such as creation functions, initialization functions, compilation functions, update functions, mounting functions, display functions, and unmounting functions. These functions are placed in the public file library, and when needed, they can be directly obtained from the public file library without rewriting them. It should be noted that these functions include button display conditions. In all functions, the input includes the button name and the current button display condition, and the output can be determined according to the function. The specific function of each element is defined. For example, in a display function, when a button name and current display conditions are input, the display function performs a series of conditional checks based on the input conditions and ultimately returns a value indicating whether to display the button. For instance, returning 1 indicates that the button should be displayed, and returning 0 indicates that the button should be disabled. The entire conditional check process is concentrated within this function. When the conditional check process needs to be modified, only the code that performs the conditional checks within this function needs to be modified. In this way, the modified conditional check process can be applied to the entire project, avoiding the process of screening and modifying the entire code, thereby improving the readability and maintainability of the entire code.

[0058] This invention provides a Vue-based button permission control method. It searches for corresponding permissions based on the front-end page port, directly associating permissions with the front-end page port rather than traditional user roles. This method avoids the modifications required by role changes in traditional methods, ensuring code stability and reducing development difficulty. Furthermore, the entire button display condition judgment process is concentrated within a function. When the condition judgment process needs modification, only the code performing the condition judgment within that function needs modification. This allows the modified condition judgment process to be applied throughout the entire project, avoiding the need to screen and modify the entire code, thereby improving the readability and maintainability of the code.

[0059] Based on the above embodiments, preferably, the public file library includes a button creation function, a button handling function, and a hook function, wherein:

[0060] The button creation function is used to create a corresponding button based on the input button name;

[0061] The button processing function is used to show or disable a button based on the input button name and preset display conditions;

[0062] The hook function is used to show or disable a button based on the input button name and changes in function control conditions.

[0063] Specifically, the public file library in this embodiment of the invention includes three parts: a button creation function, a button handling function, and a hook function. The button creation function in this embodiment refers to creating a function using the built-in software system functionality of Vue, commonly by directly using the `new` function. The button handling function is responsible for disabling or displaying the button. The input to the button handling function is the button name and the button display condition. When the button handling function receives the button name and the button display condition, it executes the button display condition according to the judgment process in the program and finally outputs a value, which indicates whether the button is displayed or disabled.

[0064] In the implementation, a variable object `ENABLE_EL_TO_SHOW` is defined, using the button name variable as the key and the conditions as the value. The value is also an object containing a function named `when`. This function takes the conditions related to button control as input parameters and outputs a Boolean value calculated based on the combined conditions. This function essentially determines "when" the button is displayed; it returns `true` if the condition is met and `false` if the condition is not met. An example of the structure of the variable `ENABLE_EL_TO_SHOW` is shown below:

[0065]

[0066] As can be seen from the structure above, what follows "when" is the condition to be judged. As long as the condition is met, the corresponding value will be returned.

[0067] Hook functions are functions that execute automatically during the Vue instance's lifecycle, from creation to destruction. They are reserved points in the lifecycle execution flow where developers can execute their own code. The name "hook function" implies that something is attached to the instance. Common hook functions include lifecycle hook functions, custom directive hook functions, and route navigation hook functions. For example, `watch` and `computed` are also hook functions. `watch` automatically executes the corresponding method when monitored data changes, while `computed` recalculates the data when it changes.

[0068] Based on the above embodiments, preferably, the hook functions include a bind hook function, an insert hook function, and an update hook function, wherein:

[0069] The bind hook function is used to bind attributes to the input button;

[0070] The insert hook function is used to show or disable the button when an input is inserted, based on the insertion conditions of the input.

[0071] The update hook function is used to show or disable the button when updating the input, based on the update conditions of the input.

[0072] Specifically, in this embodiment of the invention, the hook functions include the bind hook function, the insert hook function, and the update hook function. These three hook functions perform different functions. The bind hook function binds the instruction to the input button and will only be executed once. The insert hook function is called when the element with the bound instruction is inserted into the page for display. The update hook function is called when the input button is updated.

[0073] Based on the above embodiments, preferably, the front-end login information includes user login information, user business information, and user scenario information.

[0074] In this embodiment of the invention, the front-end login information includes three parts: user login information, user business information, and user scenario information. User login information refers to the information provided during user registration and login. User business information refers to the user's business group information, which may include the business group they belong to and the module they are in within that group (e.g., development or testing). User scenario information refers to the business application scenario the user is in. Determining button permissions based on the front-end login information involves considering these three aspects. One approach is to first determine a broad range of user permissions based on the user business information, and then refine this broad range based on the user login information and user scenario information to ultimately determine the user permissions corresponding to the front-end login information. Alternatively, button permissions can be limited by all three aspects simultaneously. The specific approach can be determined based on the actual situation, and this embodiment of the invention does not impose specific limitations on this.

[0075] Based on the above embodiments, preferably, obtaining the front-end page port corresponding to the front-end page based on the front-end login information includes:

[0076] Obtain the token key based on the user's login account and password;

[0077] Based on the token key, obtain the user business information and the user scenario information;

[0078] Based on the user login information, the user business information, and the user scenario information, and in conjunction with preset port matching rules, the front-end page port is obtained.

[0079] In project development, permission verification and security are crucial; they are fundamental core functionalities that must be considered and implemented from the very beginning. After a user enters their username and password, the server verifies their information. Upon successful verification, the server returns a token key. This token key is then stored in a cookie to ensure the user's login status is remembered after page refreshes. The frontend uses this token key to retrieve user_info information from an API to obtain user business information and user scenario information. Finally, based on the user login information, user business information, and user scenario information, and in accordance with preset port matching rules, the frontend page port is determined.

[0080] Based on the above embodiments, preferably, obtaining all callable buttons according to the button permissions corresponding to the front-end page includes:

[0081] Define the button access permission status object using Vuex, create button directives, and bind a button directive to each button;

[0082] In the button call permission file, obtain the instruction value corresponding to each button, and determine whether each button has permission from the button call permission status object. If it does, then each button is designated as the callable button.

[0083] In this embodiment of the invention, callable buttons are obtained based on the button permissions corresponding to the front-end page. The specific steps are as follows: define a button call permission status object through Vuex, create button instructions, and bind a button instruction to each button; then, obtain the instruction value of the call button in the button call permission file, and determine whether the button has permission from the button call permission status object. If it does, then the button is designated as a callable button.

[0084] In summary, this invention provides a Vue-based button permission control method. By customizing permission control instructions, all button permission control logic is maintained in a single common file, facilitating permission management and making modifications easier as business requirements change. Furthermore, the method of implementing custom permission control functions by only passing condition variables ensures code flexibility, supporting various scenarios. Code readability and maintainability are significantly improved, with benefits becoming more pronounced as the project expands. Optimizing permission buttons through custom instructions not only enhances code readability and maintainability but also reduces the difficulty of requirement changes. Maintaining permission control logic in a common file makes it easy for developers to find relevant code, and the use of the `when` function for conditional judgments is simple and clear. Passing only condition variables allows developers to easily use it in different files, greatly improving project development efficiency.

[0085] Figure 3 This is a schematic diagram of a button permission control system based on Vue, provided as an embodiment of the present invention. Figure 3 As shown, the system includes a port module 310, a permission module 320, a name module 330, and a display module 340, wherein:

[0086] The port module 310 is used to obtain the port of the front-end page corresponding to the front-end page based on the front-end login information;

[0087] The permission module 320 is used to obtain the button permissions corresponding to the front-end page according to the front-end page port and the preset port permission mapping table;

[0088] The name module 330 is used to obtain all callable buttons according to the button permissions corresponding to the front-end page, and to obtain the preset name of each callable button according to the correspondence table between each callable button and button name;

[0089] The display module 340 is used to call the corresponding function in the public file library according to the preset name of each callable button and the current display condition of each callable button, and to display or disable each callable button on the front-end page. The public file library includes all function functions of the button, and the function functions are used to determine whether the input button is displayed according to the current display conditions.

[0090] This embodiment is a system embodiment corresponding to the above method embodiment. Its specific implementation process is the same as that of the above method embodiment. For details, please refer to the above method embodiment. This system embodiment will not be described again here.

[0091] Based on the above embodiments, preferably, the public file library includes a button creation function, a button handling function, and a hook function, wherein:

[0092] The button creation function is used to create a corresponding button based on the input button name;

[0093] The button processing function is used to show or disable a button based on the input button name and preset display conditions;

[0094] The hook function is used to show or disable a button based on the input button name and changes in function control conditions.

[0095] Based on the above embodiments, preferably, the hook functions include a bind hook function, an insert hook function, and an update hook function, wherein:

[0096] The bind hook function is used to bind attributes to the input button;

[0097] The insert hook function is used to show or disable the button when an input is inserted, based on the insertion conditions of the input.

[0098] The update hook function is used to show or disable the button when updating the input, based on the update conditions of the input.

[0099] Based on the above embodiments, preferably, the front-end login information includes user login information, user business information, and user scenario information.

[0100] Based on the above embodiments, preferably, the disconnection module includes a key unit, an information unit, and a matching unit, wherein:

[0101] The key unit is used to obtain the token key based on the user's login account and login password;

[0102] The information unit is used to obtain the user business information and the user scenario information based on the token key;

[0103] The matching unit is used to obtain the front-end page port based on the user login information, the user business information, and the user scenario information, combined with preset port matching rules.

[0104] Based on the above embodiments, preferably, the name module includes an instruction unit and a judgment unit, wherein:

[0105] The instruction unit is used to define a button to call the permission status object through Vuex, create button instructions, and bind a button instruction to each button;

[0106] The judgment unit is used to obtain the instruction value corresponding to each button in the button call permission file, and to obtain whether each button has permission from the button call permission status object. If it does, then each button is regarded as the callable button.

[0107] Based on the above embodiments, preferably, the public file library includes a button display structure, which includes button names and display conditions.

[0108] The various modules in the Vue-based button permission control system described above can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in the processor of a computer device in hardware form or independent of it, or they can be stored in the memory of a computer device in software form, so that the processor can call and execute the corresponding operations of each module.

[0109] Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. The computer device may be a server, and its internal structure diagram may be as follows: Figure 4 As shown, the computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes a computer storage medium and internal memory. The computer storage medium stores the operating system, computer programs, and the database. The internal memory provides the environment for the operation of the operating system and computer programs stored in the computer storage medium. The database stores data generated or acquired during the execution of a Vue-based button access control method, such as front-end login information and front-end page ports. The network interface is used to communicate with external terminals via a network connection. The computer program, when executed by the processor, implements a Vue-based button access control method.

[0110] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the steps of the Vue-based button permission control method described in the above embodiment. Alternatively, when the processor executes the computer program, it implements the functions of each module / unit in this embodiment of the Vue-based button permission control system.

[0111] In one embodiment, a computer storage medium is provided, on which a computer program is stored. When executed by a processor, the computer program implements the steps of the Vue-based button permission control method described in the above embodiment. Alternatively, when executed by a processor, the computer program implements the functions of each module / unit in the above embodiment of the Vue-based button permission control system.

[0112] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0113] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0114] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. 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 of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A button permission control method based on Vue, characterized in that, include: Based on the front-end login information, obtain the port number of the front-end page corresponding to the front-end page; According to the mapping table of front-end page port and preset port permissions, obtain the button permissions corresponding to the front-end page; Based on the button permissions corresponding to the front-end page, obtain all callable buttons, and based on the correspondence table between each callable button and its name, obtain the preset name of each callable button; Based on the preset name of each callable button and the current display conditions of each callable button, the corresponding function in the public file library is called to display or disable each callable button on the front-end page. The public file library includes all function functions of the button, and the function functions are used to determine whether the input button is displayed based on the current display conditions. The public file library includes a button display structure, which uses the button name as the key and a condition object as the value. The condition object includes a when function, which takes a condition variable related to button control as input and outputs a Boolean value calculated by combining the conditions. The when function returns true when the conditions are met and controls the button to be displayed, and returns false when the conditions are not met and controls the button to be disabled.

2. The button permission control method based on Vue according to claim 1, characterized in that, The public file library includes button creation functions, button handling functions, and hook functions, among which: The button creation function is used to create a corresponding button based on the input button name; The button processing function is used to show or disable a button based on the input button name and preset display conditions; The hook function is used to show or disable a button based on the input button name and changes in function control conditions.

3. The button permission control method based on Vue according to claim 2, characterized in that, The hook functions include the bind hook function, the insert hook function, and the update hook function, wherein: The bind hook function is used to bind attributes to the input button; The insert hook function is used to show or disable the button when an input is inserted, based on the insertion conditions of the input. The update hook function is used to show or disable the button when updating the input, based on the update conditions of the input.

4. The button permission control method based on Vue according to claim 1, characterized in that, The front-end login information includes user login information, user business information, and user scenario information.

5. The button permission control method based on Vue according to claim 4, characterized in that, The step of obtaining the front-end page port corresponding to the front-end page based on the front-end login information includes: Obtain the token key based on the user's login account and password; Based on the token key, obtain the user business information and the user scenario information; Based on the user login information, the user business information, and the user scenario information, and in conjunction with preset port matching rules, the front-end page port is obtained.

6. The button permission control method based on Vue according to any one of claims 1 to 5, characterized in that, The step of obtaining all callable buttons based on the button permissions corresponding to the front-end page includes: Define the button access permission status object using Vuex, create button directives, and bind a button directive to each button; In the button call permission file, obtain the instruction value corresponding to each button, and determine whether each button has permission from the button call permission status object. If it does, then each button is designated as the callable button.

7. The button permission control method based on Vue according to any one of claims 1 to 5, characterized in that, The public file library includes a button display structure, which includes button names and display conditions.

8. A button permission control system based on Vue, characterized in that, include: The port module is used to obtain the port of the front-end page corresponding to the front-end page based on the front-end login information. The permission module is used to obtain the button permissions corresponding to the front-end page according to the front-end page port and the preset port permission mapping table; The name module is used to obtain all callable buttons according to the button permissions corresponding to the front-end page, and to obtain the preset name of each callable button according to the correspondence table between each callable button and the button name; The display module is used to call the corresponding function in the public file library according to the preset name of each callable button and the current display condition of each callable button, and to display or disable each callable button on the front-end page. The public file library includes all the function functions of the button, and the function functions are used to determine whether the input button is displayed according to the current display conditions. The public file library includes a button display structure, which uses the button name as the key and a condition object as the value. The condition object includes a when function, which takes a condition variable related to button control as input and outputs a Boolean value calculated by combining the conditions. The when function returns true when the conditions are met and controls the button to be displayed, and returns false when the conditions are not met and controls the button to be disabled.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the Vue-based button permission control method as described in any one of claims 1 to 7.

10. A computer storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the Vue-based button permission control method as described in any one of claims 1 to 7.

Images