Front-end architecture of middle-background authority management system

Abstract

The invention provides a front-end architecture of a middle-background authority management system. The front-end architecture comprises a project template library, a project template library and a project template library, wherein the project template library stores and provides a basic project template based on a front-end framework; the system core logic component is published to the private component library, and an authentication and authorization core logic module of the background authority management system and a corresponding application program interface decoupled from the user interface library are packaged; the system authority management view component is published to the private component library, and an authority management function interface based on a user interface is constructed based on data provided by the system core logic component, the authentication and authorization core logic module and the user interface library; a business system obtains a basic project template and introduces a system core logic component and a system authority management view component of a specified version from a private component library for initialization so as to construct a business front-end application of a middle background authority management system. According to the invention, the maintenance and upgrading cost of the business project authority management core function is reduced through modularization packaging.

Description

Technical Field

[0001] This invention relates to the field of next-generation information technology, and more specifically to the front-end architecture of a mid-to-back-end permission management system. Background Technology

[0002] In enterprise information systems, the middle and back-office management system is the core software used to manage business data, configure system rules, and monitor system status. These systems are typically not intended for general public users, but rather for internal employees or administrators. Their core functional modules generally include, but are not limited to: identity authentication, authorization management, and various specific business management functions.

[0003] Many back-end management system solutions already exist in the industry, such as Vben, JeecgBoot, and RuoYi. Functionally, most provide basic login, permission management, menu management, and role management. When implementing these systems, especially the front-end, the technology stack used is typically Vue + Vue-router + Vuex + mainstream UI component libraries (such as Element-Plus, Naive-UI, and Ant-Design-Vue), or React + React-router + a state management library + mainstream UI component libraries (such as Ant-Design and Arco-Design).

[0004] These open-source solutions in the industry provide the foundation for rapid project startup, such as basic project scaffolding, relatively universal basic components, and access control schemes. Developers only need to clone the code and perform secondary development based on the project template, saving development costs and improving efficiency. However, some problems and pain points also exist. It only provides a project template, leaving all source code open to developers, which brings two main issues.

[0005] First, maintenance is difficult. Open source code means developers can freely modify any directory and file, including core modules of basic functionality. Developers in project A might modify a core module, while developers in project B might not. This makes it impossible to maintain these common functionalities uniformly.

[0006] Secondly, upgrades are difficult. The basic, general functions of a project require continuous upgrades and maintenance, such as fixing defects and adding or adjusting features. Therefore, upgrading basic capabilities is essential. Upgrading and maintaining functions often involves modifying multiple files and directories, and it's easy to make mistakes by over-modifying or under-modifying, leading to significant upgrade costs.

[0007] These solutions are mostly open source, which is one of the key differences between open source communities and internal enterprise collaboration. Enterprises aim to provide a foundation for quickly launching new projects, upon which developers can then add their own business logic. Open source allows anyone to easily obtain a copy of the entire project's source code and customize it as needed, lowering the barrier to entry and learning curve – the foundation of open source collaboration. Internal enterprise collaboration, however, is different. Enterprises have their own customized needs, which may be fundamentally common within the enterprise. In this case, the maintainability and modifiability of the module are paramount, and open source projects may not directly meet these needs, requiring dedicated development by enterprise developers.

[0008] Therefore, how to provide a front-end architecture design scheme for a mid-to-back-end permission management system that provides rapid startup capabilities while facilitating the maintenance and upgrade of core functions is a problem that urgently needs to be solved by those skilled in the art. Summary of the Invention

[0009] In view of the above problems, the present invention is proposed to provide a front-end architecture for a mid-to-back-end permission management system that overcomes or at least partially solves the above problems.

[0010] To achieve the above objectives, the present invention adopts the following technical solution: In a first aspect, embodiments of the present invention provide a front-end architecture for a mid-to-back-end permission management system, including: A project template library for storing and providing basic project templates based on front-end frameworks; The system's core logic components are published to a private component library, which encapsulates the authentication and authorization core logic modules of the middle and back-end permission management system, as well as the corresponding application programming interfaces decoupled from the user interface library. The system permission management view component is published to a private component library. Based on the data, authentication and authorization core logic modules, and user interface library provided by the system core logic components, a user interface-based permission management function interface is built. The business system initializes the business front-end application of the middle and back-end permission management system by obtaining a basic project template from the project template library and importing a specified version of the system core logic component and system permission management view component from the private component library.

[0011] Preferably, the core logic components of the system include: The authentication module manages user identity status, creates an authentication status database to store and provide user authentication information, and encapsulates an HTTP client interceptor for globally handling authentication failure requests. The authorization module is used to manage user permission status, create an authorization status database to store and provide user permission data, and dynamically configure the routing information of the front-end routing framework based on the permission data. The route guard module, integrated with the front-end routing framework, is used to intercept routing requests and control access to the routes based on information in the authentication state database and the authorization state database.

[0012] Preferably, the authentication module also provides business logic for multiple login methods in the form of composable APIs, including a first composable API function for account and password login, a second composable API function for mobile phone verification code login, and a third composable API function for email and password login.

[0013] Preferably, the authorization module responds to user permission information obtained from an external server, the permission information including at least menu permissions and button permissions; the authorization module is configured as follows: Based on the menu permissions, dynamically add accessible routes to the front-end routing framework; Provides a command-based front-end UI element permission control mechanism, which controls whether or not associated front-end UI elements are rendered in the view layer according to the button permissions.

[0014] Preferably, the routing guard module is configured to perform the following steps: Determine whether the target route belongs to the preset authentication-free whitelist; If it does not belong to the authentication status database, check the authentication status database to determine whether the current user has completed authentication; If not authenticated, the request will be redirected to the login page; If authenticated, check the authorization status database to determine whether the current user has permission to access the target route; If you do not have permission, this access will be denied.

[0015] Preferably, the system permission management view component provides a user interface that includes at least one of the following management functions: organization management, role management, user management, menu resource management, and organization authorization management.

[0016] Preferably, the core logic components of the system are independent of any user interface library; the system permission management view component is implemented based on at least one specific user interface library.

[0017] Preferably, the project template library is a Git library, the private component library is an npm library, and the business system imports a specified version of the system core logic component and system permission management view component from the npm library through a package management tool in the basic project template.

[0018] In a second aspect, embodiments of the present invention provide an electronic device, comprising: One or more processors; Memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory and configured to be executed by the one or more processors, the programs including instructions for executing the front-end architecture.

[0019] Thirdly, embodiments of the present invention provide a computer-readable storage medium having a computer program stored thereon, wherein the computer program implements the front-end architecture when executed by a processor.

[0020] The beneficial effects of the above-described technical solutions provided in the embodiments of the present invention include at least the following: This invention provides a modular and maintainable front-end architecture for a mid-to-back-end permission management system. Its core lies in splitting the system into two key components: first, a core system logic component independent of the UI library, encapsulating underlying logic such as authentication, authorization, and routing guards, providing services through a composite API; and second, a system permission management view component based on a specific UI library, providing a management interface. Both are versioned npm packages used in conjunction with a basic project template.

[0021] As can be seen from the above technical solution, compared with existing technologies, this invention solves problems such as outdated technology, inconsistent code standards, and poor readability of weakly typed languages ​​by rebuilding the project startup template. By extracting reusable components, business users only need to upgrade the component versions, greatly reducing upgrade costs. At the same time, the encapsulation of components restricts business users from arbitrarily modifying related code, making management more standardized and rigorous. If changes to non-component versions are involved, the changes in the documentation and merge request can be referenced to modify the template source code.

[0022] This invention solves the problems of scattered core code and difficult maintenance and upgrades in traditional solutions by modular encapsulation, and realizes efficient unified management and iteration of enterprise-level applications. Attached Figure Description

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

[0024] Figure 1This is a logical principle diagram of the front-end architecture of the middle and back-end permission management system provided in this embodiment of the invention; Figure 2 This is a structural diagram of the front-end architecture of the middle and back-end permission management system provided in this embodiment of the invention; Figure 3 This is a structural diagram of the core logic components of the system provided in this embodiment of the invention; Figure 4 This is a logic diagram of the routing guard module provided in an embodiment of the present invention. Detailed Implementation

[0025] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0026] This invention discloses a front-end architecture for a mid-to-back-end permission management system, comprising: A project template library for storing and providing basic project templates based on front-end frameworks; The system's core logic components are published to a private component library, encapsulating the core authentication and authorization logic modules of the middle and back-end permission management system, as well as the corresponding application interfaces decoupled from the user interface library; The system permission management view component is published to a private component library. It is based on the data, authentication and authorization core logic modules provided by the system core logic components, and the user interface library to build a user-based permission management function interface. The business system initializes by obtaining basic project templates from the project template library and importing specified versions of the system's core logic components and system permission management view components from the private component library, thereby building the business front-end application of the middle and back-end permission management system.

[0027] In one embodiment, the project template library is a Git library, the private component library is an npm library, and the business system imports the specified versions of the system core logic components and system permission management view components from the npm library through a package management tool in the basic project template.

[0028] The system's core logic components and system permission management view components are all company-level npm components, housed in a private component library within the company, and made reusable by multiple business systems. These components are imported into the base project template, specifying the component version. Business users only need to clone the project template to perform secondary business development without needing to concern themselves with the internal implementation details of the components, such as... Figure 1 Show.

[0029] In this embodiment, a basic project template based on vue3.x+pinia+TypeScript is first used as the foundation. Then, libraries such as commitlint, eslint, prettier, and lint-staged are added to achieve unified code standards and solve the readability and maintainability problems caused by inconsistent code standards and weak typing.

[0030] In one embodiment, the core logic components of the system include: The authentication module manages user identity status, creates an authentication status database to store and provide user authentication information, and encapsulates an HTTP client interceptor for globally handling authentication failure requests. The authorization module is used to manage user permission status, create an authorization status database to store and provide user permission data, and dynamically configure the routing information of the front-end routing framework based on the permission data. The route guard module, integrated with the front-end routing framework, is used to intercept routing requests and control access to routes based on information in the authentication and authorization state databases.

[0031] In one embodiment, the authentication module also provides business logic for multiple login methods in the form of composable APIs, including a first composable API function for account password login, a second composable API function for mobile verification code login, and a third composable API function for email password login.

[0032] Authentication refers to verifying a user's identity. This solution provides multiple authentication methods, including account and password login, email login, mobile phone number login, and third-party platform authentication login.

[0033] In one embodiment, the authorization module responds to user permission information obtained from an external server, the permission information including at least menu permissions and button permissions; the authorization module is configured as follows: Dynamically add accessible routes to the front-end routing framework based on menu permissions; It provides a command-based front-end UI element permission control mechanism, which controls whether or not associated front-end UI elements are rendered based on button permissions at the view layer.

[0034] Authorization is the process of determining whether a user has the right to access resources. This embodiment's permission scheme is implemented based on the RBAC model, encompassing three basic concepts: organization, role, and user. Organizations have hierarchical relationships, and each organization has its own managed and maintained roles. Users can have multiple identities or roles across multiple organizations. Administrators authorize resources to organizations, and the organization's administrators then authorize those resources to roles within that organization. Users with the appropriate role can then legally access the resources.

[0035] In one embodiment, to support the two core functions of authentication and authorization, this solution provides functional support modules such as resource management, organization management, role management, and user management, including backend interfaces and frontend pages. For a large business project, there may be a multi-system scenario involving a permission system and other business systems, where other businesses still require the basic core functions of authentication and authorization. Therefore, the functional support modules and corresponding frontend pages are uniformly managed by the middle and backend permission system.

[0036] In one embodiment, the routing guard module is configured to perform the following steps: Determine whether the target route belongs to the preset authentication-free whitelist; If it does not belong to the authentication status database, check whether the current user has completed authentication. If not authenticated, the request will be redirected to the login page; If authenticated, check the authorization status database to determine whether the current user has permission to access the target route; If you do not have permission, this access will be denied.

[0037] like Figure 2 As shown, the authentication / authorization module, named `@gci / system-core`, is the core logic component in the front-end architecture of the back-end permission management system. The `@gci / system-core` component is the core foundational component of all systems, providing logical functions such as user authentication login, route guard authentication, and axios interceptor encapsulation. It also provides access to global data such as user identity, permissions, and system configuration. This component primarily focuses on underlying data and logic, such as providing Vue's composite API for multiple login methods, like username / password login (`usePasswordSignin`) and mobile verification code login (`useSmsSignin`). It does not involve any view layer, so it does not depend on any UI-related libraries. This means that business users can use any UI library to build their own systems, laying the foundation for mobile application development and improving the versatility and reusability of underlying components. The main core modules of `@gci / system-core` are as follows: Figure 3 As shown.

[0038] The authentication module primarily includes authentication-related functionalities. For the data portion, `useAuthenticationStore`, built on Pinia, provides global data storage and access for user information, including user ID, username, affiliated organization, and role. The logic portion includes a unified encapsulation of the axios interceptor, redirecting users to login when a service request fails and login is required. Additionally, it provides various login and logout logic in the form of a Vue composite API, such as `usePasswordSignin` (username / password login), `useSmsSignin` (phone number login), `useSignout` (logout), `useForgetPassword` (forgot password), and `useResetPassword` (reset password). This component supports internationalization, providing a `ConfigProvider` component. Within the scope of this component, related documentation within `@gci / system-core` components can be displayed in multiple languages.

[0039] The authorization module primarily includes authorization-related functionalities. In the data section, it creates a `useAuthorizationStore` based on Pinia, providing global data storage and access for user permission information, including menu permissions and button permissions. In the logic section, it sets global data based on the permission information returned by the server and dynamically adds vue-router routes based on menu permission information, implementing secure protection for page routing. This module provides UI element permission access directives based on Vue directives; only UI elements with corresponding permission protection can be rendered and displayed, otherwise they are not displayed, achieving more granular access control.

[0040] Route guards utilize hooks provided by vue-router to intercept all page routes and determine whether access to that route is permitted. The process is as follows: Figure 4 As shown, the main logic is that if the route belongs to the login-free whitelist, access is allowed; otherwise, if not logged in, the user is redirected to the login page route; if already logged in, access is determined based on permission information.

[0041] In one embodiment, the system permission management view component provides a user interface that includes at least one of the following management functions: organization management, role management, user management, menu resource management, and organization authorization management.

[0042] like Figure 2As shown, the business function module is the system permission management view component in the front-end architecture of the back-end permission management system, named @gci / system-permission. @gci / system-permission mainly includes functional modules such as organization management, role management, user management, resource management, and organization authorization. This component provides a Vue page component containing the view layer, meaning it requires a UI library (element-plus) for the view layer. This component is a high-level component, limited to PC applications, and also restricts its use to element-plus as a dependency; it is not suitable for mobile devices. The modules provided by this component are as follows: Organization Management: Maintains the functions of adding, editing, deleting, and querying organizational structures.

[0043] Role Management: Maintains the functions of adding, editing, deleting, and querying roles, and can authorize roles to access resources.

[0044] User management: Maintains the functions of adding, editing, deleting, and querying users, and can also perform other operations on users, including freezing users, initializing passwords, and assigning roles.

[0045] Institutional authorization: Authorize access to resources for an organization.

[0046] Menu Management: Maintains the functions of adding, editing, deleting, and querying menus, and can maintain individual button permissions and data rules for each menu.

[0047] Data dictionary: Maintaining the system's data dictionary information. The data dictionary is used for dictionary modeling based on business needs or a limited set of objectively existing information. For example, gender can be used as a data dictionary, with enumerated values ​​such as male and female.

[0048] In one embodiment, the core logic components of the system are independent of any user interface library; the system permission management view components are implemented based on at least one specific user interface library.

[0049] Below is a specific example of introducing the system's core logic components and system permission management view components: Step one: Using the package manager command line, declare and install the specified versions of the system core components and system permission management components in the business system's dependency configuration file. For example, execute the command: pnpm add@gci / system-core@1.0.0@gci / system-permission@1.0.0.

[0050] Step two involves configuring the component by importing and calling its initialization method in the application entry file of the business system. This step further includes: Interceptor registration: The system core component calls the setAxiosResponseInterceptor function to inject the common HTTP client instance axios to handle server responses uniformly.

[0051] Plugin registration: Using an application instance with the Vue front-end framework, the plugin installation functions `systemPlugin` and `systemPermissionPlugin`, provided by the system core components and the system permission management component, are called sequentially. During installation, necessary configuration parameters are passed in, including but not limited to: the route manager instance, the HTTP client instance, and the application's base path.

[0052] Step 3: After the component initialization is complete, the logic function of the route guard module will automatically obtain the user's authentication and permission information from the server at the appropriate time and store it in the corresponding global state library to complete the initialization of the application security state.

[0053] Step four: In the business code, obtain global authentication and authorization data by importing the state libraries usedAuthenticationStore and usedAuthorizationStore provided by the system core components; and reuse pre-defined business logic by importing the provided composite API functions usedCaptchaImage and usedRegularSignin.

[0054] Step 5: By importing the page-level components Menu, Org, and User provided by the system's permission management component, and directly referencing them in the business system's routes or templates, you can quickly integrate a complete permission management interface.

[0055] Step six: By using the ConfigProvider component provided by the component and passing in the corresponding locale package, internationalization support for the text content inside the component is achieved.

[0056] The infrastructure of business systems will be continuously upgraded and modified as requirements evolve, which raises the question of how to upgrade the system for business projects. Iterating on basic capabilities involves modifications to components and project templates. Specific steps include: Write a changelog for the component to record the changes in this iteration, and write corresponding usage documentation.

[0057] Based on the target iteration version, change the component version, compile, package, and upload it to the company's internal component library.

[0058] Change the project's base template, create a new Git branch, change the versions of the referenced components, merge them into the main branch via Mergequest, and add a version tag.

[0059] Write project upgrade documentation.

[0060] When upgrading business projects, upgrade the system yourself according to the project upgrade documentation and the specific changes in the merge request.

[0061] Based on the same inventive concept, embodiments of the present invention also provide an electronic device, including: one or more processors; a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory and configured to be executed by the one or more processors, the programs including instructions for executing the front-end architecture. Since the principle by which the electronic device solves the problem is similar to that of the aforementioned front-end architecture, the implementation of this electronic device can refer to the implementation of the aforementioned method, and repeated details will not be elaborated further.

[0062] Based on the same inventive concept, embodiments of the present invention also provide a computer-readable storage medium storing a computer program thereon, characterized in that the computer program implements the front-end architecture when executed by a processor. Since the principle by which the computer-readable storage medium solves the problem is similar to that of the aforementioned front-end architecture, the implementation of this computer-readable storage medium can refer to the implementation of the aforementioned method, and repeated details will not be elaborated further.

[0063] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to the method section.

[0064] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A front-end architecture for a mid-to-back-end permission management system, characterized in that, include: A project template library for storing and providing basic project templates based on front-end frameworks; The system's core logic components are published to a private component library, which encapsulates the authentication and authorization core logic modules of the middle and back-end permission management system, as well as the corresponding application programming interfaces decoupled from the user interface library. The system permission management view component is published to a private component library. Based on the data, authentication and authorization core logic modules, and user interface library provided by the system core logic components, a user interface-based permission management function interface is built. The business system initializes the business front-end application of the middle and back-end permission management system by obtaining a basic project template from the project template library and importing a specified version of the system core logic component and system permission management view component from the private component library.

2. The front-end architecture of the middle and back-end permission management system as described in claim 1, characterized in that, The core logic components of the system include: The authentication module manages user identity status, creates an authentication status database to store and provide user authentication information, and encapsulates an HTTP client interceptor for globally handling authentication failure requests. The authorization module is used to manage user permission status, create an authorization status database to store and provide user permission data, and dynamically configure the routing information of the front-end routing framework based on the permission data. The route guard module, integrated with the front-end routing framework, is used to intercept routing requests and control access to the routes based on information in the authentication state database and the authorization state database.

3. The front-end architecture of the middle and back-end permission management system as described in claim 2, characterized in that, The authentication module also provides business logic for multiple login methods in the form of composable APIs, including a first composable API function for account and password login, a second composable API function for mobile phone verification code login, and a third composable API function for email and password login.

4. The front-end architecture of the middle and back-end permission management system as described in claim 2, characterized in that, The authorization module responds to user permission information obtained from an external server, and the permission information includes at least menu permissions and button permissions. The authorization module is configured as follows: Based on the menu permissions, dynamically add accessible routes to the front-end routing framework; Provides a command-based front-end UI element permission control mechanism, which controls whether or not associated front-end UI elements are rendered in the view layer according to the button permissions.

5. The front-end architecture of the middle and back-end permission management system as described in claim 2, characterized in that, The routing guard module is configured to perform the following steps: Determine whether the target route belongs to the preset authentication-free whitelist; If it does not belong to the authentication status database, check the authentication status database to determine whether the current user has completed authentication; If not authenticated, the request will be redirected to the login page; If authenticated, check the authorization status database to determine whether the current user has permission to access the target route; If you do not have permission, this access will be denied.

6. The front-end architecture of the middle and back-end permission management system as described in claim 1, characterized in that, The system permission management view component provides a user interface that includes at least one of the following management functions: organization management, role management, user management, menu resource management, and organization authorization management.

7. The front-end architecture of the middle and back-end permission management system as described in claim 1, characterized in that, The core logic components of the system are independent of any user interface library; however, the system permission management view component is implemented based on at least one specific user interface library.

8. The front-end architecture of the middle and back-end permission management system as described in claim 1, characterized in that, The project template library is a Git library, and the private component library is an npm library. The business system imports the specified versions of the system's core logic components and system permission management view components from the npm library through the package management tool in the basic project template.

9. An electronic device, comprising: One or more processors; Memory; And one or more computer programs, wherein the one or more computer programs are stored in the memory and configured to be executed by the one or more processors, the programs including instructions for executing the front-end architecture as described in any one of claims 1 to 8.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the front-end architecture as described in any one of claims 1 to 8.

Images