前后端分离后的权限控制设计方案
近几年随着react、angular、vue等前端框架兴起,前后端分离的架构迅速流行。但同时权限控制也带来了问题。
网上很多前、后端分离权限仅仅都仅仅在描述前端权限控制、且是较简单、固定的角色场景,满足不了我们用户、角色都是动态的场景。
且仅仅前端进行权限控制并不是真正意义的权限控制,它只是减少页面结构暴露、增强用户体验的功效。
场景
系统为后台管理系统,包含了用户创建、用户登录、用户管理自己的资源。用户经常会新增、删除,也可以根据工作情况随时调整页面、功能权限,所以采用用户-角色-页面权限方案实现。
为什么不行:
根据前端路由表显示左侧菜单,但vue-router的路由表主要为了组织代码,经常我们所需要的菜单并非一致。比如某个前端路由a子路由有b、c,但菜单中我们想要直接一级菜单就显示b、c或者将b、c各放到其他菜单下。所以这种非常不灵活。
一个路由是菜单还是页面?是否需要显示到菜单中?是否验证权限?哪个角色或者用户拥有权限?这些都需要写到前端路由里面,一旦有任何权限变动就要大量调整代码。
如果权限写死在前端,那么角色或者用户必须已知且固定不变。比如页面1的meta增加属性标识可访问的角色为a和b
页面
一个页面即一个前端页面,比如首页、用户管理页、资源管理页等。
基本思路为:前端路由保持不变,数据库存储菜单结构、页面权限控制(可以直接做成一个页面来方便管理)等,前端根据数据库中的菜单结构和权限信息来渲染一个菜单出来并只显示其有权限的菜单,并在路由守卫中进行权限控制防止手动输入path越权打开页面。
前端路由(vue-router)中需要正常创建页面及路由。
数据库存储菜单结构和页面权限信息,
菜单(目录、非内容页)可以自己创建,不必要求前端路由中有,因为这是指菜单的可视化的组织结构
页面(内容页)必须是前端路由中已有页面,因为这是用户需要访问的内容。
菜单和页面组成上下级关系,一级可以是菜单也可以是内容页,内容页也可以放在菜单下,这样理论(需要页面菜单样式支持)可以组成无限级菜单
菜单和页面的基本属性包括title(对应路由title)、name(对应路由name)、path(对应路由path)、父级、类型(菜单/页面)、是否可见(左侧菜单栏是否显示:部分页面可能是页面内的链接进去)、是否需要验证权限(部分页面比如首页无需验证权限大家都可以进入)
不需要控制权限且不需要显示到左侧菜单的路由这里可以不进行管理,比如404页面等
前台打开后获取获取数据库的所有菜单、页面及结构,根据是否登录、是否需要验证权限等进行控制,或无权限跳转至登录页
用户登录成功后,再获取用户对应的的页面权限列表,使用上一步获得的所有页面、结构和用户拥有权限的列表渲染出一个菜单,只包含此用户拥有权限的,提升用户体检,避免显示大量用户不能访问的菜单影响使用和不必要的功能暴露。
路由守卫中根据上一步获得的权限列表判断每个跳转,无权限可返回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')"判断即可。
页面功能管理:
获取用户拥有的权限:
角色
一个角色类似于一个身份或岗位,每个角色有自己的权限范围。
一个角色可以拥有多个页面权限。
一个角色可以拥有多个功能权限。
角色管理:
角色分配权限:
用户
用户可以创建、删除,一个用户随时可能变更工作内容,或者身兼数职,所以可以为其分配一个或者多个角色,他拥有的角色的权限就是他的权限。此时已经可以打通权限前端的权限分配,用户-角色-页面权限、功能权限。
用户管理:
用户分配角色:
前端效果
前端页面菜单效果:
后端权限
传统前后端不分离的情况下,路由都在后端统一管理,简单的方法比如用户管理页面/user/那么他里面使用的接口都使用/user/add、/user/delete等相同前缀,那么只要判断用户拥有/user/权限就可以访问/user/*所有接口。
前后端分离后面临的问题:
接口
方案:
需要控制权限的接口进行上传管理(可以做成管理页面)
每个页面和功能可以关联多个接口,比如用户页面关联了用户查询接口和用户编辑接口,用户删除功能关联用户删除接口
后端对请求的路径进行判断,用户->角色->页面/功能->接口,拥有接口权限即允许访问
前后端分团队开发,不容易一一对照,且前端有自己的路由(此路由受限于代码组织结构)等等,无法使用传统方式简单处理
相同的接口可能会被前端多个页面多次利用
来源:www.yuque.com/zhanghaofei/blog/xrpz9p
公众号后台回复【2T】有惊喜礼包!
猜你喜欢
1、GitHub 标星 3.2w!史上最全技术人员面试手册!FackBoo发起和总结
2、如何才能成为优秀的架构师?
3、从零开始搭建创业公司后台技术栈
4、程序员一般可以从什么平台接私活?
5、37岁程序员被裁,120天没找到工作,无奈去小公司,结果懵了...
6、滴滴业务中台构建实践,首次曝光
7、不认命,从10年流水线工人,到谷歌上班的程序媛,一位湖南妹子的励志故事
8、15张图看懂瞎忙和高效的区别!
前后端分离后的权限控制设计方案相关推荐
- 你需要来自trustedinstaller的权限才能删除_前后端分离后的权限控制设计方案
近几年随着react.angular.vue等前端框架兴起,前后端分离的架构迅速流行.但同时权限控制也带来了问题.网上很多前.后端分离权限仅仅都仅仅在描述前端权限控制.且是较简单.固定的角色场景,满足 ...
- springboot前后端分离后权限原理浅谈
1. 需求描述 最近在梳理springboot前后端分离后的权限管理问题.前段时间,已经把shiro的实现和spring security 的实现进行了初步的了解.如果深入细节,一个篇幅怕是不够.本文 ...
- 前后端分离后的前端时代
什么是前后端分离,要区分前端和后端,需要有个明确的界限.一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了. 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的 ...
- 前后端分离微服务架构如何设计?
一.职责划分 前端 前端工作专注业务的页面呈现,非常注重用户体验度,也是与各种角色打交道最多的. 比如: 前端开发人员会经常与产品经理或者客户讨论页面样式.视觉效果,页面布局等各种页面渲染效果 前端开 ...
- 前后端分离后的前端时代 1
本文从前端开发的视角,聊一聊前后端分离之后的前端开发的那些事儿.阅读全文,大约需要8分钟. 什么是前后端分离 除了前端之外都属于后端了. 你负责貌美如花,我负责赚钱养家 在传统的像ASP,JSP和PH ...
- 前后端分离后的前端时代,使用前端技术能做哪些事?
什么是前后端分离,要区分前端和后端,需要有个明确的界限.一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了. 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的 ...
- 前后端分离后产生的跨域问题sessionid丢失,cookies无法写入等
文章目录 前言 一.会话机制 1. 何为一次会话,会话从什么时候开始,从什么时候结束? 2.cookies如何保持会话,它的工作流程? 3.session原理分析: 实例记录sessionid变化(前 ...
- SpringBoot+SpringSecurity前后端分离+Jwt的权限认证(改造记录)
欢迎关注方志朋的博客,回复"666"获面试宝典 来源:blog.csdn.net/zzzgd_666/article/details/96444829 前言 一般来说,我们用Spr ...
- Spring Boot + Vue 前后端分离开发,权限管理的一点思路
在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...
- 前后端分离中的权限管理思路
在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...
最新文章
- 人工智能的产业落地经验!
- Java NIO学习系列三:Selector
- 基本数据类型和包装类型
- CASE_02 基于FPGA的数字钟万年历
- 【C++基础学习】const限定修饰符详解
- CCF 201403-1 相反数
- html盒子中盒子排列,css3中弹性盒排布使用方法
- gnome桌面环境 kde桌面环境的区别
- IBM\浪潮\Dell\HP服务器raid(磁盘阵列)配置
- win10禁用全角_win10输入法全角半角怎么切换 快捷键使用教程
- Html5中长线条怎么写,我的年终总结
- SpringBoot2——web开发(组件使用)
- 拉姆达999城市电话114 V3.3.1
- yml中${}的意思
- 全国计算机等级考试office无纸化考试,全国计算机等级考试真题汇编与专用题库 二级MS Office高级应用 2016年无纸化考试专用...
- C89 和 C99 标准比较
- 2018华为软件精英挑战赛
- 偏差-方差分解,学习和验证曲线评估模型
- linux运维管理之监控,Linux系统运维之运维监控.pdf
- Android开发--调用系统邮件