A page control method and system based on front-end and back-end coordination

Abstract

The present invention discloses a page control method based on front-end and back-end coordination and cooperation, which is used to control the permissions of application system resources. The application system resources include function menus and button controls on various interfaces. The method includes: performing system menu processing based on a front-end request interface, including system menu query, system menu generation, and system menu modification; performing system menu management and maintenance based on system menu processing through a back-end request interface, thereby performing menu-level permission control; system menu management and maintenance is implemented based on a menu module management function module, which is used to maintain the system menu, menu icons, and buttons of the application system, and centrally manage the role-system menu permissions of multiple application systems through mapping roles to system menus; S3, based on menu-level permission control, managing and maintaining page operations through the menu module management function module. Also disclosed are a system, an electronic device, and a computer-readable storage medium.

Description

Technical Field

[0001] The present invention relates to the technical field of system menu control pages, and in particular to a page control method and system based on front-end and back-end coordinated cooperation. Background Art

[0002] In today's era of rapid development of information technology, the number of application systems and data platforms within enterprises is increasing. Different platforms are responsible for different businesses and functional designs. In addition, since each platform has its own permission system, there is no unified permission design and standardized permission management, resulting in confusion in permission management and unclear hierarchical division. This problem is very obvious in the operation and maintenance system and will cause very serious management problems.

[0003] In addition, for different projects and roles, the operation and maintenance system needs to implement different page authorization restrictions and menu management. Therefore, it is often necessary to carry out different divisions and different displays through multiple separate management and page shielding. Too much mixed steps and development have a greater impact on workload and convenience. Summary of the Invention

[0004] In order to solve the problems existing in the prior art, the present invention provides a page control method and system based on front-end and back-end coordination and cooperation, which is used for performing permission control on all resources of the application system, such as the function menu of the application system, button controls of each interface, etc.; the menu is stored in the database, and then the front-end request interface queries the system menu, and then generates the menu through dynamic routing, so that the modification of the menu or menu icon does not require modifying the code, and can be modified directly on the system; a separate menu module manages and maintains the menus and buttons of the application system, and through the mapping of roles and menus, centrally manages the role-menu permissions of multiple systems; on the basis of menu-level permission control, the operating actions on the page are also managed and maintained, that is, the operation buttons on the page, simply put, are unified authorization management of operations such as adding, deleting, modifying, and checking. This management mode can control permissions more meticulously and accurately.

[0005] On one hand, the present invention provides a page control method based on front-end and back-end coordination and cooperation, which is used to control the permissions of application system resources. The application system resources include the application system's function menu and button controls on various interfaces. The page control method includes:

[0006] S1, performing system menu processing based on the front-end request interface, wherein the system menu processing includes: system menu query, system menu generation and system menu modification;

[0007] S2, performing system menu management and maintenance based on the system menu processing through a backend request interface, thereby performing menu-level permission control; wherein the system menu management and maintenance is implemented based on a menu module management function module, and the separate menu module management function module is used to maintain the system menu, menu icons, and buttons of the application system, and centrally manage the role-system menu permissions of multiple application systems through mapping between roles and the system menu;

[0008] S3, based on the menu-level authority control, the operation actions of the page are managed and maintained simultaneously through the menu module management function module.

[0009] Preferably, the S1 includes:

[0010] S11, after obtaining all routing data through the front-end request interface, performing a system menu query based on the routing data, wherein the system menu is stored in one or more database tables;

[0011] S12, generating the system menu through dynamic routing;

[0012] S13, modifying the menu content or menu icon of the generated system menu. The menu content modification or menu icon modification does not require code modification but is directly modified on the system menu.

[0013] Preferably, the S2 includes:

[0014] S21, data control, including: through the backend return interface, the backend returns all tile data corresponding to the routing data, the system menu module management function module generates a menu table based on the tile data, the menu table includes the following menu name fields: menu ID, type, access path, component path, icon, sort, whether hidden, and whether enabled; wherein the type is used to determine whether a certain data is a button, menu page, or directory, and whether hidden is used to determine whether it is displayed in the navigation menu of the menu table. This is because some detail pages do not need to be displayed in the navigation menu, but need to be returned by the backend;

[0015] S22, performing function-level determination based on the obtained tile data, including: in a Django Rest or Flask backend framework, controlling the users or user groups who can access specific pages or functions through permissions in a view function;

[0016] S23, performing Vue instruction control, including: in a Vue.js front-end and back-end separation application, using the `v-if` instruction to determine whether to render a menu item based on a data group corresponding to permissions in the view function;

[0017] S24, performing unified interface layer interception based on the authentication interceptor, including: based on the interception request, judging whether the user has the right to access specific resources according to the URL path, and performing the interface layer unified interception for users who do not have the right to access specific resources; the specific resources include protected resources and addresses that can be accessed without user authentication.

[0018] Preferably, the front-end and back-end separation application of Vue.js is implemented based on the vue prototype chain corresponding to the routing data; multiple vue prototype chains are directly connected to the menu management module, thereby realizing efficient menu management and page control.

[0019] Preferably, the S24 includes:

[0020] Determine whether the access address of the page requires user identity authentication. If user identity authentication is required, authenticate the user identity; if user identity authentication is not required, configure a public access address and mark it as the first accessible address in the configuration file;

[0021] Wherein, in the case where user identity authentication is required, authenticating the user identity includes: authenticating the user identity based on a dual authentication method of username authentication and password authentication, and storing records of successful authentication and failed authentication in the database table;

[0022] In the case where user identity authentication is not required, configuring a publicly accessible address and marking it as first accessible in the configuration file includes: configuring the first publicly accessible address for an address that can be accessed without user authentication and marking it as accessible in the configuration file, so that unauthenticated users can also access the configured first publicly accessible address based on the accessible marking;

[0023] Configuring the publicly accessible address and making a first accessible annotation in the configuration file further includes configuring a second publicly accessible address for the protected resource and making a conditionally accessible annotation in the configuration file, whereby only authenticated users can access the configured second publicly accessible address based on the conditionally accessible annotation.

[0024] Preferably, the authentication interceptor is used to intercept when a user requests to access a protected resource, including: the authentication interceptor checks whether the URL requested by the user is in the public access address list. If the URL requested by the user is in the public access address list, access to the protected resource is allowed; if the URL requested by the user is not in the public access address list, checking whether the user has passed the identity authentication. If so, access to the protected resource is allowed; otherwise, access to the protected resource is denied.

[0025] Preferably, the S3 includes:

[0026] S31, packaging the view function based on a decorator;

[0027] S32, based on the user's authority, decides whether to execute the packaged view function, wherein the execution of the packaged view function is used to simultaneously manage and maintain the operation actions of the page through the menu module management function module, that is, the operation buttons on the page, which is simply the unified authorization management of operations such as adding, deleting, modifying, and checking.

[0028] A second aspect of the present invention provides a page control system based on front-end and back-end coordination, including:

[0029] A front-end processing module (101) is used to perform system menu processing based on a front-end request interface, wherein the system menu processing includes: system menu query, system menu generation, and system menu modification;

[0030] A back-end processing module (102) is used to manage and maintain the system menu based on the system menu processing through a back-end request interface, thereby performing menu-level authority control; wherein the system menu management and maintenance is implemented based on a menu module management function module, and the separate menu module management function module is used to maintain the system menu, menu icons and buttons of the application system, and centrally manage the role-system menu authority of multiple application systems through mapping between roles and the system menu;

[0031] The page control module (103) is based on the menu-level authority control and manages and maintains the operation actions of the page through the menu module management function module, that is, the operation buttons on the page, which is simply the unified authorization management of operations such as adding, deleting, modifying, and checking.

[0032] A third aspect of the present invention provides an electronic device, comprising a processor and a memory, wherein the memory stores a plurality of instructions, and the processor is configured to read the instructions and execute the method described in the first aspect.

[0033] A fourth aspect of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores a plurality of instructions, and the plurality of instructions can be read by a processor to execute the method described in the first aspect.

[0034] The method, system, and electronic device provided by the present invention have the following beneficial effects:

[0035] (1) The present invention is based on the platform and can manage menus or more fine-grained permissions, such as a button, drop-down box, icon, etc. through independent menu modules and related technical solutions.

[0036] (2) Configurability is improved. Modifications to menu styles and related interface information can be done directly on the system without modifying the system code.

[0037] (3) Menu control on the platform can realize the integration, sharing and interaction of various types of information on the page, and control the page display, providing strong support for platform construction. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] Figure 1 This is a flow chart of a page control method based on front-end and back-end coordination according to an embodiment of the present invention;

[0039] Figure 2 This is an implementation flow diagram of step S2 according to an embodiment of the present invention;

[0040] Figure 3 This is an architecture diagram of a page control system based on front-end and back-end coordination according to an embodiment of the present invention;

[0041] Figure 4 This is a schematic diagram of a page control system based on front-end and back-end coordination according to an embodiment of the present invention;

[0042] Figure 5 FIG. 2 is a schematic structural diagram of an electronic device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0043] In order to better understand the above technical solution, the above technical solution will be described in detail below with reference to the accompanying drawings and specific implementation methods.

[0044] Example 1

[0045] like Figure 1 As shown, the present invention provides a page control method based on front-end and back-end coordination and cooperation, which is used to control the permissions of application system resources. The resources of the application system include the function menu of the application system and the button controls of each interface. The page control method includes:

[0046] S1, performing system menu processing based on the front-end request interface, wherein the system menu processing includes: system menu query, system menu generation and system menu modification;

[0047] As a preferred embodiment, the S1 includes:

[0048] S11, after obtaining all routing data through the front-end request interface, performing a system menu query based on the routing data, wherein the system menu is stored in one or more database tables;

[0049] In this embodiment, Figure 2As shown, there are three pieces of route data obtained, namely route data 1, route data 2 and route data 3; there are three database tables, namely database table 1, database table 2 and database table 3.

[0050] S12, generating the system menu through dynamic routing;

[0051] S13, modifying the menu content or menu icon of the generated system menu. The menu content modification or menu icon modification does not require code modification but is directly modified on the system menu.

[0052] S2, performing system menu management and maintenance based on the system menu processing through a backend request interface, thereby performing menu-level permission control; wherein the system menu management and maintenance is implemented based on a menu module management function module, and the separate menu module management function module is used to maintain the system menu, menu icons, and buttons of the application system, and centrally manage the role-system menu permissions of multiple application systems through mapping between roles and the system menu;

[0053] like Figure 2 The implementation process architecture diagram of step S2 is shown.

[0054] As a preferred embodiment, the S2 includes:

[0055] S21, data control, including: through the backend return interface, the backend returns all tile data corresponding to the routing data, the system menu module management function module generates a menu table based on the tile data, the menu table includes the following menu name fields: menu ID, type, access path, component path, icon, sort, whether hidden, and whether enabled; wherein the type is used to determine whether a certain data is a button, menu page, or directory, and whether hidden is used to determine whether it is displayed in the navigation menu of the menu table. This is because some detail pages do not need to be displayed in the navigation menu, but need to be returned by the backend;

[0056] S22, performing function-level determination based on the obtained tiled data, including: in a Django Rest or Flask backend framework, controlling the users or user groups who can access specific pages or functions through permissions in a view function.

[0057] In this embodiment, taking the Django Rest backend framework as an example, the decorator @permission_classes in the backend framework can be used to set the permissions of the function view. Commonly used permissions of the function view include:

[0058] AllowAny: allows any user to access the view, without authentication and authorization;

[0059] IsAuthenticated: Requires the user to authenticate before accessing the view, that is, the user must log in;

[0060] IsAdminUser: requires the user to be an administrator user to access the view;

[0061] IsAuthenticatedOrReadOnly: Requires users to authenticate when performing write operations (such as create, update, and delete), while allowing any user access for read-only operations (such as getting a list and viewing details);

[0062] In addition to the above commonly used permission classes, the Django Rest backend framework also supports custom permission classes to meet more complex permission requirements.

[0063] S23, performing Vue instruction control, including: in a Vue.js front-end and back-end separation application, using the `v-if` instruction to determine whether to render a menu item based on a data group corresponding to permissions in the view function;

[0064] As a preferred implementation, in this embodiment, the front-end and back-end separation application of Vue.js is implemented based on the Vue prototype chain corresponding to the routing data. Multiple Vue prototype chains are directly connected to the menu management module, thereby achieving efficient menu management and page control.

[0065] S24, performing unified interface-layer interception based on the authentication interceptor, including: determining whether the user has the right to access a specific resource based on the intercepted request and the URL path, and performing the unified interface-layer interception for users who do not have the right to access the specific resource; the specific resource includes protected resources and addresses that can be accessed without user authentication;

[0066] As a preferred embodiment, the S24 includes:

[0067] Determine whether the access address of the page requires user identity authentication. If user identity authentication is required, authenticate the user identity; if user identity authentication is not required, configure a public access address and mark it as the first accessible address in the configuration file;

[0068] Wherein, in the case where user identity authentication is required, authenticating the user identity includes: authenticating the user identity based on a dual authentication method of username authentication and password authentication, and storing records of successful authentication and failed authentication in the database table;

[0069] Configuring a publicly accessible address and marking it as accessible in the configuration file for a situation where user identity authentication is not required includes: configuring the first publicly accessible address for an address that can be accessed without user authentication (such as a login page) and marking it as accessible in the configuration file, so that unauthenticated users can also access the configured first publicly accessible address based on the accessible marking;

[0070] As a preferred embodiment, configuring the publicly accessible address and marking the first accessible address in the configuration file further includes configuring a second publicly accessible address for a protected resource (such as a homepage or a logout button) and marking the accessibility conditionally in the configuration file. Based on the conditionally accessible address, only authenticated users can access the configured second publicly accessible address.

[0071] As a preferred embodiment, the authentication interceptor is used to intercept when a user requests to access a protected resource, including:

[0072] The authentication interceptor checks whether the URL requested by the user is in the public access address list. If the URL requested by the user is in the public access address list, access to the protected resource is allowed; if the URL requested by the user is not in the public access address list, it checks whether the user has passed the identity authentication. If so, access to the protected resource is allowed; otherwise, access to the protected resource is denied.

[0073] Through the above steps, it is possible to effectively determine whether a user has the right to access a specific resource based on the URL path, thereby protecting network resources from being accessed by unauthorized users.

[0074] S3, based on the menu-level permission control, the operation actions of the page are managed and maintained at the same time through the menu module management function module, that is, the operation buttons on the page, simply put, are unified authorization management of operations such as add, delete, modify, and check.

[0075] As a preferred embodiment, the S3 includes:

[0076] S31, based on the decorator wrapping the view function, in the Django Rest backend framework, a function-based video is used to provide a simple decorator to wrap the view function to ensure that the view function will receive a Request instead of Django's general HttpRequest object, and return a Response instead of Django's general HttpRequest object, while allowing the setting of how to handle this request.

[0077] This decorator is the api_view decorator, which accepts a parameter that specifies the list of HTTP methods that the view should respond to. In addition to this decorator, you can also use @renderer_classes(...), parser_classes(...), @authentication_class(...), @throttle_classes(...), or @permission_classes(...); each decorator has a single parameter that must be a list of classes or a class tuple.

[0078] S32, based on the user's authority, decides whether to execute the packaged view function, wherein the execution of the packaged view function is used to simultaneously manage and maintain the operation actions of the page through the menu module management function module, that is, the operation buttons on the page, which is simply the unified authorization management of operations such as adding, deleting, modifying, and checking.

[0079] Example 2

[0080] like Figure 3-4 As shown, this embodiment provides a page control system based on front-end and back-end coordination, including:

[0081] The front-end processing module 101 is used to perform system menu processing based on the front-end request interface, and the system menu processing includes: system menu query, system menu generation and system menu modification;

[0082] The back-end processing module 102 is used to manage and maintain the system menu based on the system menu processing through the back-end request interface, thereby performing menu-level permission control; wherein the system menu management and maintenance is implemented based on the menu module management function module, and the separate menu module management function module is used to maintain the system menu, menu icons and buttons of the application system, and centrally manage the role-system menu permissions of multiple application systems through the mapping of roles and the system menu;

[0083] The page control module 103 manages and maintains the operation actions of the page simultaneously through the menu module management function module based on the menu level permission control, that is, the operation buttons on the page, which is simply the unified authorization management of operations such as adding, deleting, modifying, and checking.

[0084] The present invention also provides a memory storing a plurality of instructions, wherein the instructions are used to implement the method as in the first embodiment.

[0085] like Figure 5As shown, the present invention also provides an electronic device, including a processor 301 and a memory 302 connected to the processor 301, the memory 302 stores multiple instructions, and the instructions can be loaded and executed by the processor to enable the processor to execute the method as in embodiment 1.

[0086] Although 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 are aware of the basic inventive concepts. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the invention. Obviously, those skilled in the art may make various changes and modifications to the present invention without departing from the spirit and scope of the invention. Thus, the present invention is intended to include such changes and modifications as fall within the scope of the claims and their equivalents.

Claims

1. A page control method based on front-end and back-end coordination, characterized in that: It is used to control the permissions of the resources of the application system, wherein the resources of the application system include the function menu of the application system and the button controls of each interface. The page control method includes: S1, performing system menu processing based on the front-end request interface, wherein the system menu processing includes: system menu query, system menu generation and system menu modification; S2, performing system menu management and maintenance based on the system menu processing through a backend request interface, thereby performing menu-level permission control; wherein the system menu management and maintenance is implemented based on a menu module management function module, and the separate menu module management function module is used to maintain the system menu, menu icons, and buttons of the application system, and centrally manage the role-system menu permissions of multiple application systems through mapping between roles and the system menu; The S2 includes: S21, data control, including: through the backend return interface, the backend returns all tile data corresponding to the routing data, the menu module management function module generates a menu table based on the tile data, the menu table includes the following menu name fields: menu ID, type, access path, component path, icon, sort, whether hidden, and whether enabled; wherein the type is used to determine whether a certain data is a button, menu page, or directory, and whether hidden is used to determine whether it is displayed in the navigation menu of the menu table. This is because some detail pages do not need to be displayed in the navigation menu, but need to be returned by the backend; S22, performing function-level determination based on the obtained tile data, including: in a Django Rest or Flask backend framework, controlling the users or user groups who can access specific pages or functions through permissions in a view function; S23, performing Vue instruction control, including: in a Vue.js front-end and back-end separation application, using a v-if instruction to determine whether to render a menu item based on a data group corresponding to permissions in the view function; S24, performing unified interface-layer interception based on the authentication interceptor, including: determining whether the user has the right to access a specific resource based on the intercepted request and the URL path, and performing the unified interface-layer interception for users who do not have the right to access the specific resource; the specific resource includes protected resources and addresses that can be accessed without user authentication; S3, based on the menu-level authority control, the operation actions of the page are managed and maintained simultaneously through the menu module management function module.

2. A page control method based on front-end and back-end coordination and cooperation according to claim 1, characterized in that: Said S1 comprises: S11, after obtaining all routing data through the front-end request interface, performing a system menu query based on the routing data, wherein the system menu is stored in one or more database tables; S12, generating the system menu through dynamic routing; S13, modifying the menu content or menu icon of the generated system menu. The menu content modification or menu icon modification does not require code modification but is directly modified on the system menu.

3. A page control method based on front-end and back-end coordination and cooperation according to claim 2, characterized in that: The front-end and back-end separation application of Vue.js is implemented based on the vue prototype chain corresponding to the routing data; multiple vue prototype chains are directly connected to the menu management module, thereby realizing efficient menu management and page control.

4. A page control method based on front-end and back-end coordination and cooperation according to claim 3, characterized in that: The S24 includes: Determine whether the access address of the page requires user identity authentication. If user identity authentication is required, authenticate the user identity; if user identity authentication is not required, configure a public access address and mark it as the first accessible address in the configuration file; Wherein, in the case where user identity authentication is required, authenticating the user identity includes: authenticating the user identity based on a dual authentication method of username authentication and password authentication, and storing records of successful authentication and failed authentication in the database table; In the case where user identity authentication is not required, configuring a publicly accessible address and marking it as first accessible in the configuration file includes: configuring the first publicly accessible address for an address that can be accessed without user authentication and marking it as accessible in the configuration file, so that unauthenticated users can also access the configured first publicly accessible address based on the accessible marking; Configuring the publicly accessible address and making a first accessible annotation in the configuration file further includes configuring a second publicly accessible address for the protected resource and making a conditionally accessible annotation in the configuration file, whereby only authenticated users can access the configured second publicly accessible address based on the conditionally accessible annotation.

5. A page control method based on front-end and back-end coordination and cooperation according to claim 4, characterized in that: The authentication interceptor is used to intercept when a user requests to access a protected resource, including: the authentication interceptor checks whether the URL requested by the user is in the public access address list. If the URL requested by the user is in the public access address list, access to the protected resource is allowed; if the URL requested by the user is not in the public access address list, it checks whether the user has passed the identity authentication. If so, access to the protected resource is allowed; otherwise, access to the protected resource is denied.

6. A page control method based on front-end and back-end coordination and cooperation according to claim 5, characterized in that: The S3 includes: S31, packaging the view function based on a decorator; S32, based on the user's authority, decides whether to execute the packaged view function, wherein the execution of the packaged view function is used to simultaneously manage and maintain the operation actions of the page through the menu module management function module, that is, the operation buttons on the page, including unified authorization management of add, delete, modify, and query operations.

7. A page control system based on front-end and back-end coordination, used to implement the method according to any one of claims 1 to 6, characterized in that: include: A front-end processing module (101) is used to perform system menu processing based on a front-end request interface, wherein the system menu processing includes: system menu query, system menu generation, and system menu modification; A back-end processing module (102) is used to manage and maintain the system menu based on the system menu processing through a back-end request interface, thereby performing menu-level authority control; wherein the system menu management and maintenance is implemented based on a menu module management function module, and the separate menu module management function module is used to maintain the system menu, menu icons and buttons of the application system, and centrally manage the role-system menu authority of multiple application systems through mapping between roles and the system menu; The page control module (103) manages and maintains the operation actions of the page simultaneously through the menu module management function module based on the menu level authority control, that is, the operation buttons on the page, including unified authorization management of the operations of adding, deleting, modifying and checking.

8. An electronic device, characterized in that: The method comprises a processor and a memory, wherein the memory stores a plurality of instructions, and the processor is configured to read the instructions and execute the method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a plurality of instructions, and the plurality of instructions can be read by a processor to execute the method according to any one of claims 1 to 6.

Images