CN110334490A - 一种基于React的前端权限控制方法 - Google Patents

一种基于React的前端权限控制方法 Download PDF

Info

Publication number
CN110334490A
CN110334490A CN201910640265.0A CN201910640265A CN110334490A CN 110334490 A CN110334490 A CN 110334490A CN 201910640265 A CN201910640265 A CN 201910640265A CN 110334490 A CN110334490 A CN 110334490A
Authority
CN
China
Prior art keywords
permission
role
permissions list
user
page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910640265.0A
Other languages
English (en)
Inventor
吕东卫
田尚杰
成晨
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shandong Inspur Genersoft Information Technology Co Ltd
Original Assignee
Shandong Inspur Genersoft Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shandong Inspur Genersoft Information Technology Co Ltd filed Critical Shandong Inspur Genersoft Information Technology Co Ltd
Priority to CN201910640265.0A priority Critical patent/CN110334490A/zh
Publication of CN110334490A publication Critical patent/CN110334490A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
    • G06F21/30—Authentication, i.e. establishing the identity or authorisation of security principals
    • G06F21/31—User authentication
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2221/00—Indexing scheme relating to security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
    • G06F2221/21—Indexing scheme relating to G06F21/00 and subgroups addressing additional information or applications relating to security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
    • G06F2221/2141—Access rights, e.g. capability lists, access control lists, access tables, access matrices

Landscapes

  • Engineering & Computer Science (AREA)
  • Computer Security & Cryptography (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Hardware Design (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Document Processing Apparatus (AREA)
  • Storage Device Security (AREA)

Abstract

本发明公开一种基于React的前端权限控制方法，涉及计算机授权安全控制技术领域；分析页面上需要权限控制的元素,分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,并建立权限列表记录不同角色在不同流程下元素权限，根据当前用户的角色和当前页面的的流程状态，获取对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，对元素进行包裹，根据用户所拥有的权限渲染元素，利用本发明方法解决前端权限的控制问题，通过权限组件将权限判断与页面元素结合，达到权限判断与页面元素松耦合的目的。

Description

一种基于React的前端权限控制方法
技术领域
本发明公开一种基于React的前端权限控制方法，涉及计算机授权安全控制技术领域。
背景技术
React是前端框架，从最早的UI引擎到一整套前后端通用的Web App解决方案。但不同类型的APP或多或少的会遇到前端权限问题，需要前后端共同处理。当页面带有流程时，权限控制会更加复杂。本发明提供一种基于React的前端权限控制方法，解决前端权限的控制问题，通过权限组件将权限判断与页面元素结合，达到权限判断与页面元素松耦合的目的。
发明内容
本发明针对现有技术的问题，提供一种基于React的前端权限控制方法，具有通用性强、实施简便等特点，具有广阔的应用前景。
本发明提出的具体方案是：
一种基于React的前端权限控制方法：
分析页面上需要权限控制的元素,
分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,并建立权限列表记录不同角色在不同流程下元素权限，
根据当前用户的角色和当前页面的的流程状态，获取对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，
对元素进行包裹，根据用户所拥有的权限渲染元素。
所述的方法中将权限字符串对应元素的元素权限，权限列表记录不同角色在不同流程下元素的权限字符串。
所述的方法中利用权限对象定义不同角色在不同流程下记录元素权限的权限列表，并且根据当前用户的角色和当前页面的的流程状态，获取权限对象中对应的权限列表。
所述的方法中利用权限组件对元素进行包裹，根据用户所拥有的权限渲染元素。
所述的方法中权限组件根据用户所拥有的权限，选择可见可编辑状态或可见不可编辑状态或不可见状态渲染元素。
一种基于React的前端权限控制工具，包括分析单元、对象单元、处理单元及组件单元，各单元依据需求进行通信，
分析单元分析页面上需要权限控制的元素,
分析单元分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,同时对象单元建立权限列表记录不同角色在不同流程下元素权限，
处理单元根据当前用户的角色和当前页面的的流程状态，获取对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，
组件单元对元素进行包裹，根据用户所拥有的权限渲染元素。
所述的工具中对象单元将权限字符串对应元素的元素权限，权限列表记录不同角色在不同流程下元素的权限字符串。
所述的工具中对象单元利用权限对象定义不同角色在不同流程下记录元素权限的权限列表，并且根据当前用户的角色和当前页面的的流程状态，获取权限对象中对应的权限列表。
所述的工具中组件单元利用权限组件对元素进行包裹，根据用户所拥有的权限渲染元素。
本发明的有益之处是：
本发明提供一种基于React的前端权限控制方法，分析页面上需要权限控制的元素,分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,并建立权限列表记录不同角色在不同流程下元素权限，根据当前用户的角色和当前页面的的流程状态，获取对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，对元素进行包裹，根据用户所拥有的权限渲染元素，利用本发明方法解决前端权限的控制问题，通过权限组件将权限判断与页面元素结合，达到权限判断与页面元素松耦合的目的。
附图说明
图1是本发明方法流程示意图。
具体实施方式
本发明提供一种基于React的前端权限控制方法：
分析页面上需要权限控制的元素,
分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,并建立权限列表记录不同角色在不同流程下元素权限，
根据当前用户的角色和当前页面的的流程状态，获取对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，
对元素进行包裹，根据用户所拥有的权限渲染元素。
同时提供与上述方法相对应的一种基于React的前端权限控制工具，包括分析单元、对象单元、处理单元及组件单元，各单元依据需求进行通信，
分析单元分析页面上需要权限控制的元素,
分析单元分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,同时对象单元建立权限列表记录不同角色在不同流程下元素权限，
处理单元根据当前用户的角色和当前页面的的流程状态，获取对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，
组件单元对元素进行包裹，根据用户所拥有的权限渲染元素。
下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。
利用本发明方法对某一React的前端框架，进行权限控制，当页面带有流程时，权限控制会更加复杂，如：现有一个简单的流程，单据审批前->单据审批中->单据审批结束，某条单据审批前创建人可以编辑可以删除该单据，管理员不可以编辑不可以删除该单据，单据审批中创建人不可以编辑不可以删除该单据，管理员可以编辑可以删除该单据，单据审批结束创建人不可以编辑可以删除单据，管理员不可以编辑单据可以删除单据，这个场景可以抽象为不同的元素(单据内容，删除按钮)针对不同的角色(普通用户，管理员)在不用的流程下(审批前、中、后)以不同的形式渲染，具体过程为：
分析页面上需要权限控制的元素,为元素定义权限字符串对应元素的元素权限，供权限判断使用；
分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,利用权限对象定义不同角色在不同流程下记录元素权限的权限列表，，即记录了元素的权限字符串的权限列表；
根据当前用户的角色和当前页面的的流程状态，获取权限对象中对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，如果权限列表中包含用户的角色和当前页面的的流程状态中某个元素的权限字符串，代表用户拥有权限，否则用户不拥有权限；用户所拥有的权限，可以是单方面的，也可以是兼具的，比如如果用户是单据的创建者，则拥有创建者的权限，如果用户是管理员，则拥有管理员权限，如果两者都是，则拥有两者的权限；
创建权限组件，包括所需参数：
children：需要权限控制的元素，
permission：所需权限，
permissionList：用户拥有的权限，
control：没有权限时如何渲染，control等于”disabled”时正常渲染组件，向子元素传入disabled；control不等于”disabled”时，不渲染子元素，
bled＝true属性，此时子元素需要自己去处理disabled＝true的逻辑，也就是disabled＝true时不可编辑，
利用权限组件根据用户所拥有的权限，选择可见可编辑状态或可见不可编辑状态或不可见状态渲染元素。从而达到权限控制的目的，权限组件将权限判断和页面元素巧妙的结合起来，从而达到权限判断与页面元素松耦合的目的。
本发明工具，包括分析单元、对象单元、处理单元及组件单元，各单元依据需求进行通信，利用本发明工具对某一React的前端框架，进行权限控制，当页面带有流程时，权限控制会更加复杂，如：现有一个简单的流程，单据审批前->单据审批中->单据审批结束，某条单据审批前创建人可以编辑可以删除该单据，管理员不可以编辑不可以删除该单据，单据审批中创建人不可以编辑不可以删除该单据，管理员可以编辑可以删除该单据，单据审批结束创建人不可以编辑可以删除单据，管理员不可以编辑单据可以删除单据，这个场景可以抽象为不同的元素(单据内容，删除按钮)针对不同的角色(普通用户，管理员)在不用的流程下(审批前、中、后)以不同的形式渲染，具体过程为：
分析单元分析页面上需要权限控制的元素,为元素定义权限字符串对应元素的元素权限，供权限判断使用；
分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,对象单元利用权限对象定义不同角色在不同流程下记录元素权限的权限列表，，即记录了元素的权限字符串的权限列表；
处理单元根据当前用户的角色和当前页面的的流程状态，获取权限对象中对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，如果权限列表中包含用户的角色和当前页面的的流程状态中某个元素的权限字符串，代表用户拥有权限，否则用户不拥有权限；用户所拥有的权限，可以是单方面的，也可以是兼具的，比如如果用户是单据的创建者，则拥有创建者的权限，如果用户是管理员，则拥有管理员权限，如果两者都是，则拥有两者的权限；
组件单元创建权限组件，包括所需参数：
children：需要权限控制的元素，
permission：所需权限，
permissionList：用户拥有的权限，
control：没有权限时如何渲染，control等于”disabled”时正常渲染组件，向子元素传入disabled；control不等于”disabled”时，不渲染子元素，
bled＝true属性，此时子元素需要自己去处理disabled＝true的逻辑，也就是disabled＝true时不可编辑，
组件单元利用权限组件根据用户所拥有的权限，选择可见可编辑状态或可见不可编辑状态或不可见状态渲染元素。从而达到权限控制的目的，权限组件将权限判断和页面元素巧妙的结合起来，从而达到权限判断与页面元素松耦合的目的。
上述实施例中，应用可能会添加新的用户角色或者添加新的流程状态，如果重新编写权限判断逻辑或者添加权限判断逻辑，应用会变得难以维护，可将权限对象存储在数据库中，只需要通过配置页面动态维护权限对象即可。
以上所述实施例仅是为充分说明本发明而所举的较佳的实施例，本发明的保护范围不限于此。本技术领域的技术人员在本发明基础上所作的等同替代或变换，均在本发明的保护范围之内。本发明的保护范围以权利要求书为准。

Claims (9)

1.一种基于React的前端权限控制方法，其特征是
分析页面上需要权限控制的元素,
分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,并建立权限列表记录不同角色在不同流程下元素权限，
根据当前用户的角色和当前页面的的流程状态，获取对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，
对元素进行包裹，根据用户所拥有的权限渲染元素。
2.根据权利要求1所述的方法，其特征是将权限字符串对应元素的元素权限，权限列表记录不同角色在不同流程下元素的权限字符串。
3.根据权利要求1或2所述的方法，其特征是利用权限对象定义不同角色在不同流程下记录元素权限的权限列表，并且根据当前用户的角色和当前页面的的流程状态，获取权限对象中对应的权限列表。
4.根据权利要求3所述的方法，其特征是利用权限组件对元素进行包裹，根据用户所拥有的权限渲染元素。
5.根据权利要求4所述的方法，其特征是权限组件根据用户所拥有的权限，选择可见可编辑状态或可见不可编辑状态或不可见状态渲染元素。
6.一种基于React的前端权限控制工具，其特征是包括分析单元、对象单元、处理单元及组件单元，各单元依据需求进行通信，
分析单元分析页面上需要权限控制的元素,
分析单元分析页面中带有权限的角色，为不同角色分配不同流程下的元素权限,同时对象单元建立权限列表记录不同角色在不同流程下元素权限，
处理单元根据当前用户的角色和当前页面的的流程状态，获取对应的权限列表，根据权限列表中元素的元素权限，判断用户是否拥有权限，
组件单元对元素进行包裹，根据用户所拥有的权限渲染元素。
7.根据权利要求6所述的工具，其特征是对象单元将权限字符串对应元素的元素权限，权限列表记录不同角色在不同流程下元素的权限字符串。
8.根据权利要求6或7所述的工具，其特征是对象单元利用权限对象定义不同角色在不同流程下记录元素权限的权限列表，并且根据当前用户的角色和当前页面的的流程状态，获取权限对象中对应的权限列表。
9.根据权利要求8所述的工具，其特征是组件单元利用权限组件对元素进行包裹，根据用户所拥有的权限渲染元素。
CN201910640265.0A 2019-07-16 2019-07-16 一种基于React的前端权限控制方法 Pending CN110334490A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910640265.0A CN110334490A (zh) 2019-07-16 2019-07-16 一种基于React的前端权限控制方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910640265.0A CN110334490A (zh) 2019-07-16 2019-07-16 一种基于React的前端权限控制方法

Publications (1)

Publication Number Publication Date
CN110334490A true CN110334490A (zh) 2019-10-15

Family

ID=68145317

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910640265.0A Pending CN110334490A (zh) 2019-07-16 2019-07-16 一种基于React的前端权限控制方法

Country Status (1)

Country Link
CN (1) CN110334490A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113536253A (zh) * 2021-07-23 2021-10-22 工银科技有限公司 用于控制页面元素的显示权限的方法、装置、设备及介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130218919A1 (en) * 2012-02-20 2013-08-22 Aleksey Solonchev Method and apparatus for managing content
CN103455888A (zh) * 2013-09-10 2013-12-18 山东中创软件工程股份有限公司 一种配置流程权限的方法及装置
CN103500297A (zh) * 2013-10-11 2014-01-08 济钢集团有限公司 信息系统中细粒度权限管理方法
CN107180334A (zh) * 2017-04-29 2017-09-19 成都牵牛草信息技术有限公司 基于角色对用户一对一的工作流控制方法和系统
US20180137160A1 (en) * 2016-11-16 2018-05-17 Institute For Information Industry Integration device and integration method thereof
CN109409048A (zh) * 2018-10-09 2019-03-01 郑州云海信息技术有限公司 一种实现页面精细化权限控制的系统及方法
CN109753283A (zh) * 2018-12-29 2019-05-14 北京辰安科技股份有限公司 处理前端页面的权限控制方法及装置
CN109992997A (zh) * 2019-03-28 2019-07-09 中国联合网络通信集团有限公司 一种确定权限系统设置合理性的方法、装置

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130218919A1 (en) * 2012-02-20 2013-08-22 Aleksey Solonchev Method and apparatus for managing content
CN103455888A (zh) * 2013-09-10 2013-12-18 山东中创软件工程股份有限公司 一种配置流程权限的方法及装置
CN103500297A (zh) * 2013-10-11 2014-01-08 济钢集团有限公司 信息系统中细粒度权限管理方法
US20180137160A1 (en) * 2016-11-16 2018-05-17 Institute For Information Industry Integration device and integration method thereof
CN107180334A (zh) * 2017-04-29 2017-09-19 成都牵牛草信息技术有限公司 基于角色对用户一对一的工作流控制方法和系统
CN109409048A (zh) * 2018-10-09 2019-03-01 郑州云海信息技术有限公司 一种实现页面精细化权限控制的系统及方法
CN109753283A (zh) * 2018-12-29 2019-05-14 北京辰安科技股份有限公司 处理前端页面的权限控制方法及装置
CN109992997A (zh) * 2019-03-28 2019-07-09 中国联合网络通信集团有限公司 一种确定权限系统设置合理性的方法、装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
郝赫等: "基于业务表单松耦合的工作流架构设计与实现", 《电子设计工程》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113536253A (zh) * 2021-07-23 2021-10-22 工银科技有限公司 用于控制页面元素的显示权限的方法、装置、设备及介质

Similar Documents

Publication Publication Date Title
US7818789B2 (en) User controls for a computer
CN109586963B (zh) 一种云仿真平台安全保障系统、服务器、终端以及方法
US20030105816A1 (en) System and method for real-time multi-directional file-based data streaming editor
CN103577735B (zh) 一种多用户系统快速登录与切换的方法及系统
CN109933310A (zh) 一种基于数据模板的可配置型java开发平台
CN114424190A (zh) 基于制造约束的定制产品的基于角色和属性跟踪协作设计的系统和方法
CN110334490A (zh) 一种基于React的前端权限控制方法
CN105511736A (zh) 调整菜单的方法及系统
CN105227358A (zh) 网络类型的设置方法和系统
CN106156645A (zh) 终端数据保护方法、终端及设备
CN110427750A (zh) 一种通过权限组合方式进行表单权限控制的方法及系统
CN107707580A (zh) 一种用于多应用平台的账户管理平台
CN110324220A (zh) 支持装置、计算机可读存储介质、设定方法
CN106506460B (zh) 基于网盘的数控机床程序管理系统
CN102567935B (zh) 一种实现特效版本兼容的方法和系统
KR20040026485A (ko) 제안서 작성 시스템 및 방법
CN106775757A (zh) 一种bms的matlab建模集成方法
CN107465641A (zh) 基于三层架构软件系统及其数据请求方法
CN103854113A (zh) 机务管理系统通用方法
Kühnhauser et al. Towards access control model engineering
CN103106359A (zh) 一种多级菜单权限的创建方法
Gmitro et al. Current divergences, pion photoproduction and radiative muon capture
CN103023817B (zh) 一种基于acl的数据包处理方法
CN108280354A (zh) 一种权限模板的使用方法及装置
CN101576917A (zh) 航空不安全事件人为因素分析系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20191015

RJ01 Rejection of invention patent application after publication