admin 管理员组

文章数量: 1086019


2024年4月29日发(作者：clrscr标识符)

第１３卷第１期

２０２０年３月

西安职业技术学院职教研究

ＲｅｓｅａｒｃｈｏｎＶｏｃａｔｉｏｎａｌＥｄｕｃａｔｉｏｎｉｎＸｉ′ａｎＶｏｃａｔｉｏｎａｌａｎｄＴｅｃｈｎｉｃａｌＣｏｌｌｅｇｅ

Ｖｏｌ．１３Ｎｏ．１

Ｍａｒ２０２０

基于静态Ｗｅｂ页面的权限控制设计和实现

杨　阳，申珈宇，李维勇

（南京信息职业技术学院计算机与软件学院，江苏南京２１００２３）

摘　要：基于Ｗｅｂ的各种管理系统要求不同权限的登陆用户能够使用不同的系统功能．为了实现这个目的，不仅需

要系统从后端代码判断用户是否具有操作权限，更要求前端网页能够根据登录用户的权限展示相应的功能菜单．

以ＰＨＰ、ＡＳＰ、ＪＳＰ书写的传统动态Ｗｅｂ页面可以直接通过网站后端代码实现隐藏或显示网页菜单．然而，近年来，

前后端分离开发技术已经成为业界趋势．因而，基于静态Ｗｅｂ页面，提出权限控制的具体实现方法和步骤．

关键词：静态页面；权限控制；前后端分离

中图分类号：Ｇ６３　　　　　文献标识码：Ａ　　　　文章编号：（２０２０）０１４７０３

　　近年来，基于ＢＳ（Ｂｒｏｗｅｒ／Ｓｅｒｖｅｒ）架构的Ｗｅｂ

应用程序得到了广泛使用，比如企业员工的请假审

１］

Ｓ架构开发完成

［

．ＢＳ架构系统批系统大都基于Ｂ

１　经典ＪａｖａＷｅｂ系统权限架构

ＢＳ架构Ｗｅｂ应用程序常见开发语言有Ｊａｖａ、

ＰＨＰ、Ｃ＃、Ｎｏｄｅ．ｊｓ等．其中，ＪａｖａＷｅｂ以跨平台、第

三方框架成熟等优点被越来越多的互联网企业开

２］

发使用

［

．ＪａｖａＷｅｂ经典系统架构可以简化如图１

具有以下好处：（１）跨平台；（２）用户无需安装客户

端，通过浏览器就可以访问系统应用；（３）系统维

护升级方便，用户无感知．因此，很多大型企业也研

发了很多大型ＢＳ架构Ｗｅｂ服务系统，比如，腾讯

公司的微信公众号管理平台、阿里巴巴公司的阿里

云管理平台等．该种Ｗｅｂ应用的特点是：不同类型

的用户，比如企业用户、个人用户，通过统一的Ｗｅｂ

访问地址登录进系统后，可以使用不同的功能菜

单，这就是系统的权限控制能力．权限控制使得低

权限用户不能够使用企业提供的高级功能．这不仅

有利于企业的战略发展，而且，不相关菜单的隐藏，

使得系统界面简单明了，更有利于用户的使用．

所示，执行过程可以描述为：用户通过浏览器访问

服务器ｉｎｄｅｘ．ｊｓｐ页面或其它ＡＰＩ接口数据；服务

器端首先执行登录过滤器代码，判断用户是否登

录，如未登录则返回登录页面ｌｏｇｉｎ．ｊｓｐ；用户通过

ｌｏｇｉｎ．ｊｓｐ登录系统后，则服务器代码可以顺利通过

登录过滤器，之后继续执行安全过滤器代码，判断

用户是否存在攻击服务器行为．如判断用户有攻击

行为，则终止执行代码．如此类推，执行其它过滤器

和权限过滤器代码．服务器执行完所有过滤器后，

如果所用过滤器都没有拦截该访问，则返回用户请

求的页面或者数据．

收稿日期：２０１９－１２－２１

作者简介：杨　阳（１９８５－），男，安徽阜阳人，南京信息职业技术学院计算机与软件学院助教，硕士；

申珈宇（１９９８－），男，江苏徐州人，南京信息职业技术学院计算机与软件学院学生；

李维勇（１９７６－），男，安徽滁州人，南京信息职业技术学院计算机与软件学院副教授，高级工程师，硕士．

·４７·

西安职业技术学院职教研究

权限过滤器是Ｗｅｂ系统架构中非常重要的一

它根据登录用户的不同，判断用户此次访个模块．

３］

．要注意的是图中权限过滤器是问是否具有权限

［

ａｖａ代码逻辑来判断是否显示“菜单Ａ”；过Ｊ

（２）ＪＳＰ页面可以利用传递的模型参数ｒｏｌｅ２

来判断是否显示“菜单Ｂ”．

最终处理后的ｉｎｄｅｘ．ｊｓｐ页面实现了不同角色

用户登录相同网页显示不同菜单的目的．

等价产物．具体项目中，权限过滤器有多种实现方

ｈｉｒｏ框架的权限控制、基于ＡＯＰ切式，比如基于Ｓ

面的权限控制等．

图１　经典ＪａｖａＷｅｂ系统架构

２　动态前端网页权限控制

图１中的权限过滤器保证了低权限用户不能

访问高权限网页和数据．然而，系统的高易用性应

提前从用户可见的网页中就隐藏用户不具备权限

的菜单或按钮，这就是网页权限控制．以ＰＨＰ、

ＡＳＰ、ＪＳＰ书写的网页，页面中加入了后端代码，天

生具有动态生成页面的能力．因此，很容易控制显

示或隐藏某些菜单．图２为基于Ｓｐｒｉｎｇ架构的ＪＳＰ

动态网页权限控制示例代码．

图２　ＪＳＰ动态网页权限控制

图２执行过程可以描述为：用户通过浏览器访

问网站地址ｈｔｔｐ：／／ＩＰ：ＰＯＲＴ／；Ｓｐｒｉｎｇ架构拦截用

户访问，执行ＨｏｍｅＣｏｎｔｒｏｌｌｅｒ．ｊａｖａ中的ｉｎｄｅｘ方法，

返回ＭｏｄｅｌＡｎｄＶｉｅｗ对象．返回对象包括将要返回

的前端网页地址ｉｎｄｅｘ．ｊｓｐ以及传递给ＪＳＰ页面的

额外模型参数ｒｏｌｅ２；跳转到ｉｎｄｅｘ．ｊｓｐ页面．

ＪＳＰ页面有两种方法可以控制隐藏或显示网

页菜单，分别是：

（１）ＪＳＰ页面可以执行Ｊａｖａ代码，因此可以通

·４８·

３　静态前端网页权限控制和设计

上述以ＰＨＰ、ＡＳＰ、ＪＳＰ书写的动态网页虽然实

现权限控制简单，但是需要前后端开发工程师合作

开发完成，前后端代码耦合度高．它要求前后端开

发工程师都要了解对方的知识体系，维护和开发效

率都比较低

［４］

．因此，前后端分离开发成为一种行

业趋势．前后端分离是指前端开发工程师负责开发

ＨＴＭＬ静态网页，后端开发工程师负责开发后端

ＡＰＩ数据接口代码，前端ＨＴＭＬ静态页面通过ａｊａｘ

请求向后端请求数据，进而修改前端页面，达到动

态改变页面内容效果．

前后端开发分离技术一方面使得系统代码分

为前端代码和后端代码两个模块，前后端开发工程

师按约定ＡＰＩ接口并行开发和调用，使得系统开

发、维护速度得到大大提升

［５］

．然而，另一方面，前

端ＨＴＭＬ页面不能像ＪＳＰ页面一样利用后端代码

根据登录用户的角色权限控制显示、隐藏菜单或元

素．因此，需要我们设计新的技术方案实现前端网

页权限管理．

下面我们将基于ＷＥＢ前端最常用两大框架：

Ｊｑｕｅｒｙ和ＶＵＥ２，分别设计一种静态网页权限控制

方案．经过测试，两种方案都达到了网页菜单的权

限控制目标．

３．１　基于Ｊｑｕｅｒｙ方案：

标记需要权限控制的页面菜单或元素添加

ｎｅｅｄ－ｒｏｌｅｓ类．该类存在样式ｄｉｓｐｌａｙ：ｎｏｎｅ；

在需要权限控制的页面菜单或元素上添加自

定义属性，为了兼容ＨＴＭＬ５规范，取名为ｄａｔａ－

ｎｅｅｄ－ｒｏｌｅｓ．

设置ｄａｔａ－ｎｅｅｄ－ｒｏｌｅｓ的值为需要的角色或

权限，以逗号和竖线辅助．其中，竖线表示“或”关

系，逗号表示“与”关系．例如，ｄａｔａ－ｎｅｅｄ－ｒｏｌｅｓ

杨阳，等：基于静态Ｗｅｂ页面的权限控制设计和实现

＝’ａ，ｂ｜ｃ，ｄ｜ｅ’，表示登录用户存在三种情况下可

以展示此菜单或元素：（１）同时拥有ａ，ｂ权限；（２）

，ｄ权限；（３）拥有ｅ权限．同时拥有ｃ

在页面加载完成时，调用ａｊａｘ请求获取当前登

在ａｊａｘ成功回调方法中，查找当前页录用户权限．

面所有具有ｃｌａｓｓ为ｎｅｅｄ－ｒｏｌｅｓ的节点，判断用户

权限是否符合该要求．如符合权限要求，移除元素

的ｎｅｅｄ－ｒｏｌｅｓ类，否则删除该节点．

３．２　基于ＶＵＥ２框架方案：

添加ｖｕｅ２数据ｕｓｅｒＲｏｌｅＬｉｓｔ，表示登录用户

权限；

ｕｅ２方法ｃｈｅｃｋＲｏｌｅ，方法具有一个输入添加ｖ

参数ｎｅｅｄＲｏｌｅｓ，表示需要的权限．该方法按照

ｊｑｕｅｒｙ方案步骤（３）中的逻辑判断用户权限是否满

足ｎｅｅｄＲｏｌｅｓ；

在需要权限控制的页面菜单或元素上添加条

ｖ－ｉｆ＝＂ｃｈｅｃｋＲｏｌｅ（＇ａ，ｂ｜ｃ，ｄ｜ｅ＇）＂；件语句，例如：

ｖｕｅ２钩子方法ｂｅｆｏｒｅＭｏｕｎｔ中，通过ａｊａｘ请求

ｓｅｒＲｏｌｅＬｉｓｔ．获取当前登录用户权限赋值给数据ｕ

［１］李安志，崔蔚，徐永红．基于角色的网页访问权限控制

方案［Ｊ］．电脑与信息技术，２００４（６）：４－６＋４６．

［２］姚磊．基于安全统一网关的云平台特权操作审计管控

技术研究与实现［Ｄ］．北京邮电大学，２０１８．

［３］李博博．基于ＮＥＴ的网站安全研究［Ｄ］．西安工业大

学，２０１５．

［４］李浩．中国移动员工统一门户的设计与实现［Ｄ］．湖南

大学，２０１７．

［５］陈泓瑜．基于组件的Ｗｅｂ环境下访问控制系统的设计

与实现［Ｄ］．大连理工大学，２０１５．

［审　稿：代美泉，责任编辑：王磊强］

端权限控制方案，经过测试，功能正确，性能良好．

要注意到的是，前端权限控制仅是Ｗｅｂ系统权限

它保证用户不会看到和操作到与自控制中的一环．

己不相关的菜单或元素，提高了系统的可易用性．

然而，要想严格保护Ｗｅｂ系统数据安全，让低权限

用户不能访问高权限数据，后端服务器代码必须要

实现和前端权限控制相应的控制逻辑，因不是讨论

重点，不再详细描述此问题．

［参考文献］

４　结语

基于Ｊｑｕｅｒｙ和ＶＵＥ２前端框架，分别设计了前

ＤｅｓｉｇｎａｎｄＩｍｐｌｅｍｅｎｔａｔｉｏｎｏｆＡｕｔｈｏｒｉｔｙＣｏｎｔｒｏｌＢａｓｅｄｏｎＳｔａｔｉｃＷｅｂＰａｇｅ

Ｙａｎｇｙａｎｇ，ＳＨＥＮＪｉａ－ｙｕ，ＬＩＷｅｉ－ｙｏｎｇ

（ＳｃｈｏｏｌｏｆＣｏｍｐｕｔｅｒａｎｄＳｏｆｔｗａｒｅ，ＮａｎｊｉｎｇＶｏｃａｔｉｏｎａｌＣｏｌｌｅｇｅｏｆＩｎｆｏｒｍａｔｉｏｎＴｅｃｈｎｏｌｏｇｙ，Ｎａｎｊｉｎｇ２１００２３，Ｃｈｉｎａ）

Ａｂｓｔｒａｃｔ：Ｖａｒｉｏｕｓｗｅｂ－ｂａｓｅｄｍａｎａｇｅｍｅｎｔｓｙｓｔｅｍｓｒｅｑｕｉｒｅｌｏｇｉｎｕｓｅｒｓｗｉｔｈｄｉｆｆｅｒｅｎｔｐｅｒｍｉｓｓｉｏｎｓｔｏｕｓｅｄｉｆｆｅｒｅｎｔ

，ｔｈｅｓｙｓｔｅｍｎｏｔｏｎｌｙｎｅｅｄｓｔｏｊｕｄｇｅｗｈｅｔｈｅｒｔｈｅｕｓｅｒｈａｓｔｈｅｏｐｅｒａｓｙｓｔｅｍｆｕｎｃｔｉｏｎｓ．Ｉｎｏｒｄｅｒｔｏａｃｈｉｅｖｅｔｈｉｓｇｏａｌ

ｔｉｏｎａｕｔｈｏｒｉｔｙｆｒｏｍｔｈｅｂａｃｋ－ｅｎｄｃｏｄｅ，ｂｕｔａｌｓｏｒｅｑｕｉｒｅｓｔｈｅｆｒｏｎｔ－ｅｎｄｗｅｂｐａｇｅｔｏｄｉｓｐｌａｙｔｈｅｃｏｒｒｅｓｐｏｎｄｉｎｇ

ｆｕｎｃｔｉｏｎｍｅｎｕａｃｃｏｒｄｉｎｇｔｏｔｈｅｌｏｇｉｎｕｓｅｒ＇ｓａｕｔｈｏｒｉｔｙ．ＴｈｅｔｒａｄｉｔｉｏｎａｌｄｙｎａｍｉｃｗｅｂｐａｇｅｗｒｉｔｔｅｎｂｙＰＨＰ，ＡＳＰａｎｄ

ＪＳＰｃａｎｈｉｄｅｏｒｄｉｓｐｌａｙｔｈｅｗｅｂｍｅｎｕｄｉｒｅｃｔｌｙｔｈｒｏｕｇｈｔｈｅｂａｃｋ－ｅｎｄｃｏｄｅｏｆｔｈｅｗｅｂｓｉｔｅ．Ｈｏｗｅｖｅｒ，ｉｎｒｅｃｅｎｔ

ｙｅａｒｓ，ｔｈｅｓｅｐａｒａｔｉｏｎｏｆｆｒｏｎｔａｎｄｂａｃｋｄｅｖｅｌｏｐｍｅｎｔｔｅｃｈｎｏｌｏｇｙｈａｓｂｅｃｏｍｅｔｈｅｉｎｄｕｓｔｒｙｔｒｅｎｄ．Ｔｈｅｒｅｆｏｒｅ，ｂａｓｅｄ

，ｔｈｉｓｐａｐｅｒｐｒｏｐｏｓｅｓｔｈｅｓｐｅｃｉｆｉｃｉｍｐｌｅｍｅｎｔａｔｉｏｎｍｅｔｈｏｄｓａｎｄｓｔｅｐｓｏｆａｕｔｈｏｒｉｔｙｃｏｎｔｒｏｌ．ｏｎｔｈｅｓｔａｔｉｃｗｅｂｐａｇｅ

Ｋｅｙｗｏｒｄｓ：ｓｔａｔｉｃｐａｇｅ；ａｕｔｈｏｒｉｔｙｃｏｎｔｒｏｌ；ｆｒｏｎｔ－ｅｎｄａｎｄｂａｃｋ－ｅｎｄｓｅｐａｒａｔｉｏｎ

·４９·


本文标签： 权限 用户 控制 页面 系统

版权声明：本文标题：基于静态Web页面的权限控制设计和实现 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1714385369a677883.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。