Dynamic configuration and interception embedded method and system based on Vue routing

Abstract

The invention relates to a dynamic configuration and interception embedded method based on Vue routing, which is characterized by comprising the following steps of: storing a routing rule in a back-end database, and carrying out data interaction through a defined API (Application Program Interface); dynamically adding, modifying and deleting the routing rule by using an API (Application Program Interface) of the Vue Router so as to realize dynamic routing configuration; vuex is used as a state management tool to maintain a routing state and user permission information, and it is ensured that the routing access permission is dynamically updated when the user login state changes; according to the method, the global front guard is used, access to the route is controlled according to the user permission information, development efficiency is improved, maintainability and safety are enhanced, and the overall performance and reliability of the embedded system are remarkably improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a dynamic configuration and interception embedded method and system based on Vue routing. Background Art

[0002] With the rapid development of the Internet of Things (IoT) and smart devices, the demand for functions and configurations of embedded systems is increasing, especially in the field of financial technology. As a key infrastructure, embedded systems undertake important transaction and data processing tasks. However, existing embedded systems often face many challenges, such as insufficient flexibility, complex configuration, and poor scalability. These problems directly affect the system's response speed and user experience, and reduce development efficiency and maintenance costs.

[0003] In this context, Vue.js, as a progressive JavaScript framework, has gradually attracted attention for its efficient component-based development and flexible routing management functions. Vue.js not only simplifies the front-end development process, but also supports dynamic rendering and state management, allowing developers to quickly build responsive user interfaces. However, research on how to effectively apply Vue.js to embedded system development, especially in dynamic routing configuration and interception, is still insufficient.

[0004] Traditional embedded development often relies on a lot of manual coding and lacks flexible dynamic configuration capabilities. With the increase in the number of embedded devices and the increase in functional complexity, developers need a more efficient way to manage system routing and configuration. As an important component of Vue.js, Vue Router provides powerful support for building single-page applications (SPAs) and can achieve efficient page switching and state management. However, how to use its dynamic interception and configurability in embedded system applications still needs to be explored in depth.

[0005] This application aims to fill the gap in the existing technology in the application of Vue.js and embedded systems, and proposes a dynamic configuration and interception embedded method based on Vue routing. This solution will provide a more flexible development model for embedded systems, improve the maintainability and scalability of the system, and meet the growing demand of financial technology for embedded devices. Summary of the invention

[0006] In order to solve the shortcomings of the prior art, the present invention realizes a dynamic configuration and interception embedded method based on Vue routing, aiming to solve the problems of large manual coding workload and inflexible configuration in the development process of embedded systems in the prior art. This solution solves the problem of insufficient flexibility and scalability of embedded systems by dynamically configuring routing and flexibly managing permissions.

[0007] To achieve the above objectives, the technical solution adopted by the present invention includes: a dynamic configuration and interception embedded method based on Vue routing, characterized in that it includes: storing routing rules in a back-end database and interacting with data through a defined API interface; using Vue Router's API to dynamically add, modify and delete the routing rules to achieve dynamic routing configuration; using Vuex as a state management tool to maintain routing status and user permission information to ensure that routing access rights are dynamically updated when the user login status changes; using a global front guard to control access to routing according to user permission information.

[0008] Exemplarily, the user authority information is stored by a backend database and obtained when the user logs in.

[0009] Exemplarily, verification is performed based on the user permission information stored in the Vuex to ensure that the user can only access authorized routes.

[0010] Exemplarily, the method utilizes the meta field of Vue Router to store additional information of each route so as to control access rights when the route is accessed.

[0011] Exemplarily, the method uses HTTPS protocol for data transmission to ensure the confidentiality and integrity of the data.

[0012] Exemplarily, the method verifies and filters user input to prevent attacks such as SQL injection.

[0013] The present application also provides a dynamic configuration and interception embedded system based on Vue routing, characterized in that it includes: a front-end module, an embedded service module, a dynamic interception module and a configuration management module;

[0014] The front-end module is used to dynamically add, modify and delete the routing rules using the API of Vue Router to implement dynamic routing configuration;

[0015] The embedded service module is used to store routing rules in a backend database, supporting dynamic update and retrieval;

[0016] The configuration management module is used to use Vuex as a state management tool to maintain routing status and user permission information, ensuring that routing access permissions are dynamically updated when the user login status changes;

[0017] The dynamic interception module is used to control the access of the route according to the permission information;

[0018] Exemplarily, the configuration management module is used to store additional information of each route using the meta field of Vue Router to achieve precise access control;

[0019] Exemplarily, the embedded service module is also used to support the HTTPS protocol to ensure the confidentiality and integrity of data transmission;

[0020] Exemplarily, the dynamic interception module is also used to implement user input verification and filtering to prevent attacks such as SQL injection.

[0021] The present invention also provides a computer-readable storage medium, characterized in that a computer program is stored on the storage medium, and when the computer program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

[0022] The present invention also provides an electronic device, characterized in that it includes a processor and a memory;

[0023] The memory is used to store computer programs;

[0024] The processor is configured to execute the method according to any one of claims 1 to 6 by calling a stored computer program.

[0025] The present invention also relates to a computer program product, comprising a computer program and / or instructions, characterized in that the computer program and / or instructions implement any of the methods of claims 1 to 6 when executed by a processor.

[0026] The beneficial effects of the present invention are:

[0027] Improve development efficiency: Improve development speed by reducing manual coding workload.

[0028] Flexible configuration management: Enhances the maintainability and scalability of the system, facilitating the addition and modification of subsequent functions.

[0029] Dynamic interception function: realizes real-time monitoring of user operations and data flows, enhancing the security and reliability of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] Figure 1 It is a schematic flow chart of the dynamic configuration and interception embedded method based on Vue routing of the present invention.

[0031] Figure 2 It is a schematic diagram of the structure of the dynamic configuration and interception embedded system based on Vue routing of the present invention. DETAILED DESCRIPTION

[0032] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all of the embodiments. The components of the embodiments of the present invention generally described and shown in the drawings here can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present invention provided in the drawings is not intended to limit the scope of the claimed invention, but merely represents selected embodiments of the present invention. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0033] It should be noted that similar reference numerals and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in the subsequent drawings. At the same time, in the description of the present invention, the terms "first", "second", etc. are only used to distinguish the description and cannot be understood as indicating or implying relative importance.

[0034] Glossary:

[0035] Vue.js: is a JavaScript framework for building user interfaces.

[0036] Vue-router: is the official router of Vue.js. It is deeply integrated with the Vue.js core, making it easy to build single-page applications with Vue.js.

[0037] The first aspect of the present invention relates to a process of steps as follows Figure 1 A dynamic configuration and interception embedded method based on Vue routing is shown, including: storing routing rules in a backend database and interacting with data through a defined API interface; using Vue Router's API to dynamically add, modify and delete the routing rules to achieve dynamic routing configuration; using Vuex as a state management tool to maintain routing status and user permission information to ensure that routing access rights are dynamically updated when the user login status changes; using a global front guard to control access to routing based on user permission information.

[0038] 1. Routing rules storage

[0039] The routing rules are centrally stored in the backend database for easy management and real-time update. These rules can include information such as routing paths, components, permission requirements, etc.

[0040] 2. Data Acquisition

[0041] Get the routing configuration information from the backend through Ajax requests. This request can be triggered when the application is initialized or based on a specific operation (such as user login) to ensure that the frontend obtains the latest routing information.

[0042] 3. Dynamic routing management

[0043] Use Vue Router's addRoutes method to dynamically add routing rules obtained from the backend to the routing table. The specific implementation can be as follows:

[0044]

[0045] 4. Routing Update and Management

[0046] When business needs change, you only need to modify the routing configuration information in the back-end database. The front-end can initiate a request again through a scheduled task or user operation (such as refreshing the page) to obtain the latest routing configuration and update the routing table.

[0047] 5. Permission Control

[0048] Combined with the user's permission information, dynamically filter and manage accessible routes to ensure that users can only access authorized functions. For example, the visibility and access rights of routes can be dynamically adjusted based on user permission information.

[0049] 6. Overall effect

[0050] Through this dynamic routing configuration method, the application can flexibly respond to business changes without frequently modifying the front-end code, which improves development efficiency and system maintainability. At the same time, the user experience is also improved due to the dynamic adaptation of the routing, ensuring the security and reliability of the system.

[0051] Exemplarily, the permission information is stored by a backend database and obtained when the user logs in.

[0052] Exemplarily, verification is performed based on the user permission information stored in the Vuex to ensure that the user can only access authorized routes.

[0053] Exemplarily, the method utilizes the meta field of Vue Router to store additional information of each route so as to control access rights when the route is accessed.

[0054] Exemplarily, verification is performed based on the user permission information stored in the Vuex to ensure that the user can only access authorized routes.

[0055] The specific contents of the above exemplary dependent claims may be:

[0056] 1. Permission management

[0057] First, we need to store user permission information in the backend database. This information should include:

[0058] User ID

[0059] User roles (such as administrator, user, guest, etc.)

[0060] User permissions (such as access to certain specific pages)

[0061] When the user logs in, the current user's role and permissions are obtained through API requests and stored in the front-end state management (such as Vuex).

[0062] 2. Routing configuration and meta fields

[0063] When defining routes, you can use Vue Router's meta field to store additional information for each route. For example:

[0064]

[0065]

[0066] 3. Global front guard

[0067] Use global front guards in Vue Router to dynamically control access permissions based on the user's role and route meta information. The specific implementation is as follows:

[0068]

[0069] 4. Dynamic update permissions

[0070] If business requirements change, the backend can update user roles and permissions, and the frontend needs to re-acquire this information periodically or after specific operations. After updating the permission information through the API request, the status in Vuex can be updated again and take effect in the next global front guard.

[0071] 5. Overall effect

[0072] Through this configurable routing interception mechanism, the application can flexibly respond to changes in user roles and permissions, ensuring that users can only access the functional areas they are authorized to access. This not only improves the security of the system, but also improves the user experience and avoids unauthorized access.

[0073] Exemplarily, the method uses HTTPS protocol for data transmission to ensure the confidentiality and integrity of the data.

[0074] Specifically, ensure that all data transmission is carried out through the HTTPS protocol to protect the confidentiality and integrity of the data. HTTPS uses SSL / TLS encryption to prevent data from being eavesdropped or tampered with during transmission, thereby enhancing user trust in the application.

[0075] Exemplarily, the method verifies and filters user input to prevent attacks such as SQL injection.

[0076] Specifically, all user input is strictly validated and filtered to prevent SQL injection and other malicious attacks. Input validation rules are implemented, such as limiting input length, format, and type, to ensure data security.

[0077] The above methods also include: regularly checking and updating Vue Router and related dependent libraries, and promptly patching known security vulnerabilities. Pay attention to official security announcements, and respond quickly to update to safe versions after discovering potential risks. This process should be included in the maintenance plan of the application to ensure that it is always running in the latest security environment.

[0078] The present invention also provides a dynamic configuration and interception embedded system based on Vue routing, such as Figure 2 Said, it is characterized by comprising: a front-end module, an embedded service module, a dynamic interception module and a configuration management module;

[0079] The front-end module is used to dynamically add, modify and delete the routing rules using the API of Vue Router to implement dynamic routing configuration;

[0080] The embedded service module is used to store routing rules in a backend database, supporting dynamic update and retrieval;

[0081] The configuration management module is used to use Vuex as a state management tool to maintain routing status and user permission information, ensuring that routing access rights are dynamically updated when the user login status changes.

[0082] The dynamic interception module is used to control the access to the route according to the permission information.

[0083] Exemplarily, the configuration management module is used to store additional information of each route using the meta field of Vue Router to achieve precise access control;

[0084] Exemplarily, the embedded service module is also used to support the HTTPS protocol to ensure the confidentiality and integrity of data transmission;

[0085] Exemplarily, the dynamic interception module is also used to implement user input verification and filtering to prevent attacks such as SQL injection.

[0086] The front-end module is used to render the user interface, handle user interactions, and also provide dynamic routing and state management. Through the Vue.js framework, component-based development improves efficiency and maintainability.

[0087] At the same time, Vue Router is used to implement dynamic routing, allowing users to quickly switch between different functional modules. State management is implemented through Vuex to ensure the consistency and predictability of application state.

[0088] The embedded service module is responsible for the underlying control and data processing of the device, providing efficient data transmission and processing capabilities to ensure smooth interaction with the front end.

[0089] The dynamic interception module intercepts user operations and data flows, performs necessary processing, and implements fine-grained permission management. It controls user access rights through dynamic routing and full-staff front-end guards to enhance security.

[0090] Configuration management module manages and loads system configuration to achieve flexible configuration. It provides flexible configuration options and supports rapid adjustment of the system according to needs.

[0091] The interaction of the above modules achieves the following technical effects:

[0092] Enhance user experience: Improve functionality and increase user interactivity through common components (such as function evaluation feedback, support assistants, and smart robots).

[0093] Reduce development costs: Vue dynamic routing and dynamic interception technology reduce the need for repeated development and achieve "one-time development, multiple uses".

[0094] Improve system security: Fine-grained permission management avoids unauthorized access and protects user data security.

[0095] Reduce coupling: Through modular design and component-based development, reduce the dependencies between modules and improve the maintainability and scalability of the system.

[0096] The above-mentioned system-type exclusive rights can achieve the relevant technical effects of method-type exclusive rights.

[0097] An embodiment of the present invention also provides a computer-readable storage medium capable of implementing all the steps in the method in the above embodiment, wherein a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, all the steps in the method in the above embodiment are implemented.

[0098] An embodiment of the present invention also provides an electronic device for executing the above method. As an implementation device of the method, the electronic device has at least a processor and a memory, and in particular, the memory stores data and related computer programs required for executing the method, and the processor calls the data and programs in the memory to execute all steps of the implementation method and obtains the corresponding technical effect.

[0099] Preferably, the electronic device may include a bus architecture, the bus may include any number of interconnected buses and bridges, and the bus will include various circuits linked together by one or more processors and memories. The bus may also link together various other circuits such as peripherals, voltage regulators, and power management circuits, which are all well known in the art and are therefore not further described herein. The bus interface provides an interface between the bus and the receiver and transmitter. The receiver and transmitter may be the same component, i.e., a transceiver, providing a unit for communicating with various other systems over a transmission medium. The processor is responsible for managing the bus and general processing, while the memory may be used to store data used by the processor when performing operations.

[0100] In addition, the electronic device may further include components such as a communication module, an input unit, an audio processor, a display, and a power supply. The processor (or controller, operation control) used may include a microprocessor or other processor device and / or a logic device, which receives input and controls the operation of various components of the electronic device; the memory may be one or more of a cache, a flash memory, a hard drive, a removable medium, a volatile memory, a non-volatile memory, or other suitable devices, which may store the above-mentioned related data information, and may also store a program for executing related information, and the processor may execute the program stored in the memory to realize information storage or processing, etc.; the input unit is used to provide input to the processor, for example, it may be a key or a touch input device; the power supply is used to provide power to the electronic device; the display is used to display display objects such as images and text, for example, it may be an LCD display. The communication module is a transmitter / receiver that sends and receives signals via an antenna. The communication module (transmitter / receiver) is coupled to the processor to provide input signals and receive output signals, which may be the same as the case of a conventional mobile communication terminal. Based on different communication technologies, multiple communication modules may be provided in the same electronic device, such as a cellular network module, a Bluetooth module and / or a wireless local area network module, etc. The communication module (transmitter / receiver) is also coupled to a speaker and a microphone via an audio processor to provide an audio output via the speaker and receive an audio input from the microphone, thereby realizing a common telecommunication function. The audio processor may include any suitable buffer, decoder, amplifier, etc. In addition, the audio processor is also coupled to a central processor, so that recording can be performed on the machine through the microphone, and the sound stored on the machine can be played through the speaker.

[0101] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0102] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A system that specifies the functions of a box or boxes.

[0103] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a product including an instruction system, which is implemented in the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0104] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps of the functions specified in a box or multiple boxes. Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they know the basic creative concept. Therefore, the attached claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0105] The above is only a preferred specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A dynamic configuration and interception embedded method based on Vue routing, characterized in that: include: Store routing rules in the backend database and interact with data through the defined API interface; Use Vue Router's API to dynamically add, modify, and delete routing rules to implement dynamic routing configuration; Use Vuex as a state management tool to maintain routing status and user permission information, and ensure that routing access permissions are dynamically updated when the user login status changes; Use global front guards to control access to routes based on user permission information.

2. The method according to claim 1, characterized in that The user authority information is stored in the back-end database and obtained when the user logs in.

3. The method according to claim 1, characterized in that: Verify the user permission information stored in Vuex to ensure that users can only access authorized routes.

4. The method according to claim 1, characterized in that: The method described above utilizes Vue Router's meta field to store additional information about each route in order to control access permissions when the route is accessed.

5. The method according to claim 1, characterized in that The method uses the HTTPS protocol for data transmission to ensure the confidentiality and integrity of the data.

6. The method according to claim 1, characterized in that The method verifies and filters user input to prevent attacks such as SQL injection.

7. A dynamic configuration and interception embedded system based on Vue routing, characterized in that, include: Front-end module, embedded service module, dynamic interception module and configuration management module; The front-end module is used to dynamically add, modify and delete the routing rules using the API of Vue Router to implement dynamic routing configuration; The embedded service module is used to store routing rules in a backend database, supporting dynamic update and retrieval; The configuration management module is used to use Vuex as a state management tool to maintain routing status and user permission information, ensuring that routing access permissions are dynamically updated when the user login status changes; The dynamic interception module is used to control the access to the route according to the user authority information.

8. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

9. An electronic device, characterized in that: including a processor and a memory; The memory is used to store computer programs; The processor is configured to execute the method according to any one of claims 1 to 6 by calling a stored computer program.

10. A computer program product comprising a computer program and / or instructions, characterized in that: When the computer program and / or the instructions are executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

Images