Page operation control method and device, equipment and storage medium

Abstract

The present application relates to the technical field of Internet, and especially relates to a page operation control method and device, equipment and storage medium, wherein when a target page element corresponding to a preset sensitive operation in a Web application page is triggered, the execution of the preset sensitive operation is prevented through a custom Vue instruction bound to the target page element, and a display credential input window is triggered; the verification credential input through the credential input window is received; the verification credential is sent to the server corresponding to the Web application page for verification; if the operation authorization credential corresponding to the preset sensitive operation returned by the server after the verification credential is verified successfully is received, the execution of the preset sensitive operation is restored according to the operation authorization credential, compared with the prior art, the present application can reduce the backend authentication pressure, improve the coherence of the interactive experience, and reduce the development and maintenance cost of the Web application.

Description

Technical Field

[0001] This invention relates to the field of Internet technology, and in particular to a page operation control method, a page operation control device, a computer device, and a computer-readable storage medium. Background Technology

[0002] Currently, in modern web application architectures, the interaction between the front-end and back-end is becoming increasingly frequent, making secondary verification for sensitive operations on the front-end a critical issue. A common authentication method involves centralized verification on the server side. All sensitive operation requests, upon reaching the server, determine whether secondary verification is required and return corresponding instructions or redirect to a verification page. While this method of controlling sensitive operations achieves security, it significantly increases the server's workload because all authentication logic is processed on the back-end. Summary of the Invention

[0003] This invention provides a page operation control method, a page operation control device, a computer device, and a computer-readable storage medium, which can reduce the backend authentication pressure, improve the continuity of the interactive experience, and reduce the development and maintenance costs of web applications.

[0004] On one hand, the page operation control method provided by the present invention includes: When a target page element corresponding to a preset sensitive operation is triggered in a web application page, the execution of the preset sensitive operation is prevented by a custom Vue directive bound to the target page element, and the credential input window is triggered to be displayed. Receive the entered verification credentials through the credentials input window; The verification credentials are sent to the server corresponding to the web application page for verification. If the server returns an operation authorization credential corresponding to the preset sensitive operation after successful verification of the credentials, the execution of the preset sensitive operation will be resumed based on the operation authorization credential.

[0005] Secondly, the page operation control device provided by the present invention includes: The operation interception module is used to prevent the execution of preset sensitive operations by using a custom Vue directive bound to the target page element when the target page element corresponding to the preset sensitive operation is triggered in the web application page, and to trigger the display of the credentials input window. The credentials input module is used to receive verification credentials entered through the credentials input window; The credential transmission module is used to send verification credentials to the server corresponding to the web application page for verification; The operation control module is used to resume the execution of the preset sensitive operation based on the operation authorization credential returned by the server after successful verification of the credentials.

[0006] Optionally, in one embodiment, the operation interception module is used to intercept the original event handler function corresponding to the preset sensitive operation through a custom Vue directive, and record the operation context information corresponding to the preset sensitive operation; The operation control module is used to call the original event handler function to execute preset sensitive operations based on the operation authorization certificate and operation context information.

[0007] Optionally, in one embodiment, the page operation control device provided by the present invention further includes an information maintenance module, used to delete operation context information when a preset sensitive operation is successfully executed.

[0008] Optionally, in one embodiment, the operation control module is used to obtain the remaining validity period of the operation authorization certificate. If the remaining validity period reaches the duration threshold, the original event handler function is called to execute a preset sensitive operation based on the operation authorization certificate and operation context information.

[0009] Optionally, in one embodiment, the credential transmission module is used to encrypt the verification credential using a preset encryption strategy and send the encrypted verification credential to the server corresponding to the web application page for verification.

[0010] Optionally, in one embodiment, the operation interception module is used to trigger a credential input window that displays a modal box.

[0011] Optionally, in one embodiment, the page operation control device provided by the present invention further includes a response interception module, which is used to trigger the display of a credential input window through the HTTP response interceptor when an invalidation response indicating that the operation authorization credential has expired is intercepted by the HTTP response interceptor. The credentials input module is also used to re-receive the input verification credentials through the credentials input window; The credential transmission module is also used to resend the verification credentials to the server corresponding to the web application page for verification; The operation control module is also used to resume the execution of the preset sensitive operation based on the operation authorization credential returned by the server after successful re-verification of the credentials.

[0012] Thirdly, the computer device provided by the present invention includes 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 page operation control method provided by the present invention.

[0013] Fourthly, the computer-readable storage medium provided by the present invention stores a computer program, which, when executed by a processor, implements the page operation control method provided by the present invention.

[0014] This invention provides a page operation control scheme. When a target page element corresponding to a preset sensitive operation is triggered in a web application page, the execution of the preset sensitive operation is prevented by a custom Vue directive bound to the target page element, and a credential input window is displayed. The input verification credential is received through the credential input window and sent to the corresponding server of the web application page for verification. If the server returns an operation authorization credential corresponding to the preset sensitive operation after successful verification of the verification credential, the execution of the preset sensitive operation is resumed based on the operation authorization credential. Compared with related technologies, this invention reduces the authentication pressure on the server for each sensitive operation by handling some authentication logic, such as the initiation of secondary verification, on the front end. Furthermore, by seamlessly integrating the secondary verification process into the user's natural operation path through a custom Vue directive, the user can complete credential input and authorization verification without interrupting the original operation flow when a sensitive operation is triggered, thus improving the continuity of the interactive experience. At the same time, the custom Vue directive can be bound to any page element as needed to achieve fine-grained control over different sensitive operations, eliminating the need to repeatedly develop different authentication logic, thereby reducing the development and maintenance costs of web applications. Attached Figure Description

[0015] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0016] Figure 1 This is a flowchart illustrating the page operation control method provided in an embodiment of the present invention; Figure 2 This is an example diagram of a credential input window in an embodiment of the present invention; Figure 3 This is a schematic diagram of the structure of the page operation control device provided in an embodiment of the present invention; Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Detailed Implementation

[0017] To make the technical problems solved, the technical solutions, and the beneficial effects of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

[0018] It should be understood that, when used in this specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or collections thereof.

[0019] It should also be understood that the term “and / or” as used in this specification and the appended claims refers to any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0020] As used in this specification and the appended claims, the term "if" may be interpreted, depending on the context, as "when," "once," "in response to determination," or "in response to detection." Similarly, the phrase "if determined" or "if [described condition or event] is detected" may be interpreted, depending on the context, as meaning "once determined," "in response to determination," "once [described condition or event] is detected," or "in response to detection of [described condition or event]."

[0021] Furthermore, in the description of this invention and the appended claims, the terms "first," "second," "third," etc., are used only for distinguishing descriptions and should not be construed as indicating or implying relative importance.

[0022] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of the invention include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0023] This invention provides a page operation control method, a page operation control device, a computer device, and a storage medium. The page operation control method can be executed by the page operation control device or by a computer device integrating the page operation control device. Specifically, when a target page element corresponding to a preset sensitive operation is triggered in a web application page, the execution of the preset sensitive operation is prevented by a custom Vue directive bound to the target page element, and a credential input window is triggered. The input verification credential is received through the credential input window; the verification credential is sent to the server corresponding to the web application page for verification; if an operation authorization credential corresponding to the preset sensitive operation is returned by the server after successful verification of the verification credential, the execution of the preset sensitive operation is resumed based on the operation authorization credential.

[0024] Please refer to Figure 1 This is a flowchart illustrating a page operation control method disclosed in an embodiment of the present invention, as shown below. Figure 1 As shown, the flow of this page operation control method can be as follows: In S110, when a target page element corresponding to a preset sensitive operation is triggered in a web application page, the execution of the preset sensitive operation is prevented by a custom Vue directive bound to the target page element, and a credential input window is triggered to be displayed.

[0025] Web applications are applications accessed through a web browser and interact with the server based on the HTTP / HTTPS protocol. Users do not need to install a client; they can use their functions directly through a web browser. Their core characteristic is a "client-server architecture": the front-end (web browser) is responsible for user interface display and interaction, while the back-end (server) is responsible for data processing and logical operations. Data is transmitted between the two over a network. Typical web applications include, but are not limited to, online document editing systems, enterprise OA systems, and cloud storage service platforms.

[0026] Preset sensitive operations refer to sensitive operations that require secondary verification. They can be set according to actual secondary verification needs, including but not limited to sensitive operations in web application pages that may affect system security, data integrity, or user privacy, such as deleting critical data, exporting sensitive files, modifying core configurations, or executing high-privilege commands.

[0027] Target page elements refer to interactive components in a web application page used to trigger preset sensitive operations, such as buttons, links, or menu items.

[0028] It should be noted that, in this embodiment of the invention, a custom Vue directive for intercepting sensitive operations is predefined and encapsulated based on the Vue framework. The underlying code implementation of this custom Vue directive is not specifically limited here and can be flexibly implemented by those skilled in the art according to actual needs. To achieve secondary verification of the preset sensitive operations, this embodiment of the invention also binds the custom Vue directive to the target page element.

[0029] For example, unique identifiers can be assigned to different preset sensitive operations, and based on the declarative syntax of the Vue framework, these unique identifiers can be passed as parameters to custom Vue directives to bind them to target page elements. For a single preset sensitive operation, its corresponding API request path, business scenario identifier, or a distinguishable string can be used as the unique identifier. For example: <button v-auth-modal="'user:delete'"> Delete user< / button> , where v-auth-modal represents a custom Vue directive, and 'user:delete' is the unique identifier for the preset sensitive operation "delete user".

[0030] In this embodiment of the invention, after binding a custom Vue directive to a target page element corresponding to a preset sensitive operation in a web application page, when the user triggers the target page element, the custom Vue directive will prevent the execution of the preset sensitive operation and trigger a credential input window to prompt the user to enter verification credentials, such as a password, SMS verification code, or biometric authentication, etc.

[0031] In practical implementation, the custom Vue directive performs initialization in Vue's lifecycle hooks (such as `mounted` or `updated`): it removes the original event listeners of the target page element and replaces them with proxy event handlers defined internally by the Vue directive. These proxy event handlers intercept native events when the target page element is clicked, preventing the default sensitive operation execution flow and further event propagation. Instead, it calls an independent window function (such as `createAuthModal`) to dynamically create and render a credential input window. This can be done using Element Plus's `EIDialog` component or dynamically creating the credential input window through Vue's `h` function. It should be noted that the specific implementation form of the credential input window in this embodiment is not limited and can be flexibly chosen based on the front-end technology stack.

[0032] In S120, the entered verification credentials are received through the credentials input window.

[0033] Verification credentials are crucial information used to verify a user's identity during the two-factor authentication process. Their format can be flexibly configured according to security level requirements, including but not limited to passwords, dynamic verification codes, and biometric data such as fingerprints or facial recognition. For example, high-risk operations such as "deleting a user" may require both a dynamic verification code and a password, while medium- and low-risk operations may only require a single verification method to ensure flexible adaptation of security policies.

[0034] In this embodiment of the invention, a credential input window is displayed to request the user to input verification credentials corresponding to the current preset sensitive operation, thereby verifying the authenticity of the user's identity and ensuring that the operation is initiated by an authorized user.

[0035] For example, please refer to Figure 2 The credentials input window includes a prompt message for the user to enter a verification credential - a dynamic verification code, an input box, and a confirmation button. After the user enters the dynamic verification code in the input box, clicking the confirmation button triggers a verification request.

[0036] In S130, the verification credentials are sent to the server corresponding to the web application page for verification.

[0037] In this embodiment of the invention, after receiving the verification credentials submitted by the user through the displayed credential input window, the verification credentials are further sent to the server corresponding to the web application page for verification. Upon receiving the verification credentials, the server compares and verifies them using a preset user authentication mechanism to confirm their validity. If the verification passes, it returns an operation authorization credential allowing the execution of the preset sensitive operation; if the verification fails, it returns an error message and rejects the operation request.

[0038] In practical implementation, the server can provide a unified verification interface, such as the "getOperateCode" interface. The received verification credentials and the unique identifier corresponding to the preset sensitive operation are passed to this interface as the requestUri parameter. The server verifies the validity of the verification credentials. If the verification passes, the operation authorization credential bound to the aforementioned unique identifier is returned; otherwise, an error message is displayed and the operation request is rejected.

[0039] In S140, if the server returns an operation authorization credential corresponding to the preset sensitive operation after successfully verifying the credentials, the execution of the preset sensitive operation is resumed based on the operation authorization credential.

[0040] As mentioned above, if the server successfully verifies the credentials, it will return an operation authorization credential corresponding to the preset sensitive operation. Upon receiving the operation authorization credential returned by the server, it indicates that the user's identity has passed the secondary verification and that the user has the legal authority to execute the preset sensitive operation. At this time, the execution flow of the preset sensitive operation can be restored according to the operation authorization credential to ensure that the operation is completed within the scope of legal authorization.

[0041] In addition, after receiving the authorization credentials for the above operations, the credential input window is stopped from being displayed to prevent users' sensitive information from being continuously exposed on the page and to improve the security of the interaction.

[0042] Optionally, in one embodiment, blocking the execution of preset sensitive operations by using a custom Vue directive bound to the target page element includes: Intercept the original event handler function corresponding to the preset sensitive operation by using a custom Vue directive, and record the operation context information corresponding to the preset sensitive operation; Restore the execution of preset sensitive operations based on the operation authorization credentials, including: Based on the operation authorization credentials and operation context information, the original event handler function is invoked to execute the preset sensitive operation.

[0043] In this embodiment of the invention, when preventing the execution of a preset sensitive operation, the original event handler function corresponding to the preset sensitive operation is intercepted by a custom Vue directive bound to the target page element. Simultaneously, to ensure accurate restoration of the operation environment upon resumption of execution, the operation context information corresponding to the preset sensitive operation is recorded by the custom Vue directive. This includes the intercepted original event handler function, the unique identifier of the preset sensitive operation, the current event object, and related Vue component instance information. For example, the operation context information can be persistently stored by calling a front-end state management module, such as storing it in a Vuex or Pinia state repository, ensuring that the operation context information is not lost or destroyed during the acquisition of operation authorization credentials.

[0044] Accordingly, upon receiving the operation authorization credential returned by the server, the original event handler function is invoked based on the operation authorization credential and the recorded operation context information to restore and execute the preset sensitive operation, ensuring that the operation context is completely restored.

[0045] In practice, the above operations can be implemented using callback functions. Specifically, when the window function is called to display the credential input window, the logic for resuming the execution of the preset sensitive operation is encapsulated as a success callback function and passed as a parameter to the window function. When the server successfully verifies the operation and returns the operation authorization credential, this success callback function is automatically triggered. It retrieves the previously recorded operation context information from the state repository, restores the event execution environment, and calls the original event handler function based on the operation authorization credential to complete the execution of the preset sensitive operation. It should be noted that during the execution of the preset sensitive operation, subsequent API requests related to this operation will carry the operation authorization credential for the server to verify its legitimacy, ensuring that each operation is performed within the authorized scope.

[0046] Optionally, in one embodiment, after invoking the original event handler function to execute a preset sensitive operation based on the operation authorization credential and operation context information, the method further includes: If the preset sensitive operation is executed successfully, the operation context information is deleted.

[0047] In this embodiment of the invention, after a preset sensitive operation is successfully executed, the operation context information that is no longer needed is deleted to avoid unnecessary duplicate processing or state residue.

[0048] In practice, the operation completion status can be monitored. After confirming the successful execution of the original event handler function, the operation context information corresponding to the preset sensitive operation can be removed from the state repository. For example, an operation completion hook can be added to the callback function to monitor the execution result of the original event handler function. Once the operation is confirmed to be successful, a cleanup operation is immediately triggered in the state repository, deleting the operation context information corresponding to the unique identifier of the preset sensitive operation.

[0049] Optionally, in one embodiment, based on the operation authorization credential and operation context information, the original event handler function is invoked to perform a preset sensitive operation, including: Obtain the remaining validity period of the operation authorization credential. If the remaining validity period reaches the time threshold, then call the original event handler function to execute the preset sensitive operation based on the operation authorization credential and operation context information.

[0050] In this embodiment of the invention, the operation authorization certificate returned by the server has a certain validity period, and this validity period information can be issued together with the operation authorization certificate.

[0051] Accordingly, before calling the original event handler function based on the operation authorization credential and operation context information, the validity period field in the operation authorization credential is parsed to calculate its remaining validity period. If the remaining validity period reaches the time threshold, the original event handler function is called to execute the preset sensitive operation based on the operation authorization credential and operation context information; if the remaining validity period does not reach the time threshold, execution is paused and the credential input window is retried to guide the user to complete the authentication again to obtain a new operation authorization credential.

[0052] For example, assuming the validity period of the operation authorization credential is 10 minutes and the duration threshold is set to 5 seconds, when it is detected that the remaining validity period of the operation authorization credential is less than 5 seconds, the execution is paused and the authentication process is retried to prevent the operation from being interrupted due to the expiration of the credential.

[0053] Optionally, in one embodiment, sending the verification credentials to the server corresponding to the web application page for verification includes: The verification credentials are encrypted using a preset encryption strategy, and the encrypted verification credentials are sent to the server corresponding to the web application page for verification.

[0054] In this embodiment of the invention, to enhance the security of data transmission and prevent the verification credentials from being stolen or tampered with during transmission, a preset encryption strategy is used to encrypt the verification credentials when they are sent to the server corresponding to the web application page for verification. The encrypted verification credentials are then sent to the server corresponding to the web application page, where the server uses a corresponding decryption strategy to decrypt them and complete the verification.

[0055] It should be noted that the configuration of the preset encryption strategy in the embodiments of the present invention is not limited. Different encryption algorithms such as SM2 national cryptographic algorithm, RSA asymmetric encryption or AES symmetric encryption can be selected according to actual security needs. For example, in the embodiments of the present invention, the SM2 national cryptographic algorithm is used to encrypt the verification credentials. By utilizing its asymmetric encryption characteristics, the public key is transmitted publicly and the private key is decrypted securely, effectively preventing man-in-the-middle attacks.

[0056] Optionally, in one embodiment, triggering the display of a credentials input window includes: Triggers the display of a modal form credential input window.

[0057] A modal is a standalone dialog box that sits on top of the current page. It is used to focus the user's attention, force the completion of a specific action, or display key information. Its core feature is to prevent the user from interacting with the underlying page until the action within the modal is completed.

[0058] In this embodiment of the invention, by triggering the display of a credential input window in the form of a modal box, it is ensured that the user cannot operate the underlying page before completing the identity verification, effectively preventing accidental operation or bypassing the verification process.

[0059] Optionally, in one embodiment, after restoring the execution of a preset sensitive operation based on the operation authorization credential, the method further includes: If an invalidation response indicating that the operation authorization credentials have expired is intercepted by the HTTP response interceptor, the HTTP response interceptor will trigger the display of the credentials input window and re-execute the step of receiving the verification credentials input through the credentials input window.

[0060] HTTP response interceptors are mechanisms used to capture and process HTTP responses during client-server communication, enabling preprocessing before the response reaches the business logic layer. For example, when using the Axios library, this can be implemented in the success or error callback of `axios.interceptors.response.use`, or handled uniformly in `src / api / notify.ts`.

[0061] In this embodiment of the invention, all HTTP responses are checked by an HTTP response interceptor. Once an invalid response indicating that the operation authorization credential has expired is intercepted from the server, a re-verification process is immediately triggered. The HTTP response interceptor triggers the display of the credential input window and re-executes the step of receiving the input verification credential through the credential input window until the verification credential is verified and a valid operation authorization credential is obtained again. Then, the execution of the preset sensitive operation is restored based on the newly obtained operation authorization credential.

[0062] In practical implementation, after the HTTP response interceptor intercepts the failure response returned by the server indicating that the operation authorization credential has expired, it calls the preset failure handling function. This failure handling function is configured to check whether there is operation context information in the state repository that has not been successfully executed. If so, it further calls the window parameters to redisplay the credential input window. Unlike the method of passing the success callback function in the above embodiment, the method passed here is a renewal callback function specifically used to recover interrupted operations. After the user re-enters the verification credentials and receives the operation authorization credential reissued by the server, the renewal callback function retrieves the previously recorded operation context information from the state repository, restores the event execution environment, and calls the original event handler function to complete the execution of the preset sensitive operation according to the reissued operation authorization credential.

[0063] The above deep integration with the HTTP response interceptor achieves an elegant and automated handling mechanism for expired operation authorization credentials. This significantly enhances system robustness and user experience consistency, allowing sensitive operation processes to be seamlessly restored without requiring manual refresh or retries from the user in credential expiration scenarios. This mechanism is particularly suitable for scenarios where renewal verification is triggered after prolonged page dwell, effectively avoiding the risk of duplicate submissions while ensuring a balance between security policies and operational continuity.

[0064] As can be seen from the above, the page operation control scheme provided by this invention, when a target page element corresponding to a preset sensitive operation is triggered in a web application page, prevents the execution of the preset sensitive operation by binding a custom Vue directive to the target page element, and triggers the display of a credential input window; receives the input verification credentials through the credential input window; sends the verification credentials to the server corresponding to the web application page for verification; if the server returns an operation authorization credential corresponding to the preset sensitive operation after successful verification of the verification credentials, the execution of the preset sensitive operation is resumed according to the operation authorization credential. Compared with related technologies, this invention reduces the authentication pressure on the server for each sensitive operation by handling some authentication logic such as the initiation of secondary verification on the front end. In addition, by seamlessly integrating the secondary verification process into the user's natural operation path through a custom Vue directive, the user can complete the credential input and authorization verification without interrupting the original operation process when triggering a sensitive operation, which can improve the continuity of the interactive experience. At the same time, the custom Vue directive can be bound to any page element according to actual needs to achieve fine-grained control over different sensitive operations without repeatedly developing different authentication logic, thereby reducing the development and maintenance costs of web applications.

[0065] To facilitate better implementation of the above page operation control methods, this embodiment of the invention also provides a corresponding page operation control device. The meanings of the terms used are the same as in the above page operation control methods; for specific implementation details, please refer to the descriptions in the above method embodiments.

[0066] Please refer to Figure 3 The page operation control device may include an operation interception module 210, a credential input module 220, a credential transmission module 230, and an operation control module 240. Detailed descriptions of each functional module are as follows: The operation interception module 210 is used to prevent the execution of the preset sensitive operation by using a custom Vue directive bound to the target page element when the target page element corresponding to the preset sensitive operation is triggered in the web application page, and to trigger the display of the credentials input window. The credential input module 220 is used to receive input verification credentials through the credential input window; The credential transmission module 230 is used to send the verification credentials to the server corresponding to the web application page for verification. The operation control module 240 is used to resume the execution of the preset sensitive operation based on the operation authorization credential returned by the server after successful verification of the credentials.

[0067] Optionally, in one embodiment, the operation interception module 210 is used to intercept the original event handler function corresponding to the preset sensitive operation through a custom Vue directive, and record the operation context information corresponding to the preset sensitive operation; The operation control module 240 is used to call the original event handler function to execute preset sensitive operations based on the operation authorization certificate and operation context information.

[0068] Optionally, in one embodiment, the page operation control device provided by the present invention further includes an information maintenance module, used to delete operation context information when a preset sensitive operation is successfully executed.

[0069] Optionally, in one embodiment, the operation control module 240 is used to obtain the remaining validity period of the operation authorization certificate. If the remaining validity period reaches the duration threshold, the original event handler function is called to execute a preset sensitive operation based on the operation authorization certificate and operation context information.

[0070] Optionally, in one embodiment, the credential transmission module 230 is used to encrypt the verification credential using a preset encryption strategy and send the encrypted verification credential to the server corresponding to the web application page for verification.

[0071] Optionally, in one embodiment, the operation interception module 210 is used to trigger a credential input window in the form of a modal box.

[0072] Optionally, in one embodiment, the page operation control device provided by the present invention further includes a response interception module, which is used to trigger the display of a credential input window through the HTTP response interceptor when an invalidation response indicating that the operation authorization credential has expired is intercepted by the HTTP response interceptor. The credential input module 220 is also used to re-receive the input verification credentials through the credential input window; Credential transmission module 230 is also used to resend the verification credentials to the server corresponding to the web application page for verification; The operation control module 240 is also used to resume the execution of the preset sensitive operation based on the operation authorization credential returned by the server after successful re-verification of the credentials.

[0073] Specific limitations regarding the page operation control device can be found in the limitations of the page operation control method described above, and will not be repeated here. Each module in the aforementioned page operation control device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0074] In one embodiment, a computer device is provided, the internal structure of which can be shown 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 non-volatile storage medium and internal memory. The non-volatile storage medium stores the operating system, computer programs, and the database. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage medium. The network interface connects to external wireless clients, providing wireless network access services to the connected clients. When executed by the processor, the computer program implements the page operation control method provided by this invention.

[0075] 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 page operation control method described in the above embodiment, for example: When a target page element corresponding to a preset sensitive operation is triggered in a web application page, the execution of the preset sensitive operation is prevented by a custom Vue directive bound to the target page element, and the credential input window is triggered to be displayed. Receive the entered verification credentials through the credentials input window; The verification credentials are sent to the server corresponding to the web application page for verification. If the server returns an operation authorization credential corresponding to the preset sensitive operation after successful verification of the credentials, the execution of the preset sensitive operation will be resumed based on the operation authorization credential.

[0076] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When executed by a processor, the computer program implements the page operation control method described in the above embodiment, for example: When a target page element corresponding to a preset sensitive operation is triggered in a web application page, the execution of the preset sensitive operation is prevented by a custom Vue directive bound to the target page element, and the credential input window is triggered to be displayed. Receive the entered verification credentials through the credentials input window; The verification credentials are sent to the server corresponding to the web application page for verification. If the server returns an operation authorization credential corresponding to the preset sensitive operation after successful verification of the credentials, the execution of the preset sensitive operation will be resumed based on the operation authorization credential.

[0077] 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. This computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program 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 by this invention 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.

[0078] 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.

[0079] 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.

[0080] It should be noted that when the above embodiments of the present invention are applied to specific products or technologies, and user-related data is involved, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

Claims

1. A page operation control method, characterized in that, include: When a target page element corresponding to a preset sensitive operation is triggered in a web application page, the execution of the preset sensitive operation is prevented by a custom Vue directive bound to the target page element, and a credential input window is triggered to be displayed. Receive the input verification credentials through the credential input window; The verification credentials are sent to the server corresponding to the web application page for verification. If the server returns an operation authorization credential corresponding to the preset sensitive operation after successfully verifying the verification credential, then the execution of the preset sensitive operation is restored according to the operation authorization credential; The method of preventing the execution of the preset sensitive operation by binding a custom Vue directive to the target page element includes: The custom Vue directive intercepts the original event handler function corresponding to the preset sensitive operation and records the operation context information corresponding to the preset sensitive operation. Resuming the execution of the preset sensitive operation based on the operation authorization credential includes: Based on the operation authorization credential and the operation context information, the original event handler function is invoked to execute the preset sensitive operation.

2. The page operation control method according to claim 1, characterized in that, After executing the preset sensitive operation by calling the original event handler function based on the operation authorization credential and the operation context information, the method further includes: If the preset sensitive operation is executed successfully, the operation context information is deleted.

3. The page operation control method according to claim 1, characterized in that, The step of invoking the original event handler function to execute the preset sensitive operation based on the operation authorization credential and the operation context information includes: Obtain the remaining validity period of the operation authorization credential. If the remaining validity period reaches the duration threshold, then, based on the operation authorization credential and the operation context information, call the original event handler function to execute the preset sensitive operation.

4. The page operation control method according to claim 1, characterized in that, The step of sending the verification credentials to the server corresponding to the web application page for verification includes: The verification credentials are encrypted using a preset encryption strategy, and the encrypted verification credentials are sent to the server corresponding to the web application page for verification.

5. The page operation control method according to claim 1, characterized in that, The trigger for displaying the credentials input window includes: Triggers the display of a modal form credential input window.

6. The page operation control method according to claim 1, characterized in that, After restoring the execution of the preset sensitive operation based on the operation authorization credential, the method further includes: If an invalidation response indicating that the operation authorization credential has expired is intercepted by the HTTP response interceptor, then the HTTP response interceptor will trigger the display of the credential input window and re-execute the step of receiving the verification credential input through the credential input window.

7. A page operation control device, characterized in that, The page operation control device includes: The operation interception module is used to prevent the execution of the preset sensitive operation by using a custom Vue directive bound to the target page element when the target page element corresponding to the preset sensitive operation is triggered in the web application page, and to trigger the display of the credential input window. A credential input module is used to receive input verification credentials through the credential input window; The credential transmission module is used to send the verification credentials to the server corresponding to the web application page for verification; An operation control module is used to resume the execution of the preset sensitive operation based on the operation authorization credential returned by the server after successfully verifying the verification credential. When the execution of the preset sensitive operation is blocked by a custom Vue directive bound to the target page element, the operation interception module is specifically used to intercept the original event handler function corresponding to the preset sensitive operation by the custom Vue directive, and record the operation context information corresponding to the preset sensitive operation; When resuming the execution of the preset sensitive operation based on the operation authorization credential, the operation control module is specifically used to call the original event handler function to execute the preset sensitive operation based on the operation authorization credential and the operation context information.

8. 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 page operation control method according to any one of claims 1 to 6.

9. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the page operation control method according to any one of claims 1 to 6.

Images