CN117792710A

CN117792710A - Front-end authentication method and system based on Vue

Info

Publication number: CN117792710A
Application number: CN202311713026.6A
Authority: CN
Inventors: 杨祺
Original assignee: Shenzhen Gosling Network Technology Co ltd
Current assignee: Shenzhen Gosling Network Technology Co ltd
Priority date: 2023-12-13
Filing date: 2023-12-13
Publication date: 2024-03-29

Abstract

The invention discloses a front-end authentication method and a front-end authentication system based on Vue, wherein the method comprises the following steps: acquiring a permission data set of a user; configuring authority identification of a functional component in a page; when clicking the functional component, judging whether the user has the use authority of the corresponding functional component according to the authority data set and the authority identification corresponding to the clicked functional component, and intercepting a clicking event if the user has no authority. The invention obtains the authority data set of the current user in advance, and the front end is directly authenticated without the need of the back end verification when clicking the corresponding functional component, thereby solving the problems that the service end authentication resource request frequency is too high and the user returns to the authentication prompt page after the user first clicks the functional page.

Description

Front-end authentication method and system based on Vue

Technical Field

The invention relates to the technical field of front-end authority management, in particular to a front-end authentication method and system based on Vue.

Background

Conventional functional authentication is typically not implemented by the front-end, but by the server (gateway). The design is mainly used for ensuring the system security and data integrity and avoiding illegal operation and unauthorized access of the front end. When a user browses a web page and attempts to use a certain function, the browser sends a web request to the server. The server acquires the identification information of the user, such as the identity credential or session information of the user, in the request header. And the server side inquires the authority data of the user according to the identification information and combines the corresponding function authority set of the user to judge the authority. By comparing the authority of the user with the authority required by the current function, the server can accurately judge whether the user has enough authority to access the current function.

In the permission judging process, if the server side finds that the user does not have permission to access the current function, the server side generally returns a response to the front end by using the agreed permission deficiency status code. The front end can display proper authority deficiency prompt information to the user according to specific service requirements and perform corresponding interactive presentation according to the state code. For example, a pop-up window is presented to prompt the user for unauthorized operation or to disable related function buttons on the interface, etc. This front-end and back-end separation of rights authentication has some advantages. Firstly, the authority authentication is handed to the server side, so that the data security can be ensured, and the front end is prevented from being modified or bypassing the authority authentication. And secondly, the server can uniformly manage and maintain the authority data of the user, provide more accurate authority control, and update and change the authority without modifying the front-end code every time. In addition, the server authentication can avoid exposing the authority information to the front end, and the security of the system is improved.

However, conventional functional authentication approaches also suffer from a number of disadvantages. Firstly, even if the user has functional authority, the request can still be initiated and data can be transmitted, which can cause the problems of low utilization rate of certain resource request, waste of network bandwidth and the like. Second, authentication requests are typically initiated at the end of the functional flow, which may lead to the user returning an authentication prompt page after entering the functional page, thereby nullifying previous operations or inputs, affecting the user experience.

Disclosure of Invention

In order to solve at least one technical problem, the invention provides a front-end authentication method based on Vue, which aims to solve the problems that the service-end authentication resource request frequency is too high and a user returns an authentication prompt page after entering a function page.

In one aspect, a Vue-based front end authentication method is provided, including:

acquiring a permission data set of a user;

configuring authority identification of a functional component in a page;

when clicking the functional component, judging whether the user has the use authority of the corresponding functional component according to the authority data set and the authority identification corresponding to the clicked functional component, and intercepting a clicking event if the user has no authority.

Preferably, the authority identification of the functional component in the configuration page includes:

mounting a pre-packaged Vue authentication instruction on a functional component to be authenticated;

and adding the authority identification to the attribute of the functional component by adopting the Vue authentication instruction.

Preferably, the determining whether the user has the use authority of the corresponding functional component according to the authority data set and the authority identifier corresponding to the clicked functional component includes:

searching and matching the authority data set based on the authority identification;

if the authority data containing the authority identification is matched, determining that the user has the authority on the current functional component;

and if the authority data containing the authority identification is not matched, determining that the user has no authority on the currently clicked functional component.

Preferably, said performing a search match on said rights data set based on said rights identification includes:

acquiring authority identifiers of a plurality of ancestor nodes of a current functional component;

and searching and matching the authority data set based on the current functional component and the authority identifications of the ancestor nodes.

Preferably, the method further comprises:

when the authority data set of the user is changed, the server side issues a new authority data set to the front end;

and the front end reconfigures the authority identification of the functional component in the page according to the new authority data set.

Preferably, the authority data set is the authority data set of the current page or the authority data sets of all pages.

In a second aspect, there is provided a Vue-based front-end authentication system, including:

the data acquisition unit is used for acquiring a right data set of a user;

the data processing unit is used for configuring the authority identification of the functional component in the page;

and the authentication processing unit is used for judging whether the user has the use authority of the corresponding functional component according to the authority data set and the authority identification corresponding to the clicked functional component when clicking the functional component, and intercepting a clicking event if the user has no authority.

In a third aspect, an electronic device is provided, including a processor, a communication interface, a memory, and a communication bus, where the processor, the communication interface, and the memory complete communication with each other through the communication bus; a memory for storing a computer program; and the processor is used for realizing the front-end authentication method based on the Vue when executing the program stored in the memory.

In a fourth aspect, a computer readable storage medium is provided, in which a computer program is stored, the computer program comprising program instructions which, when executed by a processor of an electronic device, cause the processor to perform the Vue-based front-end authentication method.

The invention discloses a front-end authentication method and a front-end authentication system based on Vue, wherein the method comprises the following steps: acquiring a permission data set of a user; configuring authority identification of a functional component in a page; when clicking the functional component, judging whether the user has the use authority of the corresponding functional component according to the authority data set and the authority identification corresponding to the clicked functional component, and intercepting a clicking event if the user has no authority. The invention obtains the authority data set of the current user in advance, and the front end is directly authenticated without the need of the back end verification when clicking the corresponding functional component, thereby solving the problems that the utilization rate of the authentication resource request of the server is low and the user returns to the authentication prompt page after entering the functional page.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

In order to more clearly describe the embodiments of the present invention or the technical solutions in the background art, the following description will describe the drawings that are required to be used in the embodiments of the present invention or the background art.

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure.

Fig. 1 is a schematic flow chart of a front-end authentication method based on Vue according to an embodiment of the present invention;

fig. 2 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.

Detailed Description

In order that those skilled in the art will better understand the present invention, a technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in which it is apparent that the described embodiments are only some embodiments of the present invention, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

The terms first, second and the like in the description and in the claims and in the above-described figures are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order. Furthermore, the terms "comprise" and "have," as well as any variations thereof, are intended to cover a non-exclusive inclusion. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those listed steps or elements but may include other steps or elements not listed or inherent to such process, method, article, or apparatus.

The term "and/or" is herein merely an association relationship describing an associated object, meaning that there may be three relationships, e.g., a and/or B, may represent: a exists alone, A and B exist together, and B exists alone. In addition, the term "at least one" herein means any one of a plurality or any combination of at least two of a plurality, for example, including at least one of A, B, C, and may mean including any one or more elements selected from the group consisting of A, B and C.

Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the invention. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.

Furthermore, in the following detailed description, numerous specific details are set forth in order to provide a better illustration of the invention. It will be understood by those skilled in the art that the present invention may be practiced without some of these specific details. In some instances, well known methods, procedures, components, and circuits have not been described in detail so as not to obscure the present invention.

At present, the conventional function authentication mode also has some defects. Firstly, even if the user has functional authority, the request can still be initiated and data can be transmitted, which can cause the problems of low utilization rate of certain resource request, waste of network bandwidth and the like. Second, authentication requests are typically initiated at the end of the functional flow, which may lead to the user returning an authentication prompt page after entering the functional page, thereby nullifying previous operations or inputs, affecting the user experience.

Example 1

There is provided a Vue-based front end authentication method, referring to fig. 1, including:

s100, acquiring a right data set of a user;

the permission data set is a current user's use permission data set, and can be represented by an object array, for example, a user a permission data set A [ { "photographing function": true }, { "recording function": true }, { "data uploading function": false } ], which indicates that the user a enjoys photographing function permission and recording function permission and has no data uploading function permission. The rights object structure is { id: boolean }, id represents a function identifier, boolean represents whether the current object enjoys the right of use of the function, and herein, for convenience of understanding and viewing, "photographing function", "recording function", and "data uploading function" are directly used as function identifiers.

In this embodiment, when the user accesses the current page, the server is directly requested to return all the authority data of the user on the page, so as to obtain the authority data set.

In one possible embodiment, when the user logs in the application program, the server side can return the function authority set needed in the whole application use process of the user to the client side once after the authentication is successful, and cache the user authority data set to the local of the client side so as to quickly access in the later operation, thereby reducing the authority inquiry request initiated by the client side to the server side, reducing the network load and improving the response speed and the user experience of the application program.

S200, configuring authority identifiers of functional components in the page;

in this embodiment, a corresponding permission identifier is added to the attribute of each functional component that needs authentication, where the permission identifier is a function identifier in the cached permission dataset of the current user, i.e. id in { id: bootan }. For example, '< button "photographing function" > "photographing button >' means that the permission identification" photographing function "is added to the original '< button > photographing button >' function component.

And S300, when clicking the functional component, judging whether the user has the use authority of the corresponding functional component according to the authority data set and the authority identification corresponding to the clicked functional component, and if not, intercepting the clicking event.

In this embodiment, when the user clicks the function component requiring authentication, the added click event listener is triggered, and the permission identifier configured in the attribute of the function component is obtained in the callback function of the event listener, for example, when the "photographing" function component < button "photographing function" > photographing function "is clicked, the permission identifier" photographing function "is obtained. According to the permission identifier of the 'photographing function' and the cached permission data set A, the [ { photographing function: true }, { recording function: true }, { data uploading function: false } ], judging whether the user has the use permission of the 'photographing function', if the user has the use permission of the 'photographing function', directly skipping a photographing page to perform photographing operation, if the user does not have permission, intercepting a clicking event, not entering the photographing page, and performing non-permission reminding on the user.

Preferably, configuring authority identification of the functional components in the page includes:

and adding the authority identification to the attribute of the functional component by adopting a Vue authentication instruction.

It should be noted that Vue is a popular JavaScript framework, which focuses on building a user interface. The Vue has the characteristics of simple grammar and easy learning, so that a developer can quickly construct a Web application program with strong interactivity and response. Where the instruction function of Vue is one of its core functions, it allows a developer to use specific instructions in templates to manipulate DOM elements, bind data, and implement interaction logic. Through the instruction, a developer can directly operate DOM elements in the template, and change the attribute, the style or the binding event of the DOM elements, so that rich interaction effects are realized. The instruction can decouple the business logic from the view through a concise grammar and an intuitive mode, so that the readability and maintainability of codes are improved.

In this embodiment, an authentication command v-auth is encapsulated, which is used to add the rights identification to each functional component that needs authentication. And adding a v-auth instruction on the functional component needing authentication, and transmitting a corresponding permission identifier as a parameter of the instruction. For example, a v-auth instruction is mounted on the function component of the ' < button > photo button >, so as to obtain the ' < button v-auth= "photo function" > photo button > ', and after the processing of the v-auth instruction, the function component of the ' < button "photo function" > photo button > ' with the permission identification is obtained, and when the user clicks the photo function component, the user can judge whether the user has the use permission of the "photo function" according to the permission identifier "photo function" and the cached permission data set A: [ { "photo function": true }, { "record function": true }, { "data uploading function": false }, so as to achieve the effect of front-end authentication.

Preferably, determining whether the user has a right of use of the corresponding functional component according to the right data set and the right identifier corresponding to the clicked functional component includes:

if the authority data containing the authority identification is not matched, determining that the user has no authority on the currently clicked functional component.

In this embodiment, it is assumed that the acquired permission identifier is a "photographing function", the cached permission data set B is [ "photographing function", "recording function" ], the permission data set B identifies a function identifier set having a use permission of the current user, and the permission identifier appearing in the permission data set represents that the current user has a permission to use the corresponding function. Because the permission data set B is matched with the permission identifier 'photographing function' corresponding to the currently clicked function component, the current user is determined to have the use permission on the photographing function component. The acquired permission identifier is assumed to be a data uploading function, and the cached permission data set B is [ "photographing function", "recording function" ]. Because the permission data set B is not matched with the permission identification data uploading function corresponding to the currently clicked function component, the fact that the current user has no use permission on the photographing function component is determined.

In one possible embodiment, when the obtained rights identification is "photographing function", the cached rights data set is a rights data set A [ { "photographing function": true }, { "recording function": true }, { "data uploading function": false } ], and the rights object { "photographing function": true }, which is associated with the rights identification "photographing function", is found in the rights data set, and since the value corresponding to the "photographing function" is true, it is determined that the current user has the use rights on the photographing function component. When the acquired permission label is the 'data uploading function', the cached permission data set is the permission data set A [ { 'photographing function': true }, { 'recording function': true }, { 'data uploading function': false } ], and the permission object { 'data uploading function': false }, which is associated with the permission label 'photographing function', is found in the permission data set, and the fact that the value corresponding to the 'data uploading function' is false is determined that the current user has no use permission on the photographing function component.

In another possible embodiment, the rights data set is characterized by other data formats including, but not limited to, strings, tree structures, databases, and the like.

Preferably, the searching and matching the authority data set based on the authority identification comprises:

and searching and matching the authority data set based on the authority identifications of the current functional component and the ancestor nodes.

In this embodiment, the authority identification of the current functional component can be obtained by recursively traversing the ancestor nodes of them. Ancestor nodes refer to the parent node to which the current component belongs, the parent node of the parent node, and so on until the root node is reached. In the traversal process, corresponding authority identifiers can be extracted and stored in a list or a set after one ancestor node is traversed, and the obtained authority identifiers of the ancestor nodes are used for searching and matching in an authority data set in combination with the authority identifiers of the current functional components. The rights identifications may be aligned one by one in order from the ancestor node to the current functional component. If the authority data set has the corresponding authority identification, the user is indicated to have the corresponding authority, and if the authority identification of the current functional component and the ancestor node does not exist in the authority data set, the user is indicated to have no use authority of the current clicking functional component.

By acquiring the authority identifiers of a plurality of ancestor nodes of the current functional component and searching and matching the authority data set, more accurate and fine-grained authority control can be realized.

Preferably, the method further comprises:

the front end reconfigures the authority identification of the functional components in the page according to the new authority data set.

The server needs to monitor the event of the permission change, and if the permission data set of the current user is changed, the server can issue a new permission data set to the front end so as to reflect the latest permission change. After receiving the new authority data set, the front end can reconfigure the authority identifiers of all the functional components in the page so as to ensure the accuracy and instantaneity of the user authority value.

Preferably, the permission data set is the permission data set of the current page or the permission data sets of all pages.

For the rights data set of the current page, it provides a more accurate and refined rights control based on the functional components and operations displayed by the current page. This means that the user can only access and operate the functions allowed by the current page, while there is no right to the functions of the other pages. Such fine-grained entitlement control may effectively protect sensitive data and sensitive operations from unauthorized access and misoperations. For the rights data set of all pages, it provides an overall consistent rights control policy. When a user switches pages in an application, there is no need to re-acquire or update the rights data sets, as the rights data sets for all pages are already saved at the front end and available at any time. Thus, network request and server burden can be saved, and the performance and response speed of the application program can be improved. Meanwhile, the user can browse and operate different pages more conveniently without repeatedly verifying the authority or waiting for the acquisition of the authority.

Example 2

There is provided a Vue-based front-end authentication system comprising:

the data acquisition unit is used for acquiring a right data set of a user;

Example 3

Referring to fig. 2, fig. 2 is a schematic structural diagram of an electronic device according to an embodiment of the present invention. The electronic device 600 as shown in fig. 2 includes: at least one processor 601, memory 602, at least one network interface 604, and other user interfaces 603. The various components in the electronic device 600 are coupled together by a bus system 605. It is understood that the bus system 605 is used to enable connected communications between these components. The bus system 605 includes a power bus, a control bus, and a status signal bus in addition to a data bus. But for clarity of illustration the various buses are labeled as bus system 605 in fig. 2.

The user interface 603 may include, among other things, a display, a keyboard, or a pointing device (e.g., a mouse, a trackball, a touch pad, or a touch screen, etc.).

It is to be appreciated that the memory 602 in embodiments of the invention may be either volatile memory or nonvolatile memory, or may include both volatile and nonvolatile memory. The nonvolatile Memory may be a Read-Only Memory (ROM), a Programmable ROM (PROM), an Erasable PROM (EPROM), an Electrically Erasable EPROM (EEPROM), or a flash Memory. The volatile memory may be random access memory (Random Access Memory, RAM) which acts as an external cache. By way of example, and not limitation, many forms of RAM are available, such as Static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double Data Rate SDRAM (Double Data Rate SDRAM), enhanced SDRAM (ESDRAM), synchronous Link DRAM (SLDRAM), and Direct memory bus RAM (DRRAM). The memory 602 described herein is intended to comprise, without being limited to, these and any other suitable types of memory.

In some implementations, the memory 602 stores the following elements, executable units or data structures, or a subset thereof, or an extended set thereof: an operating system 6021 and application programs 6022.

The operating system 6021 includes various system programs, such as a framework layer, a core library layer, a driver layer, and the like, for implementing various basic services and processing hardware-based tasks. The application 6022 includes various application programs such as a Media Player (Media Player), a Browser (Browser), and the like for realizing various application services. The program for implementing the method of the embodiment of the present invention may be included in the application 6022.

In the embodiment of the present invention, the processor 601 is configured to execute the steps of a Vue-based front-end authentication method provided by the method embodiments by calling a program or an instruction stored in the memory 602, specifically, a program or an instruction stored in the application 6022.

Example 4

There is provided a computer readable storage medium having stored therein a computer program comprising program instructions which, when executed by a processor of an electronic device, cause the processor to perform a Vue-based front-end authentication method.

The foregoing is only a specific embodiment of the invention to enable those skilled in the art to understand or practice the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the invention. Thus, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A Vue-based front-end authentication method, comprising:

acquiring a permission data set of a user;

configuring authority identification of a functional component in a page;

2. The Vue-based front-end authentication method of claim 1, wherein configuring the authority identification of the functional component in the page includes:

3. The Vue-based front-end authentication method according to claim 2, wherein the determining whether the user has the use authority of the corresponding functional component according to the authority data set and the authority identifier corresponding to the clicked functional component includes:

4. A Vue-based front end authentication method according to claim 3, wherein said performing a search match on the rights data set based on the rights identification comprises:

5. The Vue-based front end authentication method of claim 4, further comprising:

6. The Vue-based front-end authentication method of claim 1, wherein the permission dataset is a permission dataset of a current page or permission datasets of all pages.

7. A Vue-based front-end authentication system, comprising:

the data acquisition unit is used for acquiring a right data set of a user;

8. The electronic equipment is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus;

a memory for storing a computer program;

a processor for implementing a Vue-based front-end authentication method as claimed in claims 1 to 6 when executing a program stored on a memory.

9. A computer readable storage medium, characterized in that the computer readable storage medium has stored therein a computer program comprising program instructions which, when executed by a processor of an electronic device, cause the processor to perform the Vue-based front-end authentication method of any one of claims 1 to 7.