前后端分离的项目,精确到按钮级别的权限控制如何做?

前后端分离系统的权限设计 Marble权限系统是控制marble用户访问的系统,它支持针对于角色的资源授权,提供一套API允许用户对权限进行增删查改等操作。在权限系统中,Resource可以表示可以被授权访问的主体。比如,在marble系统中,API接口可以算作一类资源,它可以通过配置的方式允许特定用户对其调用;模块也是一种资源,比如课程表模块,它可以允许用户对其进行查看。{service} - 服务名称,对于marble系统,固定为marble{region} - 地域名称,目前为空。 阅读详情

1. 前言

本篇文章是本人基于个人项目的总结,希望对正在做个人项目的同学有所帮助。

项目中,权限验证和安全性是非常重要的,可以说这是一个项目开始时就必须要考虑的基础核心功能。一般权限的实现方式是RBAC模型,RBAC(Role-Based Access Control:基于角色的访问控制),它由三个基础组成部分即用户、角色、权限。

  • 用户:每个用户都有唯一标识并被授予不同的角色。
  • 角色:不同的角色拥有不同的权限。
  • 权限:访问权限,即能看到什么,能访问什么。

​ (这里画一个简单的草图)

总结就是什么样的用户能做什么样的事情。当然这个模型是一般的模型,还有更复杂的,约束性更强的模型,如:RBAC0、RBAC1、RBAC2。

  • RBAC0 用户和角色之间可以是多对多的关系
  • RBAC1 角色间的继承关系,即角色上有了上下级的区别
  • RBAC2 基于RBAC0模型的基础上,进行了角色的访问控制,有了互斥角色、级别等概念。

实际企业中做权限控制是不局限于用户权限,它们还可能包含数据权限、接口权限、按钮权限、甚至每个层级的权限(如每个公司拥有不同的权限)。对于一个单体项目而言,如果没有相对庞大的用户群体,很多复杂的业务,那么使用RBAC0模型的权限是完全够用的,每个用户有着不同的角色,每个角色都有着自己的权限集。

那么我们该如何在自己的项目中去实现这种权限控制呢?

2. 权限究竟由前端控制还是后端?

在回答这个问题前,我要先说一下我个人是如何做权限控制的。首先前端会拿到一份路由表,这个路由表表示当前用户能够访问的路由有哪些(页面),然后还有一个权限集合,即这个用户拥有哪些权限,会将这些信息告知前端。前端拿到这份路由表会用addRoutes方式动态挂载,那么就能实现不同用户看到不同的页面。当然这只能控制页面,控制不了哪些人能访问哪些接口,进行哪些操作,哪些数据,所以再怎么做权限控制都是不安全的,后端必须要有对应的权限验证方法。

为什么这么说?举个例子:如一个公告页面中含有编辑和保存的功能,对于用户A拥有编辑和保存的权限,对于用户B仅拥有编辑的权限,对于前端来说用户A和B都可以进入公告界面,那么这里的权限就必须要由后端来验证是否可以访问对应的业务。前端和后端划分的权限是不一样的。

前端来控制页面权限,后端需要验证每个涉及相关请求的操作(如修改,删除等等)是否有操作的权限,即前端负责页面展示的控制,而后端负责是否可以访问业务的控制。前端发送的请求中必须在请求头中包含一个身份标识用于后端进行身份校验,约定请求头名称为token,值为该用户的标识,后端根据该值获取用户信息进权限校验。

一个相对安全的系统必须要前后端进行协调,各自做好各自的事情,重重控制最大程度确保系统的权限安全,防止非法操作与访问。

3. 设计

接下来讲讲如何去设计。

路由表是用于前端的页面权限控制,它和vue-router的格式一样,这个是由后端处理好返回给前端的,格式和前端路由配置一样(具体属性还请看官方文档):

export const constantRoutes = [
  {
    path: '/test',
    component: Layout,
    redirect: '/test/index',
    children: [{
      "path": "/index",
      "meta": { "title": "test", "icon": "test" }
    }]
  }
]

我们知道前端的路由是对应一个页面,所以也可以把路由的这些属性看作是页面的所具备的一些属性,而后端就需要把这些属性存储下来,根据不同的用户所具备的角色给出对应的路由表,前端根据这个路由表来控制侧边栏的渲染。

路由表就是由目录权限和菜单权限动态组成,而我们也想实现按钮的控制,那么我们的权限类型也要增加按钮权限。

所以最终我们的权限划分为目录权限、菜单权限、按钮权限,其中目录权限和菜单权限组成路由表。

角色和权限是多对多关系,用户和角色也是多对多关系,所以要有中间表来存储它们的对应关系。

权限使用标识字符串的形式标识,可以{模块}:{功能}:{业务}来表示,比如公告修改system:notice:update标识。

4. 实现

后端的权限和角色验证我选择的是Sa-Token(结合注解和拦截器实现),自己实现也很简单使用自定义注解+请求切面处编程,或者全局拦截器interceptor都能实现,使用框架更加方便减少代码量。

前端提交登录信息后,首先要核实登录信息,然后生成用户访问凭证也就是token,查询出用户有哪些权限标识,将用户信息、token和权限标识返回给前端,前端拿到这些信息后先将这些信息存储(本地缓存或者cookie),然后取拉取路由表,根据路由表去渲染侧边栏。

4. 代码实现

代码很多,这里就不单独贴出来了,我这里告知如何去看,大家可以去项目中阅读。

数据库设计都在resource/db目录下。

后端:

  • com.guet.ARC.service.SysMenuService 这个menu表示权限,查询和构建路由表的逻辑在此。
  • com.guet.ARC.controller.SysMenuController 这里时对外提供的接口。
  • 权限验证由注解表示@SaCheckPermission,都在controller层控制。
  • com.guet.ARC.config.SaTokenConfig Sa-Token的配置,包含拦截器配置和跨域配置。
  • com.guet.ARC.component.StpInterfaceComponent 这里是存储用户的角色和权限集合,这样每次获取时不用重新查询数据库。

前端:

  • permission.js 路由拦截鉴权
  • store/modules/permission.js 路由动态渲染逻辑
  • utils/request.js 请求鉴权逻辑

vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做? 取得后端返回的菜单后,根据菜单与路由的对应关系,筛选出可访问的路由,通过。菜单跟路由耦合在一起,定义路由的时候还有添加菜单显示标题,图标之类的信息,而且路由不一定作为菜单显示,还要多加字段进行标识。路由方面,用户登录后只能看到自己有权访问的导航菜单,也只能访问自己有权访问的路由地址,否则将跳转。按需挂载,路由就需要知道用户的路由权限,也就是在用户登录进来的时候就要知道当前用户拥有哪些路由权限。如果有嵌套路由,后端功能设计的时候,要注意添加相应的字段,前端拿到数据也要做相应的处理。 阅读详情

相关推荐

权限系统控制到按钮级别开源推荐 Spring Boot-Shiro-Vue

大伙再搞权限系统的时候,权限控制到菜单很容易,但是很多情况要控制到按钮接口级别,这个时候设计就要研究下了。方案好几种,锋哥这里推荐一个不错的开源方案,大伙可以参考学习下。Spring Boot-Shiro-Vue实现; github开源地址: https://github.com/Heeexy/SpringBoot-Shiro-Vue 系统演示地址: http://g.heeexy.com/ Spring Boot-Shiro-Vue 提供一套基于SpringBoot-shiro-vue的权限管理思路

weixin_47082274的博客 1902

SpringBoot+Security+Vue前后端分离开发权限管理系统

适用人群所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术说明Spring Boot2MVC框架 开发的一站式解决方案Spring Security5 认证和授权框架MyBatisPlus3.3.1 基于 MyBatis 框架的快速研发框架MyBatisCode工具生成 MyBatis 相关代码Jackson提供了处理 JSON 数据的工具Lombok简化对象封装工具 Druid   数据库连接池 【前端技术】Vue       互联网最火的前端框架Vue Router路由框架Vuex全局状态管理框架Axios前端 HTTP 框架Element UI前端 UI 框架Vue Element Admin前端模板Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV【开发工具】IntelliJ IDEA开发 IDESQLyog数据库连接客户端PostmanHTTP 请求工具【开发环境】工具版本JDK1.8MySQL5.7

全网最详细 解决戴维南定理的详细推导

替代定理,戴维南定理详细证明

m0_52555753的博客 3万+

前后端分离之权限管理

使用mybatis-plus生成中间表(rolePermission)相对于之前添加了根据角色查询该角色具有的权限id内容。console.log打印的结果(第二处ids)此处使用TODO可以在后面进行查找此业务是否完成。借助elementui中的对话框和树形结构。借助elementui中的表格部分。serviceImpl层。点击遮罩层的确定处理。controller层。...

qq_50896786的博客 3275

crowdcountingp2p代码复现

前面学习了一下论文:Improved Field-Based Soybean Seed Counting and Localization with Feature Level Considered该论文的模型原型由CrowdCounting-P2PNet改进而来这里先复现一下CrowdCounting-P2PNet模型,然后再学习P2PNet-Soy模型。

m0_73832962的博客 2329

面试问题总结——关于YOLO系列(三)

接着上篇的的YOLO系列面试问题总结,加油,冲! 三.YOLOv3 1.YOLOv3主干网络BackBone——Darknet-53网络结构(因为有53个卷积层) (原论文中Darknet53的尺寸是在图片分类训练集上训练的,所以输入的图像尺寸是256x256,而在YOLOv3中输入尺寸是416×416)   ①上图中,Top-1 Accuracy和Top-5 Accuracy是指什么呢?区别在哪呢?   我们知道ImageNet有大概1000个分类,而模型预测某张图片时,会给出1000个按概率从高.

boss-dog 1万+

前后端分离的权限管理系统设计和实现

代码地址 项目托管在GitHub上,使用Git拉取代码。 前端:https://github.com/jonssonyan/authority-ui 后端: https://github.com/jonssonyan/authority 相关视频 演示视频 部署视频 界面 设计和实现 技术栈 前端: JavaScript、Vue.js Element axios 后端: Java、Spring Boot、Mybatis-plus、 Shiro 、JWT 部署: Docker 数据库设计 代码设计

杰森写代码 2856

YOLOv11改进策略【Neck】| arXiv 2025 分层多头注意力HMHA 子空间拆分提多样 + 通道重排降冗余,强化目标检测精度

HMHA(Hierarchical Multi-Head Attention,分层多头注意力)旨在解决传统多头注意力(MHA)在图像恢复任务中的核心缺陷——特征冗余。传统MHA将通道均匀拆分给各个头,导致不同头学习的子空间信息相似,进而出现多头关注同一区域、忽略退化区域修复的问题,限制了模型的特征表达能力。HMHA通过“分层子空间拆分+通道重排序”策略,让每个头学习差异化、互补的上下文特征,从根源上缓解冗余,提升图像恢复任务中对复杂退化场景的特征捕捉能力。

Limiiiing的博客 779

权限系统--前后端分离

权限系统--前后端分离 前端使用: vue + elementui + axios + css + html 后端使用: springboot+mybatis-plus +mybatis+druid+shiro+swagger2+redis

ne_123456的博客 5634

修改yolov8使支持单通道图像输入

默认支持BGR三通道图像输入,但是在很多工业场景下,存在很多灰度图像的场景,因此对yolov8代码做一些修改以支持单通道图像输入,满足项目实际需求。训练时,只需要在 data 的 yaml 文件中,添加 ch=1 即可。

mingo_敏 5779

学Simulink--基于多物理场耦合与系统集成的储能系统场景实例:压缩空气储能(CAES)系统的热力学建模与效率分析

本文提供了一个基于Simulink的压缩空气储能(CAES)系统热力学建模教程。通过多物理场耦合方法,详细演示了从系统架构设计到仿真测试的全过程,包括多级压缩机/膨胀机系统搭建、显热蓄热系统设计以及效率分析。文章重点强调了热管理对提升CAES效率的关键作用,并给出了68%电-电效率的优化案例。最后提出了变工况建模、不同蓄热介质对比等高级优化方向,为开发零碳大容量储能系统提供了实用工具和方法。

amy_mhd的博客 131

权限精确到按钮级别

注意:以上写法只为提供一个参考示例,不同框架有不同写法,大家可根据项目技术栈灵活封装进行调用。思路:如此精确的范围控制只依赖后端已经难以完成,此时需要前端进行一定的逻辑判断。在使用sa-token轻量级框架下:如何将权限精确到按钮级别。复制到剪贴板错误复制成功。

NullpointerExcep的博客 1322

120、ISP 驱动架构解析:从 V4L2 请求到 ISP 硬件的配置下发流程

本文以实际案例解析ISP驱动架构的V4L2到硬件配置下发流程。作者通过一个因内存共享导致画面闪烁的bug案例,详细剖析了用户空间参数通过V4L2结构体传递、驱动层拆包与硬件寄存器映射、时序同步机制等关键环节。特别强调深拷贝、dirty flag增量更新、shadow register等实现要点,并给出多路并发隔离、寄存器写入失败等典型问题的排查方法。文章建议开发者深入理解参数到寄存器的转换过程,推荐通过debugfs实时监控寄存器状态,避免过度依赖自动调试工具。全文以实践为导向,对ISP驱动开发具有直接指导

sundong_81的博客 160

前后端分离模式下的权限控制方案

在前后端分离的模式下,所有的交互场景都变成了数据交互,因此传统业务系统中的权限控制方案在前端已经不再适用(比如使用后台模板标签进行权限控制),需要另外设计权限控制方案。 权限控制的概念 要理解权限控制,需要明白两个概念:资源和权限。 资源:对于一个系统来说,系统内部的所有信息都可以理解为是这个系统的资源。页面是资源、数据是资源、按钮是资源、图片也是资源。 权限:权限就是访问某个资...

weixin_30470857的博客 948

基于THUCNews数据集bert bert_wwm的新闻文本分类

基于THUCNews数据集bert bert_wwm的新闻文本分类

984

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

springboot 按钮权限验证_前后端分离模式下的权限设计方案

作者:_liuxxhttp://cnblogs.com/liuyh/p/8027833.html前后端分离模式下,所有的交互场景都变成了数据,传统业务系统中的权限控制方案在前端已经不再适用,因此引发了我对权限的重新思考与设计。对于非前后端分离模式下的权限思考,看这里:通用数据权限的思考与设计权限控制到底控制的是什么?在理解权限控制之前,需要明白两个概念:资源和权限。什么是资源,对于一个系统来说,系...

weixin_33724428的博客 1169

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

前后端分离模式下的权限设计方案

程序员的成长之路互联网/程序员/成长/职场关注阅读本文大概需要 3.6 分钟。老惯例,昨天的头条是广告,今天的次条文末抢红包!作者:_liuxxcnblogs.com/...

良月柒 1890

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

【Vue + Koa 前后端分离项目实战8】使用开源框架==>快速搭建后台管理系统 -- part8 【权限控制联调】

【Vue + Koa 前后端分离项目实战8】使用开源框架==>快速搭建后台管理系统 -- part8 【权限控制联调】

Sabrina_cc的博客 1286

Spring Security 按钮级别的权限怎么实现?

首先小伙伴们都知道权限有不同的颗粒度,在 vhr 项目中,整体上我是基于请求地址去处理权限的,这个粒度算粗还是算细呢?有的小伙伴们可能认为这个权限粒度太粗,所谓细粒度的权限应该是基于按钮的。如果有小伙伴们做过前后端不分的开发,应该会有这样的体会:在 Shiro 或者 Spring Security 框架中,都提供了一些标签,通过这些标签可以做到在满足某种角色或者权限的情况下,显示某个按钮;当用户不具备某种角色或者权限的时候,按钮则会自动隐藏起来。但是大家想想,按钮的显示与隐藏不过是前端页面为了提高用户体验而

l688899886的博客 3007

基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目

一、前言 最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们 功能很简单,单点登录,前后端动态权限配置,前端权限精确到 按钮 级别,后端权限精确到 url 上,剩下的就是一些关联表的增删改查,例如:用户管理,角色管理,菜单管理,系统日志等… Spring Security入门系列教程: Sprin...

郑清 1万+

【重磅开源】MapleBoot权限控制使用介绍(菜单权限、按钮权限、数据权限)

使用Maple-Boot开源项目的权限控制功能,本文描述了项目中菜单权限、按钮权限、数据权限如何使用。

笑小枫 2870

SpringBoot3+Vue3 前后端分离项目基于RBAC权限访问控制-Sa-Token把权限精确到按钮级

Sa-Token 把权限精确到按钮级

韶君的博客 1081

yudao-cloud菜单权限:动态菜单加载与按钮级别权限控制

在现代企业级应用开发中,权限管理是保障系统安全的核心环节。你是否曾遇到过这样的困扰: - 不同角色的用户登录后看到完全相同的菜单,缺乏个性化体验 - 按钮级别的权限控制需要在前端硬编码,维护成本高 - 权限变更需要重新部署前端代码,灵活性差 - 多租户环境下权限隔离复杂,容易产生安全漏洞 yudao-cloud基于Spring Cloud Alibaba构建的RBAC(Role-Based A...

gitblog_00851的博客 945
上一篇: SpringBoot自动装配、启动流程及自定义starter
下一篇: 为什么 `ConcurrentHashMap` 不能插入 `null`?
加班不秃顶
博客等级 码龄7年 1822粉丝 599原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值