Permission management method and device based on Next.js, equipment and medium

Abstract

The invention discloses an authority management method and device based on Next.js, equipment and a medium, and relates to the technical field of front-end development, and the method comprises the steps that middleware obtains an access request of a target user side to a target server; analyzing the access request to obtain a corresponding analysis result, and determining whether the target user side has a corresponding access permission or not based on the analysis result through the permission policy engine; and when the target user side has the access permission, acquiring a page permission corresponding to the access request from the target server, and injecting the page permission into a page component of the target user side to obtain an injected component, so that the target user side determines a target high-order component based on the injected component, and sends the target high-order component to the target server. And completing a preset page interaction operation on the injected component based on the target high-order component. According to the invention, an efficient authority management scheme suitable for enterprise Web applications can be realized.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, and in particular to a permission management method, apparatus, device, and medium based on Next.js. Background Technology

[0002] As enterprise web applications become increasingly complex and scalable, access control systems have become a core component for ensuring application security and compliance. With the deepening of digital transformation, modern enterprise applications are demanding more sophisticated access control, with multi-tenant data isolation, dynamic permission adjustments, and real-time activation of security policies becoming fundamental requirements.

[0003] Traditional front-end application permission management solutions have significant drawbacks. The core issue is that permission verification logic is mostly executed on the browser side: on the one hand, user permission information is directly exposed to the client, making it vulnerable to tampering or theft, leading to data security risks; on the other hand, the client needs to frequently request permission data from the server to determine the legitimacy of operations, which not only increases network bandwidth consumption but also causes performance issues such as page loading lag and slow operation response due to limited client computing power and permission verification delays, making it difficult to meet the user experience requirements of high-concurrency scenarios. Furthermore, traditional solutions lack a unified permission control entry point. When application routing or permission policies change, the permission logic needs to be adjusted page by page, resulting in high maintenance costs and susceptibility to management vulnerabilities.

[0004] Therefore, how to implement an efficient permission management solution suitable for enterprise web applications is a technical problem that urgently needs to be solved. Summary of the Invention

[0005] In view of this, the purpose of this invention is to provide a permission management method, apparatus, device, and medium based on Next.js, which can realize an efficient permission management solution suitable for enterprise web applications. The specific solution is as follows:

[0006] Firstly, this application provides a permission management method based on Next.js, applied to middleware running on a target server; the middleware, the target server, and the permission policy engine are all included in an enterprise-level web application built on Next.js; the permission policy engine is an engine built based on preset interfaces, preset access control policies, and preset adapters; the method includes:

[0007] Obtain the access request from the target user to the target server;

[0008] The access request is parsed to obtain the corresponding parsing result, so that the permission policy engine can determine whether the target user has the corresponding access permission based on the parsing result;

[0009] When the target user has the access permission, the page permission corresponding to the access request is obtained from the target server, and the page permission is injected into the page component of the target user to obtain the injected component, so that the target user can determine the target higher-order component based on the injected component, and complete the preset page interaction operation on the injected component based on the target higher-order component.

[0010] Optionally, parsing the access request to obtain the corresponding parsing result includes:

[0011] Based on the URL object of the access request, the request header and request path of the access request are parsed, and the request resource corresponding to the access request is determined using the request header and the request path.

[0012] The user identity information of the target user terminal is determined based on the access request;

[0013] The requested resource and the user identity information are determined as the parsing result.

[0014] Optionally, determining whether the target user terminal has the corresponding access permissions based on the parsing result includes:

[0015] The default initialization function of the permission policy engine is invoked to load the corresponding policy configuration data;

[0016] Based on the preset evaluation function of the permission policy engine and using the policy configuration data, the requested resource in the parsing result, and the user identity information, it is determined whether the target user has the corresponding access permission; the preset evaluation function is a function built based on the preset access control policy and the preset adapter.

[0017] Optionally, when the target user has the access permission, obtaining the page permission corresponding to the access request from the target server and injecting the page permission into the page component of the target user to obtain the injected component includes:

[0018] When the target user has the access permission, determine the corresponding target route to be redirected, and perform permission verification on the target route;

[0019] If the target route verification passes, the target page corresponding to the access request is determined based on the request path, and the target route is redirected to the target server. The page permissions corresponding to the target page are then retrieved from the target server through a preset application programming interface.

[0020] If the page permissions are found, the page permissions are stored in the preset service cache;

[0021] When the target client's page component has a page rendering requirement, the page permissions are retrieved from the preset service cache via an HTTP request, and the page permissions are injected into the page component via React.js dependency injection to obtain the injected component.

[0022] Optionally, determining the target higher-order component based on the injected component includes:

[0023] Identify the target page interaction element with permission identifier in the injected component, and generate a target higher-order component based on the target page interaction element; the permission identifier is used to indicate that the page interaction element needs permission control.

[0024] Optionally, determining the target page interactive element with permission identifier in the injected component includes:

[0025] When the code of the injected component is compiled, a preset Babel plugin is inserted into the corresponding compilation environment, and the preset Babel plugin is used to parse the code into an abstract syntax tree;

[0026] The attributes of each element in the abstract syntax tree are scanned, and the target page interactive elements with permission identifiers in the injected component are determined based on the obtained scan results.

[0027] Optionally, determining the target page interactive element with permission identifier in the injected component includes:

[0028] In the preset element creation function for the injected component, logic for checking the attributes of the created element is added to obtain a modified function so that when creating a target element in the injected component, the modified function is used to check whether the target element is the target page interactive element.

[0029] Secondly, this application provides a Next.js-based permission management device applied to middleware running on a target server; the middleware, the target server, and the permission policy engine are all included in an enterprise-level web application built on Next.js; the permission policy engine is an engine built based on a preset interface, a preset access control policy, and a preset adapter; the device includes:

[0030] The request acquisition module is used to acquire the access request from the target user to the target server;

[0031] The permission determination module is used to parse the access request and obtain the corresponding parsing result, so as to determine whether the target user has the corresponding access permission based on the parsing result by the permission policy engine;

[0032] The permission injection module is used to obtain the page permission corresponding to the access request from the target server when the target user terminal has the access permission, and inject the page permission into the page component of the target user terminal to obtain the injected component, so that the target user terminal can determine the target higher-order component based on the injected component, and complete the preset page interaction operation on the injected component based on the target higher-order component.

[0033] Thirdly, this application provides an electronic device, comprising:

[0034] Memory, used to store computer programs;

[0035] A processor is used to execute the computer program to implement the aforementioned Next.js-based permission management method.

[0036] Fourthly, this application provides a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, it implements the aforementioned permission management method based on Next.js.

[0037] In this application, middleware on the target server receives access requests from target users to the target server; it parses the access requests to obtain corresponding parsing results, and the permission policy engine determines whether the target user has the corresponding access permissions based on the parsing results; if the target user has the access permissions, it retrieves the page permissions corresponding to the access request from the target server and injects the page permissions into the page components of the target user to obtain an injected component, so that the target user can determine the target higher-order component based on the injected component and complete a preset page interaction operation based on the target higher-order component. As can be seen from the above, in this application, the middleware on the target server receives access requests sent by the target user to the target server. After parsing the access requests and obtaining the corresponding parsing results, the permission policy engine determines whether the target user has the corresponding access permissions based on the parsing results. If the target user has the access permissions, it retrieves the page permissions matching the access request from the target server and injects the page permissions into the page components of the target user to form an injected component. The target user can determine the target higher-order component based on the injected component, and then complete the preset page interaction operations on the injected component with the help of the target higher-order component. In this way, this application can realize an efficient permission management solution suitable for enterprise web applications, thereby improving the user experience to a certain extent. Attached Figure Description

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

[0039] Figure 1 This application discloses a flowchart of a permission management method based on Next.js.

[0040] Figure 2 This application discloses a specific flowchart of a permission management method based on Next.js.

[0041] Figure 3 This is a schematic diagram of a specific permission verification process based on Next.js disclosed in this application;

[0042] Figure 4 This is a schematic diagram of a strategy engine architecture disclosed in this application;

[0043] Figure 5 This is a schematic diagram of a high-order component generation and processing flow disclosed in this application;

[0044] Figure 6 This is a schematic diagram of the permission management device based on Next.js disclosed in this application;

[0045] Figure 7 This is a structural diagram of an electronic device disclosed in this application. Detailed Implementation

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

[0047] Currently, traditional front-end application permission management solutions have significant shortcomings. The core issue is that permission verification logic is mostly executed on the browser side: on the one hand, user permission information is directly exposed to the client, making it vulnerable to tampering or theft, leading to data security risks; on the other hand, the client needs to frequently request permission data from the server to determine the legitimacy of operations, which not only increases network bandwidth consumption but also causes performance issues such as page loading lag and slow operation response due to limited client computing power and permission judgment delays, making it difficult to meet the user experience requirements of high-concurrency scenarios. Furthermore, traditional solutions lack a unified permission control entry point. When application routing or permission policies change, permission logic needs to be adjusted page by page, resulting in high maintenance costs and susceptibility to control vulnerabilities. Therefore, this application provides a permission management method, device, equipment, and medium based on Next.js, which can realize an efficient permission management solution suitable for enterprise web applications.

[0048] See Figure 1 and Figure 2 As shown, this embodiment of the invention discloses a permission management method based on Next.js, applied to middleware running on a target server; the middleware, the target server, and the permission policy engine are all included in an enterprise-level web application built on Next.js; the permission policy engine is an engine built based on preset interfaces, preset access control policies, and preset adapters; the method includes:

[0049] Step S11: Obtain the access request from the target user terminal to the target server.

[0050] In this embodiment, middleware running on the target server captures access requests initiated by the target user by intercepting network traffic. It should be noted that these access requests are sent from the target user to the target server, aiming to access specific resources or services in an enterprise-level web application. To accurately capture these access requests, this embodiment can employ various implementation methods. In one specific implementation, the middleware can automatically capture the request before it reaches the core logic of the target server using a predefined interception mechanism. Furthermore, Figure 2 The next.js gateway mentioned is the middleware in this application. In another specific implementation, the middleware can obtain access requests in real time by listening to specific network ports or event triggers configured on the target server. For example, when a user initiates a request through a browser or mobile application, the server-side network listening module will forward the request data to the middleware for processing in real time. The aforementioned access request typically includes a request method, request header information, and optional request body data, where the request header may carry key information such as user identity credentials or session identifiers. In this embodiment, obtaining the access request is the initial step in the permission management process. By parsing the various components of the request, necessary input data can be provided for subsequent permission verification operations.

[0051] Step S12: Parse the access request to obtain the corresponding parsing result, so as to determine whether the target user has the corresponding access permission based on the parsing result by the permission policy engine.

[0052] In this embodiment, after successfully obtaining the access request, the middleware immediately initiates a parsing process to extract key information from the request. In one specific implementation, the request header and request path of the access request are parsed based on the URL object of the access request, and the request resource corresponding to the access request is determined using the request header and request path; simultaneously, the user identity information of the target user is determined based on the access request; and the request resource and the user identity information are determined as the parsing result.

[0053] After completing the parsing and obtaining the parsing result, the preset initialization function of the permission policy engine is called to load the corresponding policy configuration data; based on the preset evaluation function of the permission policy engine and using the policy configuration data, the requested resource in the parsing result, and the user identity information, it is determined whether the target user has the corresponding access permission; wherein, the preset evaluation function is a function built based on the preset access control policy and the preset adapter.

[0054] Step S13: When the target user terminal has the access permission, the page permission corresponding to the access request is obtained from the target server, and the page permission is injected into the page component of the target user terminal to obtain the injected component, so that the target user terminal can determine the target higher-order component based on the injected component, and complete the preset page interaction operation on the injected component based on the target higher-order component.

[0055] In this embodiment, after the permission policy engine confirms that the target user has the access permission, the middleware triggers the subsequent page permission processing flow. Specifically, when the target user has the access permission, the corresponding target route to be redirected is determined, and the permission of the target route is verified. If the target route verification passes, the target page corresponding to the access request is determined based on the request path, and the target route is redirected to the target server. The page permission corresponding to the target page is searched from the target server through a preset application programming interface. If the page permission is found, the page permission is stored in a preset service cache.

[0056] When the target client's page component has a page rendering requirement, the page permissions are retrieved from the preset service cache via an HTTP request, and the page permissions are injected into the page component via React.js dependency injection to obtain the injected component.

[0057] After obtaining the injected component, it is necessary to further identify the target page interaction element with permission identifier in the injected component, and generate a target high-order component (HOC) based on the target page interaction element. The permission identifier is used to indicate that the page interaction element needs permission control, and the high-order component encapsulates the permission check logic, which can intercept or modify the behavior of the element at runtime.

[0058] To accurately identify target page interactive elements in the injected component, in one specific implementation, a preset Babel plugin can be introduced during the component code compilation stage. Specifically, when the code of the injected component is compiled, the preset Babel plugin is inserted into the corresponding compilation environment, and the preset Babel plugin is used to parse the code into an abstract syntax tree; the attributes of each element in the abstract syntax tree are scanned, and the target page interactive elements with permission identifiers in the injected component are determined based on the obtained scan results.

[0059] In another specific implementation, in the preset element creation function for the injected component, the logic for checking the attributes of the created element is added to obtain the modified function, so that when the target element is created in the injected component, the modified function is used to check whether the target element is the target page interactive element.

[0060] Ultimately, the target user client, through the collaborative work of the injected component and the target higher-order component, completes the preset interactive operations on the page, such as conditionally displaying buttons or restricting form submissions, thereby ensuring that all user operations comply with the permission policy requirements.

[0061] As can be seen from the above, in this application, the middleware of the target server receives access requests sent by the target user client to the target server. After parsing the access request and obtaining the corresponding parsing result, the permission policy engine determines whether the target user client has the corresponding access permissions based on the parsing result. If the target user client has the access permissions, it retrieves the page permissions matching the access request from the target server and then injects the page permissions into the page components of the target user client, forming the injected component. The target user client can determine the target higher-order component based on the injected component and complete the preset page interaction operations by using the target higher-order component on the injected component. In this way, this application can realize an efficient permission management solution suitable for enterprise web applications, thereby improving the user experience to a certain extent.

[0062] The following is combined Figure 3 , Figure 4 as well as Figure 5 The schematic diagram shown illustrates some aspects of the technical solution in the embodiments of this application.

[0063] For details, see Figure 4 The core of the policy engine shown is, firstly, the permission policy engine (i.e. Figure 3The permission policy engine is designed to adapt to third-party service access by enabling flexible combinations of multiple policies through standardized interfaces. For the policy interface of the permission policy engine, a unified policy interface specification is defined, requiring the policy module to implement two methods: initialization (init) and evaluation (evaluate). The initialization method loads the policy configuration, and the evaluation method executes the specific permission judgment logic. Access control policies for the permission policy engine can include RBAC (Role-Based Access Control) and ABAC (Attribute-Based Access Control). RBAC policies can verify permissions through role membership relationships and maintain a role-permission mapping table; ABAC policies are based on an attribute rule engine and support policy definitions for dynamic attributes such as department and time. For third-party service adaptation of the permission policy engine, dedicated adapters are developed to connect to mainstream permission services, including: the KeyCloak adapter, which obtains user permission claims through the OIDC (OpenIDConnect, a lightweight authentication and authorization based on OAuth 2.0) protocol; the Casbin adapter, which converts policy rules to a Casbin-supported model format; and the NextAuth adapter, which acts as a bridge integrating session information and the permission system.

[0064] Figure 3 The middleware gateway in the Next.js middleware pipeline serves as the core control layer of the system, and its key components include: request interception mechanism, route authentication mechanism, context construction, and exception handling. The request interception mechanism involves inserting permission checkpoints into the Next.js middleware pipeline to examine incoming requests. By analyzing the request URL (Uniform Resource Locator) and method, it determines the resources requiring authentication. Specifically, within the middleware processing function, it retrieves the request's details using `request.nextUrl`, determines the specific resource to be accessed based on its headers and pathname, and then processes it at the permission verification gateway.

[0065] The route authentication mechanism verifies access permissions for the upcoming route using the obtained user permission metadata. If permissions are granted, the corresponding page and its sub-functions' permission DSL (Domain-Specific Language) JSON (JavaScript Object Notation) data is injected into the page component, and can be distributed to sub-components for processing. If permissions are denied, the route is forwarded to a pre-defined error page route. Specifically, the middleware processing function obtains the request details using `request.nextUrl` and determines the specific page to be accessed (e.g., ` / setting`) based on its `pathname` and other properties. The JSON data is then processed using JavaScript... The `findApi` checks if the corresponding permissions are available. If the corresponding permissions are found, the permission JSON sub-data from the ` / settings` page is retrieved and stored in the service cache. Specifically, the service cache can be implemented using Redis, Vercel / key-value pairs, or JSON file caching. Furthermore, when rendering the target page component, the page permission JSON data is retrieved from the cache service. If it's a server-side component, the permission JSON data is retrieved via an asynchronous request; if it's a client-side component, the permission JSON data is requested from the server via an HTTP request. Finally, after obtaining the page permission JSON data, it's embedded into the page using React.js's dependency injection feature. Specifically, the permission data is stored in the page root component via the `Context.Provider` API, allowing the root component and all its child components to access and use it. During the process of obtaining page permission data, child components can dynamically display the data using asynchronous components combined with skeleton screens or loading indicators to improve the user experience.

[0066] The context construction involves extracting user identity information from the request, such as a JWT (JSON Web Token), and combining it with parameters to construct a complete permission verification context, including: user identity and attributes, the target resource requested, and the type of operation (read / write, etc.). The exception handling provides multiple processing methods for unauthorized requests, such as returning a standard HTTP (Hypertext Transfer Protocol) 403 error, redirecting to a specified page, or returning degraded content.

[0067] See Figure 5As shown, before user interaction on a page component, custom directives can be pre-set at the interaction point where permissions need to be managed. This is then implemented through compile-time code detection and transformation of the component code. Specifically, the custom directive `data-permit` is added to the specific code, with the directive value being the permission key to be associated. <button data-permit="”userPage:add”">< / button> The process involves compile-time processing, which can be performed by using a custom Babel plugin or by overriding the framework's `CreateElement` method to scan JSX elements and identify `data-permit` directives. Specifically, if using a custom Babel plugin, it can be applied to the lifecycle hooks of major bundling and compilation tools such as Webpack, Vite, and Turbopack. The plugin uses an AST (Abstract Syntax Tree) to detect the presence of specified directives in the render function. The core code implementation is shown below:

[0068] / / Parse DOM nodes into AST nodes function parseNodeToAST(node) { / / Process element nodes if (node.nodeType === Node.ELEMENT_NODE) ​​{ / / Collection Attributes for (let i = 0; i < node.attributes.length; i++) { const attr = node.attributes[i]; / / Check the data-permit attribute if (attr.name === 'data-permit') { / / Execute subsequent logic handlePermit() } } } return astNode; }

[0069] If we override the CreateElement method, the core code for its implementation can be shown below:

[0070] / / Extended createElement method React.createElement = function (type, props, ...children) { / / Handling the data-permit attribute if (props && props['data-permit']) { const permitValue = props['data-permit']; const hasPermission = checkPermission(permitValue); / / Remove element if permission is not granted. if (!hasPermission) { return null; } / / If you have permission, remove the data-permit attribute. const { ['data-permit']: _, ...filteredProps} = props; / / Customize and modify subcomponent content return originalCreateElement(type, filteredProps, ...handlePermit(children)); } / / Normal element processing return originalCreateElement(type, props, ...children); };

[0071] Furthermore, the directives are converted into higher-order component (HOC) calls, automatically generating a permission wrapper layer. Specifically, when the previous step detects that the render function contains a DOM (Document Object Model) or that the component applies the data-permit custom directive, the handlePermit function wraps the corresponding DOM or component with an HOC. The implementation code for this step is shown below:

[0072] export function WithPermission({ children permit, fallback = null }) { const { hasPermission} = usePermissions(); return hasPermission(permit) ? children : fallback; }

[0073] Finally, based on the page and its operation permission data, the corresponding permission DSL is found according to the value of the data-permit directive, and subsequent operations are performed according to the permission DSL data, such as hiding / showing, disabling, error message, etc. The execution event is implemented through the HOC listening proxy.

[0074] Additionally, for permission metadata, a DSL is designed to define a declarative language to describe permission resources, including: resource identifier, scope, associated policy configuration, security constraints, permission matching processing, and descriptions of lower-level permissions. The scope can be routes, APIs, components, etc. Then, the DSL is parsed to generate the required JSON data. Some of the JSON data can be represented by the following code: [ { "id": "user", "name": "User Management", "path": " / path", "description": "User management permissions", "children": [], } ]

[0076] Then, the Next.js service retrieves this JSON data for use by the middleware. When a route switch is performed and the permissions are granted, the permission data for the corresponding page and its function is obtained based on the route key path, and the data is injected into the component for easy use by specific functions.

[0077] Therefore, this application supports RBAC, ABAC and third-party service access, uses middleware to intercept and judge requests, uses metadata to define permission rules, and controls page element permissions through HOC and DOM directives. It has the characteristics of flexible configuration and fast response, which can significantly improve development efficiency and expand application scenarios.

[0078] Accordingly, see Figure 6As shown, this application provides a Next.js-based permission management device applied to middleware running on a target server; the middleware, the target server, and the permission policy engine are all included in an enterprise-level web application built on Next.js; the permission policy engine is an engine built based on a preset interface, a preset access control policy, and a preset adapter; the device includes:

[0079] The request acquisition module 11 is used to acquire the access request from the target user terminal to the target server;

[0080] The permission determination module 12 is used to parse the access request and obtain the corresponding parsing result, so as to determine whether the target user terminal has the corresponding access permission based on the parsing result by the permission policy engine;

[0081] The permission injection module 13 is used to obtain the page permission corresponding to the access request from the target server when the target user terminal has the access permission, and inject the page permission into the page component of the target user terminal to obtain the injected component, so that the target user terminal can determine the target higher-order component based on the injected component, and complete the preset page interaction operation on the injected component based on the target higher-order component.

[0082] In some specific embodiments, the permission determination module 12 specifically includes:

[0083] The resource determination unit is used to parse the request header and request path of the access request based on the URL object of the access request, and use the request header and request path to determine the request resource corresponding to the access request;

[0084] Information determination unit, used to determine the user identity information of the target user terminal based on the access request;

[0085] The result determination unit is used to determine the requested resource and the user identity information as the parsing result.

[0086] In some specific embodiments, the permission determination module 12 specifically includes:

[0087] The data loading unit is used to call the preset initialization function of the permission policy engine to load the corresponding policy configuration data;

[0088] The permission determination unit is used to determine whether the target user terminal has the corresponding access permissions based on the preset evaluation function of the permission policy engine and using the policy configuration data, the requested resource in the parsing result, and the user identity information; the preset evaluation function is a function constructed based on the preset access control policy and the preset adapter.

[0089] In some specific embodiments, the permission injection module 13 specifically includes:

[0090] A route verification unit is used to determine the corresponding target route to be redirected when the target user terminal has the access permission, and to perform permission verification on the target route;

[0091] The permission lookup unit is used to determine the target page corresponding to the access request based on the request path if the target route verification passes, and redirect the target route to the target server, and search for the page permission corresponding to the target page from the target server through a preset application programming interface;

[0092] The permission storage unit is used to store the page permission in a preset service cache if the page permission is found.

[0093] The permission injection unit is used to extract the page permissions from the preset service cache via an HTTP request when the page component of the target client has a page rendering requirement, and inject the page permissions into the page component through the dependency injection method of React.js to obtain the injected component.

[0094] In some specific embodiments, the permission injection module 13 specifically includes:

[0095] The component generation unit is used to determine the target page interactive element with permission identifier in the injected component, and generate a target higher-order component based on the target page interactive element; the permission identifier is used to indicate that the page interactive element needs to be subject to permission control.

[0096] In some specific embodiments, the component generation unit specifically includes:

[0097] The code parsing subunit is used to insert a preset Babel plugin in the corresponding compilation environment when the code of the injected component is compiled, and to use the preset Babel plugin to parse the code into an abstract syntax tree;

[0098] The element determination subunit is used to scan the attributes of each element in the abstract syntax tree and determine the target page interactive elements with permission identifiers in the injected component based on the obtained scan results.

[0099] In some specific embodiments, the component generation unit specifically includes:

[0100] The element checking subunit is used to add the checking logic for the attributes of the created element to the preset element creation function for the injected component, so as to obtain the modified function, so that when the target element is created in the injected component, the modified function is used to check whether the target element is the target page interactive element.

[0101] Furthermore, embodiments of this application also disclose an electronic device, Figure 7 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content of the diagram should not be construed as limiting the scope of this application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 stores a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the Next.js-based permission management method disclosed in any of the foregoing embodiments. Furthermore, the electronic device 20 in this embodiment may specifically be a computer.

[0102] In this embodiment, the power supply 23 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and external devices, and the communication protocol it follows can be any communication protocol applicable to the technical solution of this application, and is not specifically limited here; the input / output interface 25 is used to acquire external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs, and is not specifically limited here.

[0103] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, disk or optical disk, etc. The resources stored thereon can include operating system 221, computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0104] The operating system 221 is used to manage and control the various hardware devices on the electronic device 20 and the computer program 222, which may be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program capable of performing the Next.js-based permission management method executed by the electronic device 20 as disclosed in any of the foregoing embodiments, the computer program 222 may further include computer programs capable of performing other specific tasks.

[0105] Furthermore, this application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, it implements the aforementioned Next.js-based permission management method. Specific steps of this method can be found in the corresponding content disclosed in the foregoing embodiments, and will not be repeated here.

[0106] 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 it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to in the method section.

[0107] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0108] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein can be implemented directly by hardware, a software module executed by a processor, or a combination of both. The software module can be located in random access memory (RAM), main memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, removable disk, CD-ROM, or any other form of storage medium known in the art.

[0109] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0110] The technical solutions provided in this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the methods and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A permission management method based on Next.js, characterized in that, The middleware is applied to the target server; the middleware, the target server, and the permission policy engine are all contained in an enterprise-level web application built on Next.js. The permission policy engine is an engine built based on preset interfaces, preset access control policies, and preset adapters; The method includes: Obtain the access request from the target user to the target server; The access request is parsed to obtain the corresponding parsing result, so that the permission policy engine can determine whether the target user has the corresponding access permission based on the parsing result; When the target user has the access permission, the page permission corresponding to the access request is obtained from the target server, and the page permission is injected into the page component of the target user to obtain the injected component, so that the target user can determine the target higher-order component based on the injected component, and complete the preset page interaction operation on the injected component based on the target higher-order component.

2. The permission management method based on Next.js according to claim 1, characterized in that, The parsing of the access request to obtain the corresponding parsing result includes: Based on the URL object of the access request, the request header and request path of the access request are parsed, and the request resource corresponding to the access request is determined using the request header and the request path. The user identity information of the target user terminal is determined based on the access request; The requested resource and the user identity information are determined as the parsing result.

3. The permission management method based on Next.js according to claim 2, characterized in that, Determining whether the target user terminal has the corresponding access permissions based on the parsing result includes: The default initialization function of the permission policy engine is invoked to load the corresponding policy configuration data; Based on the preset evaluation function of the permission policy engine and using the policy configuration data, the requested resource in the parsing result, and the user identity information, it is determined whether the target user has the corresponding access permission; the preset evaluation function is a function built based on the preset access control policy and the preset adapter.

4. The permission management method based on Next.js according to claim 2, characterized in that, When the target user client has the access permission, the page permission corresponding to the access request is obtained from the target server, and the page permission is injected into the page component of the target user client to obtain the injected component, including: When the target user has the access permission, determine the corresponding target route to be redirected, and perform permission verification on the target route; If the target route verification passes, the target page corresponding to the access request is determined based on the request path, and the target route is redirected to the target server. The page permissions corresponding to the target page are then retrieved from the target server through a preset application programming interface. If the page permissions are found, the page permissions are stored in the preset service cache; When the target client's page component has a page rendering requirement, the page permissions are retrieved from the preset service cache via an HTTP request, and the page permissions are injected into the page component via React.js dependency injection to obtain the injected component.

5. The permission management method based on Next.js according to any one of claims 1 to 4, characterized in that, The step of determining the target higher-order component based on the injected component includes: Identify the target page interaction element with permission identifier in the injected component, and generate a target higher-order component based on the target page interaction element; the permission identifier is used to indicate that the page interaction element needs permission control.

6. The permission management method based on Next.js according to claim 5, characterized in that, The step of determining the target page interactive element with permission identifier in the injected component includes: When the code of the injected component is compiled, a preset Babel plugin is inserted into the corresponding compilation environment, and the preset Babel plugin is used to parse the code into an abstract syntax tree; The attributes of each element in the abstract syntax tree are scanned, and the target page interactive elements with permission identifiers in the injected component are determined based on the obtained scan results.

7. The permission management method based on Next.js according to claim 5, characterized in that, The step of determining the target page interactive element with permission identifier in the injected component includes: In the preset element creation function for the injected component, logic for checking the attributes of the created element is added to obtain a modified function so that when creating a target element in the injected component, the modified function is used to check whether the target element is the target page interactive element.

8. A permission management device based on Next.js, characterized in that, The middleware is applied to the target server; the middleware, the target server, and the permission policy engine are all contained in an enterprise-level web application built on Next.js. The permission policy engine is an engine built based on preset interfaces, preset access control policies, and preset adapters; The device includes: The request acquisition module is used to acquire the access request from the target user to the target server; The permission determination module is used to parse the access request and obtain the corresponding parsing result, so as to determine whether the target user has the corresponding access permission based on the parsing result by the permission policy engine; The permission injection module is used to obtain the page permission corresponding to the access request from the target server when the target user terminal has the access permission, and inject the page permission into the page component of the target user terminal to obtain the injected component, so that the target user terminal can determine the target higher-order component based on the injected component, and complete the preset page interaction operation on the injected component based on the target higher-order component.

9. An electronic device, characterized in that, include: Memory, used to store computer programs; A processor for executing the computer program to implement the Next.js-based permission management method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, Used to store computer programs; wherein, when the computer programs are executed by a processor, they implement the permission management method based on Next.js as described in any one of claims 1 to 7.

Images