前后端分离后的权限控制设计方案
云栖号资讯:【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!
近几年随着react、angular、vue等前端框架兴起,前后端分离的架构迅速流行。但同时权限控制也带来了问题。
网上很多前、后端分离权限仅仅都仅仅在描述前端权限控制、且是较简单、固定的角色场景,满足不了我们用户、角色都是动态的场景。
且仅仅前端进行权限控制并不是真正意义的权限控制,它只是减少页面结构暴露、增强用户体验的功效。
场景
系统为后台管理系统,包含了用户创建、用户登录、用户管理自己的资源。用户经常会新增、删除,也可以根据工作情况随时调整页面、功能权限,所以采用用户-角色-页面权限方案实现。
为什么不行:
1.根据前端路由表显示左侧菜单,但vue-router的路由表主要为了组织代码,经常我们所需要的菜单并非一致。比如某个前端路由a子路由有b、c,但菜单中我们想要直接一级菜单就显示b、c或者将b、c各放到其他菜单下。所以这种非常不灵活。
2.一个路由是菜单还是页面?是否需要显示到菜单中?是否验证权限?哪个角色或者用户拥有权限?这些都需要写到前端路由里面,一旦有任何权限变动就要大量调整代码。
3.如果权限写死在前端,那么角色或者用户必须已知且固定不变。比如页面1的meta增加属性标识可访问的角色为a和b
页面
一个页面即一个前端页面,比如首页、用户管理页、资源管理页等。
基本思路为:前端路由保持不变,数据库存储菜单结构、页面权限控制(可以直接做成一个页面来方便管理)等,前端根据数据库中的菜单结构和权限信息来渲染一个菜单出来并只显示其有权限的菜单,并在路由守卫中进行权限控制防止手动输入path越权打开页面。
1.前端路由(vue-router)中需要正常创建页面及路由。
2.数据库存储菜单结构和页面权限信息,
(1).菜单(目录、非内容页)可以自己创建,不必要求前端路由中有,因为这是指菜单的可视化的组织结构
(2).页面(内容页)必须是前端路由中已有页面,因为这是用户需要访问的内容。
(3).菜单和页面组成上下级关系,一级可以是菜单也可以是内容页,内容页也可以放在菜单下,这样理论(需要页面菜单样式支持)可以组成无限级菜单
(4).菜单和页面的基本属性包括title(对应路由title)、name(对应路由name)、path(对应路由path)、父级、类型(菜单/页面)、是否可见(左侧菜单栏是否显示:部分页面可能是页面内的链接进去)、是否需要验证权限(部分页面比如首页无需验证权限大家都可以进入)
(5).不需要控制权限且不需要显示到左侧菜单的路由这里可以不进行管理,比如404页面等
3.前台打开后获取获取数据库的所有菜单、页面及结构,根据是否登录、是否需要验证权限等进行控制,或无权限跳转至登录页
4.用户登录成功后,再获取用户对应的的页面权限列表,使用上一步获得的所有页面、结构和用户拥有权限的列表渲染出一个菜单,只包含此用户拥有权限的,提升用户体检,避免显示大量用户不能访问的菜单影响使用和不必要的功能暴露。
5.路由守卫中根据上一步获得的权限列表判断每个跳转,无权限可返回404或无权限页面,防止用户手动输入path越权访问
页面管理:
功能
部分功能有事需要单独控制权限,比如用户管理页面可能允许多个角色查看,但是其中的“创建用户”功能只允许某一个角色使用,那么仅仅使用页面权限是不够。所以需要细粒度的功能权限控制。
网上的方案都是说:根据资源控制增、删、改、查等等,比如针对用户就是用户的创建、修改、删除、查询等。但是在我的实际使用中发现并不切合实际,最起码对像我这种管理后台,资源并不单纯的增删改查,可能有其他地方的其他操作中也会对此用户资源造成影响,比如禁用、删除角色也要禁用、删除用户,那么这个权限到底属于角色的权限还是属于用户的权限,或者后台又改了,角色又影响了其他资源或者不再对用户进行操作,都会影响权限控制。
所以更合理的方法应该为将每个功能单独进行控制并和页面进行关联,且不限定必须是增、删、改、查四种,可以任意定制,只需要与前后端开发约定一个唯一的标识即可。
如上的例子中,用户管理页面下有用户各种功能,角色管理页面中也有个角色禁用、删除功能,可以分别定义标识为role_disable、role_delete,如果拥有role_delete权限即可,即使没有user_delete权限,也可以直接删除用户,否则就不要给其role_delete权限。
用户登录后,从数据库获取其所拥有的的权限列表并存入vuex,包含页面和功能对应关系,例如页面name为user:{user: ['user_delete', 'user_query']},页面中根据删除按钮可以v-if="hasPermission('user_delete')"判断即可。
页面功能管理:
获取用户拥有的权限:
角色
一个角色类似于一个身份或岗位,每个角色有自己的权限范围。
1.一个角色可以拥有多个页面权限。
2.一个角色可以拥有多个功能权限。
角色管理:
用户
用户可以创建、删除,一个用户随时可能变更工作内容,或者身兼数职,所以可以为其分配一个或者多个角色,他拥有的角色的权限就是他的权限。此时已经可以打通权限前端的权限分配,用户-角色-页面权限、功能权限。
前端效果
前端页面菜单效果:
后端权限
传统前后端不分离的情况下,路由都在后端统一管理,简单的方法比如用户管理页面/user/那么他里面使用的接口都使用/user/add、/user/delete等相同前缀,那么只要判断用户拥有/user/权限就可以访问/user/*所有接口。
前后端分离后面临的问题:
接口
方案:
1.需要控制权限的接口进行上传管理(可以做成管理页面)
2.每个页面和功能可以关联多个接口,比如用户页面关联了用户查询接口和用户编辑接口,用户删除功能关联用户删除接口
3.后端对请求的路径进行判断,用户->角色->页面/功能->接口,拥有接口权限即允许访问
4.前后端分团队开发,不容易一一对照,且前端有自己的路由(此路由受限于代码组织结构)等等,无法使用传统方式简单处理
5.相同的接口可能会被前端多个页面多次利用
【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/zhibo立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK
原文发布时间:2020-04-21
本文作者:互联网架构师
本文来自:“互联网架构师 微信公众号”,了解相关信息可以关注“互联网架构师”
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Nacos SDK for Scala 发布
脱胎于历经阿里巴巴10年生产验证的内部产品,支持具有数百万服务的大规模场景,Nacos作为高性能的动态服务发现、配置管理和服务管理平台从2018年开源以来,版本迭代速度很快,已经发布到1.2.1,已支持企业使用Nacos生产高可用。Nacos社区一直持续投入多语言建设,目前支持主流微服务开发语言及主流服务框架和配置管理框架。 本文作者是Nacos contributor杨景,他在 2019 对公司产品进行微服务改造时选择了 Nacos,独立开发了Nacos SDK for Scala。 欢迎各位感兴趣的开发者参与Nacos社区共建: GitHub:https://github.com/alibaba/nacos 官网:https://nacos.io 概述:Nacos SDK for Scala Nacos SDK for Scala 是基于 Nacos Java SDK 的封装,使得在 Scala 下更易使用。 支持使用 HOCON 做为配置文件,支持 Akka Discovery 和 Play-WS 。 Nacos SDK for Scala 既可以 将 Nacos 引入 Scal...
- 下一篇
必知必会:IT运维体系与发展新趋势
云栖号资讯:【点击查看更多行业资讯】在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 我们分享有三个方面: 第一,总结运维经验; 第二,探讨运营趋势; 第三,对一些新的运营的建议。 首先说一下我的个人分享,可能也限于个人的经历和水平,能力有限,视野有限,欢迎大家指正,也只是代表我现在当前的一个观点,另外可能引用网络的图片和内容。 今天分享的内容大概分成五个方面:首先说一下运维定义,做什么,为什么要这么做,我们应该怎么做。第二分享整个封闭式系统架构和开源系统架构的对比分析。第三分享传统运维和互联网运维的对比分析。第四探讨一下IT运维发展的一些新趋势。第五给我们的运维同仁提供一些辅助建议。 一、运维是什么? 运维是做什么的?说句实在话,我干运维也十多年了,到底运维做什么的,在我刚入行的时候,别人也会问我,运维是做什么的,我会跟他们解释说,运维可能就是修电脑,或者维护服务器,或者说做一些系统维护,但是可能你的朋友并不理解,当你回到家的时候,估计七大姑八大姨都问你什么是运维,你根本解释不清楚,后来我就说,网吧你们总知道吧,这个他们好理解了,他们说哦,原来你就是网管啊。 我觉得有点...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS6,CentOS7官方镜像安装Oracle11G
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- 设置Eclipse缩进为4个空格,增强代码规范
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19