CN115686514A - 基于React的权限控制方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例公开了一种基于React的权限控制方法、装置、电子设备及存储介质。该方案可以根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息，将权限信息存储至状态管理库，并基于状态管理库配置页面权限，创建包含多个角色信息与路由之间的对应关系的路由表，根据权限信息遍历路由表，以获取与权限信息对应的组件和控件配置权限，通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件，基于页面权限和目标组件对网页进行渲染。本申请实施例可以通过使用React高阶组件HOC将项目里的所有模块的权限进行统一配置，有效提升了权限配置的效率。

Description

基于React的权限控制方法、装置、电子设备及存储介质

技术领域

本申请涉及数据处理技术领域，具体涉及一种基于React的权限控制方法、装置、电子设备及存储介质。

背景技术

随着移动应用技术的不断发展，在移动客户端的显示页面中，针对不同用户展示不同的页面内容，对提升移动客户端的页面显示效果，提升用户的移动客户端使用体验具有重要意义。在前端项目开发中，实现权限管理是较为常见的需求。随着前端项目相关技术的迅速发展，导致每一种项目结构中想要实现权限管理功能非常不方便。

目前，现有的权限控制一般是前端向后台接口发送异步数据，前端将获取到的接口返回的权限数据在页面需要配置权限的地方添加权限判断。这样在系统页面较少时没什么影响，但是对于一个成熟的系统来说传统方案不利于维护的弊端就暴露出来了。由于系统的页面、组件、控件三大模块都需要前端人员进行配置。当某一块内容有权限相关的需求频繁改变时就需要开发人员针对每一个模块进行单独的权限配置，从而使得权限配置效率较低。

发明内容

本申请实施例提供一种基于React的权限控制方法、装置、电子设备及存储介质，可以通过使用React高阶组件HOC将项目里的所有模块的权限进行统一配置，有效提升了权限配置的效率。

本申请实施例提供一种基于React的权限控制方法，包括：

根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息；

将所述权限信息存储至状态管理库，并基于所述状态管理库配置页面权限；

创建包含多个角色信息与路由之间的对应关系的路由表，根据所述权限信息遍历所述路由表，以获取与所述权限信息对应的组件和控件配置权限；

通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件；

基于所述页面权限和目标组件权限对网页进行渲染。

本申请实施例还提供一种基于React的权限控制装置，包括：

获取单元，用于根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息；

存储单元，用于将所述权限信息存储至状态管理库，并基于所述状态管理库配置页面权限；

创建单元，用于创建包含多个角色信息与路由之间的对应关系的路由表，根据所述权限信息遍历所述路由表，以获取与所述权限信息对应的组件和控件配置权限；

添加单元，用于通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件；

渲染单元，用于基于所述页面权限和目标组件对网页进行渲染。

本申请实施例还提供一种电子设备，所述电子设备包括：存储器、处理器，其中，所述存储器上存储有应用程序处理程序，所述应用程序处理程序被所述处理器执行时实现本申请实施例所提供的任一项所述的基于React的权限控制方法的步骤。

本申请实施例还提供一种计算机可读的存储介质，所述存储介质存储有多条指令，所述指令适于处理器进行加载，以执行本申请实施例所提供的任一基于React的权限控制方法。

本申请实施例提供的基于React的权限控制方法，可以根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息，将权限信息存储至状态管理库，并基于状态管理库配置页面权限，创建包含多个角色信息与路由之间的对应关系的路由表，根据权限信息遍历路由表，以获取与权限信息对应的组件和控件配置权限，通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件，基于页面权限和目标组件对网页进行渲染。本申请实施例可以通过使用React高阶组件HOC将项目里的所有模块的权限进行统一配置，有效提升了权限配置的效率。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的基于React的权限控制方法的第一种流程示意图；

图2是本申请实施例提供的基于React的权限控制方法的第二种流程示意图；

图3是本申请实施例提供的基于React的权限控制方法的第三种流程示意图；

图4是本申请实施例提供的基于React的权限控制装置的第一种结构示意图；

图5是本申请实施例提供的基于React的权限控制装置的第二种结构示意图；

图6是本申请实施例提供的电子设备的结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素，此外，本申请不同实施例中具有同样命名的部件、特征、要素可能具有相同含义，也可能具有不同含义，其具体含义需以其在该具体实施例中的解释或者进一步结合该具体实施例中上下文进行确定。

应该理解的是，虽然本申请实施例中的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

需要说明的是，在本文中，采用了诸如101、102等步骤代号，其目的是为了更清楚简要地表述相应内容，不构成顺序上的实质性限制，本领域技术人员在具体实施时，可能会先执行102后执行101等，但这些均应在本申请的保护范围之内。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

本申请实施例提供一种基于React的权限控制方法，该基于React的权限控制方法的执行主体可以是本申请实施例提供的基于React的权限控制装置，或者集成了该基于React的权限控制装置的智能终端及服务器，其中该基于React的权限控制装置可以采用硬件或者软件的方式实现。

在描述本申请的技术方案之前，先对相关的技术术语进行简单解释：

React：是用于构建用户界面的JavaScript库，主要用于构建UI。可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

Redux：是一个受Flux架构以及函数式编程语言Elm启发的前端架构。Redux只专注于应用程序状态，是一个JavaScript的状态容器，所有的状态的变化都是当前状态和Action共同的作用结果。

HOC：高阶组件HOC是React中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，高阶组件会对传入的组件做一些通用的处理。

在现有技术当中，前端获取到权限数据之后每次都需要在页面配置权限的地方添加权限判断，不利于项目维护。此流程从逻辑上来讲是可行的，但是系统的页面、组件、控件三大模块都需要前端人员进行配置。当某一块内容有权限相关的需求频繁改变时就需要开发人员针对每一个模块进行单独的权限配置。并且这种方式代码冗余，复用性不高。例如一个页面有多个按钮均需要配置权限，这时候开发人员就需要重复多次按钮权限判断的逻辑实现，会造成项目代码冗余且没有复用性，不符合开发的思想。

基于此，本申请实施例从根本上解决了上述问题，通过使用React高阶组件HOC将项目里的所有权限配置统一配置在一个比重，权限的值可以通过后端同步返回，也可以通过利用Promise每次异步获取，解决了传统技术方案的复用性不高、不利于项目维护以及代码冗余的问题。

具体的，请参阅图1，图1是本申请实施例提供的基于React的权限控制方法的第一流程示意图，该基于React的权限控制方法的具体流程可以如下：

101、根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息。

在一实施例中，可以在用户登录客户端时，获取用户输入的鉴权信息以完成登录，其中用户输入的鉴权信息例如可以包括用户账号、密码等信息，还可以包括单点登录客户端的请求统一资源定位符(Uniform Resource Location，URL)。

其中，上述客户端，可以是移动终端(例如，手机、平板电脑等)的应用程序(Application，APP)客户端。在本实施例中，APP可以支持Windows操作系统、MAC操作系统、安卓操作系统或者IOS操作系统等，本实施例对此不作具体限定。

进一步的，可通过如下方式对用户登录请求中的鉴权信息进行校验：获取登录客户端基于请求统一资源定位符URL发送的登录请求，对登录请求中的请求统一资源定位符URL进行校验，确定登录请求中的请求统一资源定位符URL请求属于预设的白名单，之后对用户身份信息中包括的账户名，密码等信息进行校验，确定用户身份信息为已授权信息，然后再继续获取当前用户身份所对应的权限信息。

在一实施例中，还可以根据当前用户身份分析页面上需要进行权限控制的元素，比如包括页面、控件以及组件等，然后再进一步获取这些元素所对应的权限信息。其中，用户当前登录的身份可以与客户端对应的权限信息相关联。上述权限信息可以包括客户端中功能页面对应的页面配置权限、功能页面中控件分组对应的控件配置权限以及功能页面中组件分组对应的组件配置权限。

当用户当前登录的身份与客户端中功能页面对应的权限信息相关联时，对于客户端的不同用户，客户端将提供不同的功能页面。例如，对于用户A，提供页面1和页面2；对于用户B，提供页面1和页面3。而当用户当前登录的身份与功能页面中控件分组对应的权限信息相关联时，对于点击查看同一功能页面的不同用户，客户端将提供包括不同控件分组的功能页面。例如，用户A和用户B均查看页面1，对于用户A，页面1包括控件分组1和控件分组2；而对于用户B，页面1包括控件分组1和控件分组3。此外，当用户当前登录的身份与功能页面中组件分组对应的权限信息相关联时，针对不同的用户，客户端将提供包括不同组件分组的功能页面。例如，对于用户A，页面1包括组件分组A和控件分组B；而对于用户B，页面1包括组件分组A和控件分组C。通过赋予客户端的使用用户对应的用户当前登录的身份，即可以为该用户身份配置与各功能页面、控件和组件对应的用户权限。

102、将权限信息存储至状态管理库，并基于状态管理库配置页面权限。

在一实施例中，上述状态管理库可以为Redux，具体可以通过Redux将权限信息存储在程序内，然后进一步在Redux中配置页面权限。

在一实施例中，页面权限可以包括客户端中各功能页面对应的渲染数据。其中，上述页面的渲染数据可以为Json格式。需要说明的是，页面渲染数据与页面布局无关，仅包括客户端包括的功能页面。

103、创建包含多个角色信息与路由之间的对应关系的路由表，根据权限信息遍历路由表，以获取与权限信息对应的组件和控件配置权限。

在一实施例中，可以预先创建包含多个角色信息与路由之间的对应关系的路由表，其中路由表或称路由择域信息库(RIB，Routing Information Base)，是一个存储在路由器或者联网计算机中的电子表格(文件)或类数据库。上述角色信息可以包括普通用户、高级用户、管理员以及高级管理员等，不同的角色所打开的页面中所展现的内容也是不相同的。其中，路由是请求的URL与处理函数的映射，所以需要提前把请求的URL和处理函数关联好。路由表则可以用来保存每一个设置好的路由，在路由表中每次添加路由都需要手动添加。在其他实施例中，还可以使用装饰器从而自动完成路由的添加。

其中，在使用装饰器对处理函数进行装饰时，我们需要知道装饰的函数和哪个请求路径进行关联，所以需要接收一个URL参数，也就是说需要定义一个可以带参数的装饰器来添加路由。

在一实施例中，由于预先创建好了路由表，便可以根据上述权限信息遍历相应的路由表，从而获取相应的组件和控件配置权限。

104、通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件。

在一实施例中，还可以创建一个React高阶组件，比如为HCO，参数为需要进行权限配置的组件和控件，添加对应的组件和控件配置权限后将得到的目标组件暴露出去即可。

其中，添加配置权限后的目标组件包括的控件分组和组件分组等页面层级数据。具体可以包括各功能组件以及控件对应的配置信息，例如，控件是否可以被点击、控件被点击后跳转页面的页面类型和路由路径等。

105，基于页面权限和目标组件对网页进行渲染。

在本实施例中，在获取到页面权限和目标组件之后，便可以进行页面渲染。比如根据目标组件中的控件配置权限确定功能控件在分组区域的显示位置以及各功能控件对应的控件布局，例如，功能控件区域的大小、功能控件包括的子控件、各子控件在控件区域内的相对位置等。进而可以确定每个功能控件所适配的子数据源，并建立功能控件包括的各子控件与所适配的子数据源中各数据内容的适配关系。

在对页面进行渲染显示时，可以首先对页面框架进行渲染显示，然后可以在页面框架中对各控件分组的框架进行渲染显示，最终可以在页面框架中对各组件分组的框架进行渲染显示，以最终完成对页面的渲染显示。

需要说明的是，对于客户端页面，并不是所有的功能页面都需要基于用户当前登录的身份和与该身份对应的渲染数据进行动态生成。在本实施例中，可以使得客户端网页的一部分页面支持动态生成，另外的部分页面为固定页面(所有用户看到的页面相同)。其中，对于支持动态生成的部分客户端页面，可以进行预先设定，以在对该部分客户端页面进行展示时，可以根据对应的控件布局数据进行动态展示。

由上所述，本申请实施例提出的基于React的权限控制方法可以根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息，将权限信息存储至状态管理库，并基于状态管理库配置页面权限，创建包含多个角色信息与路由之间的对应关系的路由表，根据权限信息遍历路由表，以获取与权限信息对应的组件和控件配置权限，通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件，基于页面权限和目标组件对网页进行渲染。本申请实施例可以通过使用React高阶组件HOC将项目里的所有模块的权限进行统一配置，有效提升了权限配置的效率。

根据前面实施例所描述的方法，以下将作进一步详细说明。

请参阅图2，图2是本申请实施例提供的基于React的权限控制方法的第二种流程示意图。所述方法包括：

201、根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息。

在一实施例中，可以在用户登录客户端时，获取用户输入的鉴权信息以完成登录，其中用户输入的鉴权信息例如可以包括用户账号、密码等信息。

在一实施例中，还可以根据当前用户身份分析页面上需要进行权限控制的元素，比如包括页面、控件以及组件等，然后再进一步获取这些元素所对应的权限信息。其中，用户当前登录的身份可以与客户端对应的权限信息相关联。

202、将权限信息存储至状态管理库，并基于状态管理库配置页面权限。

在一实施例中，上述状态管理库可以为Redux，具体可以通过Redux将权限信息存储在程序内，然后进一步在Redux中配置页面权限。其中，因为Redux存储的数据刷新页面后会丢失，所以需要在刷新页面后重新获取一下用户权限信息。也即在将存储至权限信息状态管理库之后，方法还可以包括：判断当前页面是否刷新；若刷新，则在状态管理库中的数据清空之后再次将权限信息存储至状态管理库。

在一实施例中，针对页面权限，可以编写一个参数为所有路由表和权限的方法，再根据用户权限不同遍历相应的路由表，之后渲染到程序中。

203、创建包含多个角色信息与路由之间的对应关系的路由表，根据权限信息在路由表中查找目标菜单的路由。

在一实施例中，上述创建包含多个角色信息与路由之间的对应关系的路由表的步骤可以包括：获取当前网页中所有菜单的路由，根据多个角色信息建立与所有菜单的路由之间的映射关系，以得到路由表。

其中，上述角色信息可以包括普通用户、高级用户、管理员以及高级管理员等，不同的角色所打开的页面中所展现的内容也是不相同的。

204、根据目标菜单的路由确定对应的组件和控件配置权限。

在一实施例中，由于预先创建好了路由表，便可以根据上述权限信息遍历相应的路由表，从而获取相应的组件和控件配置权限。

205、获取当前网页中待配置的组件和控件。

206、将待配置的组件和控件作为原始组件，基于组件和控件配置权限将原始组件包裹在容器组件内，以得到目标组件。

在一实施例中，本实施例还可以通过高阶组件HOC将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件。其中，高阶组件(HOC)是React中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由React自身的组合性质必然产生的。

具体的，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，高阶组件会对传入的组件做一些通用的处理。高阶组件是通过将原组件包裹(wrapping)在容器组件(container component)里面的方式来组合(composes)使用原组件。高阶组件就是一个没有副作用的纯函数。在本实施例中，就可以将待配置的组件和控件作为原始组件，基于组件和控件配置权限将原始组件包裹在容器组件内，从而得到目标组件。

考虑到当使用高阶组件包装组件时，原始组件被容器组件包裹，也就意味着新组件会丢失原始组件的所有静态方法。因此在本申请实施例中，还可以在得到目标组件后，将原始组件的静态方法拷贝至该目标组件。

207，从预设资源池中获取与页面权限和目标组件匹配的布局数据。

208，根据布局数据和数据源，对网页进行渲染以及显示。

在本申请实施例中，在获取到布局数据之后，可以根据该布局数据确定目标页面以及页面中组件和控件的布局，例如各功能控件在分组区域的显示位置以及各功能控件对应的控件布局。进而可以确定每个功能控件所适配的子数据源，并建立功能控件包括的各子控件与所适配的子数据源中各数据内容的适配关系。

在一实施例中，根据布局数据和数据源，对网页进行渲染以及显示的步骤可以包括：根据与目标页面匹配的布局数据和数据源，建立与目标页面匹配的目标适配器，根据目标适配器对目标页面进行渲染显示。其中，目标适配器包括目标页面以及页面中各组件和控件对应的布局与匹配的子数据源之间的适配关系。比如，可以基于目标适配器中的各对适配关系对目标页面以及页面中的组件和控件进行遍历，以将支持用户当前登录的身份的页面以及页面中的组件和控件在对应的分组框架中进行渲染显示，从而实现对目标页面的渲染显示。

在一实施例中，在获取与页面权限和目标组件匹配的布局数据之后，可以首先判断是否存在与目标页面匹配的历史适配器，若确定不存在与目标页面匹配的历史适配器，则表示用户当前登录的身份为首次访问该目标页面，此时，可以建立与目标页面匹配的目标适配器。

进一步的，请参阅图3，通过图3可以看出，当使用本设计方案对页面、组件、控件这三大模块进行权限控制时，不用再向传统方案一样，对每个组件或者控件进行相同重复的设置，这提高了程序的复用性，降低了代码冗余。在对页面进行权限配置时，只需要在页面渲染之前，根据用户权限遍历一次路由表即可。对于组件进行权限配置时，摒弃了传统的每个组件配置一次的方法，只需要将需要配置权限的组件统一传入封装的HOC中就能实现。对于控件进行权限配置时，将需要配置权限的控件传入HOC，不再需要给每个控件单独配置，提升了程序性能。

由上所述，本申请实施例提出的基于React的权限控制方法可以根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息，将权限信息存储至状态管理库，并基于状态管理库配置页面权限，创建包含多个角色信息与路由之间的对应关系的路由表，根据权限信息在路由表中查找目标菜单的路由，根据目标菜单的路由确定对应的组件和控件配置权限，获取当前网页中待配置的组件和控件，将待配置的组件和控件作为原始组件，基于组件和控件配置权限将原始组件包裹在容器组件内，以得到目标组件，从预设资源池中获取与页面权限和目标组件匹配的布局数据，根据布局数据和数据源，对网页进行渲染以及显示。本申请实施例可以通过使用React高阶组件HOC将项目里的所有模块的权限进行统一配置，有效提升了权限配置的效率。

为了实施以上方法，本申请实施例还提供一种基于React的权限控制装置，该基于React的权限控制装置具体可以集成在电子设备设备如手机、平板电脑等设备中。

例如，如图4所示，是本申请实施例提供的基于React的权限控制装置的第一种结构示意图。该基于React的权限控制装置可以包括：

获取单元301，用于根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息；

存储单元302，用于将所述权限信息存储至状态管理库，并基于所述状态管理库配置页面权限；

创建单元303，用于创建包含多个角色信息与路由之间的对应关系的路由表，根据所述权限信息遍历所述路由表，以获取与所述权限信息对应的组件和控件配置权限；

添加单元304，用于通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件；

渲染单元305，用于基于所述页面权限和目标组件对网页进行渲染。

在一实施例中，请参阅图5，图5是本申请实施例提供的基于React的权限控制装置的第二种结构示意图，其中，创建单元303可以包括：

第一获取子单元3031，用于获取当前网页中所有菜单的路由；

创建子单元3032，用于根据多个角色信息建立与所述所有菜单的路由之间的映射关系，以得到所述路由表。

在一实施例中，添加单元304可以包括：

第二获取子单元3041，用于获取当前网页中待配置的组件和控件；

处理子单元3042，用于将所述待配置的组件和控件作为原始组件，基于所述组件和控件配置权限将所述原始组件包裹在容器组件内，以得到目标组件。

本申请实施例提出的基于React的权限控制装置，可以根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息，将权限信息存储至状态管理库，并基于状态管理库配置页面权限，创建包含多个角色信息与路由之间的对应关系的路由表，根据权限信息遍历路由表，以获取与权限信息对应的组件和控件配置权限，通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件，基于页面权限和目标组件对网页进行渲染。本申请实施例可以通过使用React高阶组件HOC将项目里的所有模块的权限进行统一配置，有效提升了权限配置的效率。

本申请实施例还提供一种电子设备，如图6所示，该电子设备可以包括射频(RF，Radio Frequency)电路601、包括有一个或一个以上计算机可读存储介质的存储器602、输入单元603、显示单元604、传感器605、音频电路606、无线保真(WiFi，Wireless Fidelity)模块607、包括有一个或者一个以上处理核心的处理器608、以及电源609等部件。本领域技术人员可以理解，图6中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路601可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器608处理；另外，将涉及上行的数据发送给基站。通常，RF电路601包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM，Subscriber Identity Module)卡、收发信机、耦合器、低噪声放大器(LNA，Low Noise Amplifier)、双工器等。此外，RF电路601还可以通过无线通信与网络和其他设备通信。无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(GSM，Global System of Mobile communication)、通用分组无线服务(GPRS，GeneralPacket Radio Service)、码分多址(CDMA，Code Division Multiple Access)、宽带码分多址(WCDMA，Wideband Code Division Multiple Access)、长期演进(LTE，Long TermEvolution)、电子邮件、短消息服务(SMS，Short Messaging Service)等。

存储器602可用于存储软件程序以及模块，处理器608通过运行存储在存储器602的软件程序以及模块，从而执行各种功能应用以及信息处理。存储器602可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据电子设备的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器602可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器602还可以包括存储器控制器，以提供处理器608和输入单元603对存储器602的访问。

输入单元603可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，在一个具体的实施例中，输入单元603可包括触敏表面以及其他输入设备。触敏表面，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面上或在触敏表面附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器608，并能接收处理器608发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面。除了触敏表面，输入单元603还可以包括其他输入设备。具体地，其他输入设备可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元604可用于显示由用户输入的信息或提供给用户的信息以及电子设备的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元604可包括显示面板，可选的，可以采用液晶显示器(LCD，Liquid CrystalDisplay)、有机发光二极管(OLED，Organic Light-Emitting Diode)等形式来配置显示面板。进一步的，触敏表面可覆盖显示面板，当触敏表面检测到在其上或附近的触摸操作后，传送给处理器608以确定触摸事件的类型，随后处理器608根据触摸事件的类型在显示面板上提供相应的视觉输出。虽然在图6中，触敏表面与显示面板是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面与显示面板集成而实现输入和输出功能。

电子设备还可包括至少一种传感器605，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板的亮度，接近传感器可在电子设备移动到耳边时，关闭显示面板和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于电子设备还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路606、扬声器，传声器可提供用户与电子设备之间的音频接口。音频电路606可将接收到的音频数据转换后的电信号，传输到扬声器，由扬声器转换为声音信号输出；另一方面，传声器将收集的声音信号转换为电信号，由音频电路606接收后转换为音频数据，再将音频数据输出处理器608处理后，经RF电路601以发送给比如另一电子设备，或者将音频数据输出至存储器602以便进一步处理。音频电路606还可能包括耳塞插孔，以提供外设耳机与电子设备的通信。

WiFi属于短距离无线传输技术，电子设备通过WiFi模块607可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图6示出了WiFi模块607，但是可以理解的是，其并不属于电子设备的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器608是电子设备的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器602内的软件程序和/或模块，以及调用存储在存储器602内的数据，执行电子设备的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器608可包括一个或多个处理核心；优选的，处理器608可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器608中。

电子设备还包括给各个部件供电的电源609(比如电池)，优选的，电源可以通过电源管理系统与处理器608逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源609还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，电子设备还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，电子设备中的处理器608会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器602中，并由处理器608来运行存储在存储器602中的应用程序，从而实现各种功能：

根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息；

将所述权限信息存储至状态管理库，并基于所述状态管理库配置页面权限；

创建包含多个角色信息与路由之间的对应关系的路由表，根据所述权限信息遍历所述路由表，以获取与所述权限信息对应的组件和控件配置权限；

通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件；

基于所述页面权限和目标组件对网页进行渲染。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见上文针对基于React的权限控制方法的详细描述，此处不再赘述。

由上可知，本申请实施例的电子设备可以根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息，将权限信息存储至状态管理库，并基于状态管理库配置页面权限，创建包含多个角色信息与路由之间的对应关系的路由表，根据权限信息遍历路由表，以获取与权限信息对应的组件和控件配置权限，通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件，基于页面权限和目标组件对网页进行渲染。本申请实施例可以通过使用React高阶组件HOC将项目里的所有模块的权限进行统一配置，有效提升了权限配置的效率。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本申请实施例提供一种计算机可读的存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本申请实施例所提供的任一种基于React的权限控制方法中的步骤。例如，该指令可以执行如下步骤：

根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息；

将所述权限信息存储至状态管理库，并基于所述状态管理库配置页面权限；

创建包含多个角色信息与路由之间的对应关系的路由表，根据所述权限信息遍历所述路由表，以获取与所述权限信息对应的组件和控件配置权限；

通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件；

基于所述页面权限和目标组件对网页进行渲染。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该存储介质中所存储的指令，可以执行本申请实施例所提供的任一种基于React的权限控制方法中的步骤，因此，可以实现本申请实施例所提供的任一种基于React的权限控制方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

以上对本申请实施例所提供的一种基于React的权限控制方法、装置、电子设备及存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

1.一种基于React的权限控制方法，其特征在于，包括：

根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息；

将所述权限信息存储至状态管理库，并基于所述状态管理库配置页面权限；

创建包含多个角色信息与路由之间的对应关系的路由表，根据所述权限信息遍历所述路由表，以获取与所述权限信息对应的组件和控件配置权限；

通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件；

基于所述页面权限和目标组件对网页进行渲染。

2.如权利要求1所述的基于React的权限控制方法，其特征在于，在将所述权限信息存储至状态管理库之后，所述方法还包括：

判断当前页面是否刷新；

若刷新，则在所述状态管理库中的数据清空之后再次将所述权限信息存储至所述状态管理库。

3.如权利要求1所述的基于React的权限控制方法，其特征在于，所述创建包含多个角色信息与路由之间的对应关系的路由表，包括：

获取当前网页中所有菜单的路由；

根据多个角色信息建立与所述所有菜单的路由之间的映射关系，以得到所述路由表。

4.如权利要求3所述的基于React的权限控制方法，其特征在于，根据所述权限信息遍历所述路由表，以获取与所述权限信息对应的组件和控件配置权限，包括：

根据所述权限信息在所述路由表中查找目标菜单的路由；

根据所述目标菜单的路由确定对应的组件和控件配置权限。

5.如权利要求1所述的基于React的权限控制方法，其特征在于，所述通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件，包括：

获取当前网页中待配置的组件和控件；

将所述待配置的组件和控件作为原始组件，基于所述组件和控件配置权限将所述原始组件包裹在容器组件内，以得到所述目标组件。

6.如权利要求5所述的基于React的权限控制方法，其特征在于，所述方法还包括：

将所述原始组件的静态方法拷贝至所述目标组件。

7.如权利要求1所述的基于React的权限控制方法，其特征在于，所述基于所述页面权限和目标组件对网页进行渲染，包括：

从预设资源池中获取与所述页面权限和目标组件匹配的布局数据；

根据所述布局数据和数据源，对所述网页进行渲染和显示。

8.一种基于React的权限控制装置，其特征在于，包括：

获取单元，用于根据用户鉴权信息进行登录，并获取当前用户身份对应的权限信息；

存储单元，用于将所述权限信息存储至状态管理库，并基于所述状态管理库配置页面权限；

创建单元，用于创建包含多个角色信息与路由之间的对应关系的路由表，根据所述权限信息遍历所述路由表，以获取与所述权限信息对应的组件和控件配置权限；

添加单元，用于通过React高阶组件将待配置的组件和控件添加对应的组件和控件配置权限，以得到目标组件；

渲染单元，用于基于所述页面权限和目标组件对网页进行渲染。

9.一种电子设备，其特征在于，所述电子设备包括：存储器、处理器，其中，所述存储器上存储有应用程序处理程序，所述应用程序处理程序被所述处理器执行时实现如权利要求1至7中任一项所述的基于React的权限控制方法的步骤。

10.一种计算机可读的存储介质，其特征在于，所述存储介质存储有多条指令，所述指令适于处理器进行加载，以执行权利要求1至7任一项所述的基于React的权限控制方法。

Images