vue和react通用后台管理系统权限控制方案

1. 介绍

在任何企业级应用中,尤其是后台管理系统,权限控制是一个至关重要的环节。它确保了系统资源的安全性,防止非法访问和操作,保障业务流程的正常进行。本文件将详细解析后台管理系统中的权限控制机制及其实施策略。

那么权限控制都包括什么呢?

  • 页面权限:菜单栏是否显示,路由是否可访问
  • 功能权限:按钮是否显示,是否可点击
  • 接口权限:接口是否可访问(后端内容)

不同的账号显示的菜单栏不同,页面上可以操作的按钮也不一样,这些操作都是通过权限模型实现的,那么接下来我们就来学习下常见的权限模型

2. 常见权限模型

  1. 基于角色的访问控制(Role-Based Access Control, RBAC)
  • 在RBAC模型中,权限不直接授予用户,而是首先定义一系列角色,然后将权限分配给这些角色用户通过成为某个或多个角色的成员来获取对应的权限。这种模型简化了权限管理,因为它允许管理员集中管理角色而不是逐个管理用户。角色可以按组织结构、职责或者工作流进行划分。
  1. 自主访问控制(Discretionary Access Control, DAC)
  • 在DAC模型中,资源的所有者可以自行决定谁可以访问该资源。用户可以自由地将其所控制的信息或资源的访问权限转让给其他用户。操作系统中的文件权限设置就是一个典型的DAC实例,用户可以设置文件的读、写、执行权限给其他用户或用户组。
  1. 强制访问控制(Mandatory Access Control, MAC)
  • MAC是一种严格的安全策略,其中系统本身负责所有权限决策,不允许用户随意更改。权限级别是由系统内定的安全策略决定,通常是基于信息的敏感性和用户的安全许可级别。在这种模型下,即使资源所有者也不能随意更改权限设置。
  1. 基于属性的访问控制(Attribute-Based Access Control, ABAC)
  • ABAC模型基于用户、资源、环境和操作的多种属性来决定访问权限。权限决策基于多重属性组合,例如用户的身份、位置、时间以及操作上下文等多种因素。这种方式更为灵活和精细,可以支持复杂的动态权限策略。
  1. 基于任务的访问控制(Task-Based Access Control, TBAC)
  • TBAC关注的是完成特定任务所需的最小权限集。用户在执行特定任务时获得必要的权限,任务完成后权限则会被收回。
  1. 基于能力的访问控制(Capability-Based Access Control, CBAC)
  • 在CBAC模型中,访问控制基于“能力”这一概念,能力是表示对某一资源具有特定访问权限的令牌。用户拥有一个或多个能力令牌,持有令牌意味着有权访问相应的资源。

3. RBAC(角色的访问控制模型)

  • RBAC 模型的基本思想是将用户和权限分离,通过角色作为中间层来连接用户和权限。一个角色可以关联多个权限,一个用户可以拥有多个角色。这样可以实现灵活的权限配置和管理,避免直接给用户分配权限带来的复杂性和冗余性。
  • RBAC 模型有多个扩展版本,如 RBAC0、RBAC1、RBAC2 等。我们使用的是 RBAC0 模型,即最基本的 RBAC 模型。RBAC0 模型包含三个要素:用户(User)、角色(Role)和权限(Permission)。用户是指使用系统的主体,角色是指一组相关的权限的集合,权限是指对系统资源的访问或操作能力。

  • 从上图中我们可以梳理出来的业务,就有,用户管理,角色管理,权限管理(有的系统中是菜单管理,后续给大家分析两者的差异)。所以我们在这里最少可以拆分出三张表,即用户,角色,权限,当然因为用户和角色,角色和权限都是多对多的关系,我们还可以有两张中间表,即总共5张表,但是在很多情况下,我们并没有反查的需求,所以3张表的设计是够用的。

4. vue3中实现权限控制方案

4.1. 分析

页面权限 的核心是 路由表配置,路由表分为两部分:

  • 固定路由表(constantRoutes):每个角色都有的路由表,例如登录界面、404界面
  • 私有路由表(privateRoutes):不同角色拥有不同的路由表

实现 页面权限 我们有两种方式:

  • 前端复杂版:即后端只返回当前用户的权限数据,前端根据权限数据,清洗路由后,再将清洗剩下的路由动态添加到路由表中。(推荐)
  • 后端复杂版:我们将所有私有路由都放到后端,在登录时,后端将当前用户的路由返回给我们(这里的路由也是我们的菜单数据,因为菜单和路由是关联的,也有的项目中是将路由和菜单分开,这里不探讨这种实现),这也就是上面说到的有的项目中会有个菜单管理的原因。

前端复杂方案:

优点:1. 后端只需关注rbac模型的核心,即用户,角色,权限。不需要关心我们的菜单标题,图标等。2. 我们可以在前端随时调整我们的项目视图文件路径。3. 路由元数据配置更方便。

缺点:修改菜单后,需要前端发版。

后端复杂方案:

优点:1. 可以直接在数据库中调整菜单标题,图标等。2. 可支持用户在界面配置菜单选项

缺点:1. 需要增加菜单管理功能。2. 适用项目模板的人,必须对后端有一定了解。3. 前端目录结构受限,必须与后端返回的数据一致。

推荐前端复杂方案:1. 我们即使有了菜单管理功能,当他新增一个菜单,我们前端一样需要新增对象文件。2. 菜单的顺序,图标,标题让用户自己修改的概率不大。3. 逻辑性更清晰。

4.2. 实现页面控制
4.2.1. 获取权限数据(省略了部分其余代码)
export const useUserStore = defineStore('user', () => {// ...const permissions = ref<Ipermissions>([])// ...// 获取权限function getPermissions() {return permissionApi().then((res) => {permissions.value = res.result.permissionsreturn permissions.value})}// ...return {  permissions, getPermission }
}, {persist: {key: `${STORAGE_PREFIX}${USER}`,paths: ['token', 'userInfo'],storage: localStorage,},
})

mock的后端返回数据

4.2.2. 在我们的路由上新增我们的权限字段auth

auth类型如下

在元信息中加入我们auth

4.2.3. 清洗路由

  1. 利用 addRoute API 动态的将路由添加到路由表中

4.3. 实现按钮权限

在vue中,他给我们提供了指令功能

所以我们可以封装一个权限指令,来解决我们的按钮权限

使用

处理这样,我们还可以吧这个封装成一个权限组件

使用

5. react18中实现权限控制方案

5.1. 分析

和vue一致,不赘述

5.2. 实现页面控制
5.2.1. 获取权限数据

mock的后端返回数据

5.2.2. 在我们的路由上新增我们的权限字段auth

auth类型如下

在元信息中加入我们auth

5.2.3. 权限控制

react-router中,他并没有给我们提供动态添加路由的方案,但是由于react非常灵活,所以以前我们是自己实现的动态添加路由,但是在最新的react-router版本中,他推荐使用最新的路由创建方式

但是这种方案,会导致我们很难动态的添加路由,所以采用的把所有路由都注入到路由表中,在路由进入的时候,判断权限,没权限的跳转403的方案。

5.3. 实现按钮权限

react中是没有像vue那样给我们提供自定义指令功能的,但是我们完全可以自己封装一个权限按钮组件。

6. 完整项目

6.1. vue3

码云:https://gitee.com/nideweixiaonuannuande/xt-admin-react18

github:https://github.com/1245488569/xt-admin-vue3

6.2. react18

码云:https://gitee.com/nideweixiaonuannuande/xt-admin-react18

github:https://github.com/1245488569/xt-admin-react18

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/811923.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法思想总结:分治思想

一、颜色划分 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public:void sortColors(vector<int>& nums) {//三路划分的思想int nnums.size();int left-1, rightn,cur0;while(cur<right){if(nums[cur]0) swap(nums[left],nums[cur]);else if(nums…

ChatGPT加持,需求分析再无难题

简介 在实际工作过程中&#xff0c;常常需要拿到产品的PRD文档或者原型图进行需求分析&#xff0c;为产品的功能设计和优化提供建议。 而使用ChatGPT可以很好的帮助分析和整理用户需求。 实践演练 接下来&#xff0c;需要使用ChatGPT 辅助我们完成需求分析的任务 注意&…

GMSSL-通信

死磕GMSSL通信-C/C++系列(一) 最近再做国密通信的项目开发,以为国密也就简单的集成一个库就可以完事了,没想到能有这么多坑。遂写下文章,避免重复踩坑。以下国密通信的坑有以下场景 1、使用GMSSL guanzhi/GmSSL进行通信 2、使用加密套件SM2-WITH-SMS4-SM3 使用心得 ​…

电动汽车原理视频笔记

看到了一个讲的不错的系列视频 新能源维修猿老罗的个人空间-新能源维修猿老罗个人主页-哔哩哔哩视频 新能源汽车上的安全防护系统就是这么多&#xff01;-绝缘检测等_哔哩哔哩_bilibili 新能源汽车居然是这样上电的-高低压上下电详细流程_哔哩哔哩_bilibili

机器学习和深度学习-- 李宏毅(笔记与个人理解)Day 14

Day 14 Classfication (short version) 二分类的时候 用sigmoid 那不就是 logistic 回归嘛&#xff08;softmax 的二分类等价&#xff09; Loss 哦 今天刚学的 &#xff0c;KL散度 &#xff0c;看来cross-entropy 和KL散度是等价的咯~ 我感觉我的直觉没错 这里MSE离得很远的时候…

php未能在vscode识别?

在设置里搜php&#xff0c;找到settings.json&#xff0c;设置你的安装路径即可。 成功

HubSpot如何通过自动化和优化客户服务流程?

在当今竞争激烈的市场环境中&#xff0c;提供卓越的客户服务体验已经成为企业赢得客户忠诚、推动业务增长的关键所在。HubSpot&#xff0c;作为一款领先的客户关系管理软件&#xff0c;通过自动化和优化客户服务流程&#xff0c;为企业带来了革命性的服务体验提升。 HubSpot通…

【opencv】示例-grabcut.cpp 使用OpenCV库的GrabCut算法进行图像分割

left mouse button - set rectangle SHIFTleft mouse button - set GC_FGD pixels CTRLleft mouse button - set GC_BGD pixels 这段代码是一个使用OpenCV库的GrabCut算法进行图像分割的C程序。它允许用户通过交互式方式选择图像中的一个区域&#xff0c;并利用GrabCut算法尝试…

ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…

云LIS系统源码,ASP.NET区域LIS系统源码,实验室信息系统

云LIS系统源码&#xff0c;ASP.NET区域LIS系统源码&#xff0c;实验室信息系统 LIS技术架构&#xff1a;ASP.NET CORE 3.1 MVC SQLserver Redis等 开发语言&#xff1a;C# 6.0、JavaScript 前端框架&#xff1a;JQuery、EasyUI、Bootstrap 后端框架&#xff1a;MVC、S…

大数据架构之关系型数据仓库——解读大数据架构(二)

文章目录 前言什么是关系型数仓对数仓的错误认识与使用自上而下的方法关系型数仓的优点关系型数仓的缺点数据加载加载数据的频率如何确定变更数据 关系型数仓会消失吗总结 前言 本文对关系型数据仓库&#xff08;RDW&#xff09;进行了简要的介绍说明&#xff0c;包括什么是关…

python--递归算法篇

1、给定一个包含n1个整数的数组nums&#xff0c;其数字在1到n之间&#xff08;包含1和n&#xff09;&#xff0c; 可知至少存在一个重复的整数&#xff0c;假设只有一个重复的整数&#xff0c;请找出这个重复的数 def repeat(ls:list) -> list:#把个数超过1的数&#xff0c…

使用geneHapR进行基因单倍型分析(以vcf文件为例)

前记 在群体基因组学研究中&#xff0c;我们常常需要知道一些位点的变异情况&#xff0c;以便于根据对应的表型信息估算这些位点的效应&#xff0c;同时了解这些位点在不同亚群之间的变化情况。这个时候我们就需要进行单倍型分析(Haplotype Analysis)&#xff0c;单倍型分析是研…

Spring Boot | SpringBoot 对 SpringMVC的 “整合支持“

目录: SpringMVC 的 “整合支持” ( 引入"Web依赖启动器"&#xff0c;几乎可以在无任何额外的配置的情况下进行"Web开发")1.SpringMVC "自动配置" 介绍 ( 引入Web依赖启动器"后&#xff0c;SpringBoot会自动进行一些“自动配置”&#xff0…

Linux下mysql的彻底卸载

Linux下mysql的彻底卸载 1、查看mysql的安装情况2、删除上图安装的软件3、都删除成功之后&#xff0c;查找相关的mysql的文件4、删除全部文件5、再次执行命令 1、查看mysql的安装情况 rpm -qa | grep -i mysql2、删除上图安装的软件 rpm -ev mysql-community-libs-5.7.27-1.e…

蓝桥杯 前一晚总结 模板 新手版

《准备实足&#xff0c;冲冲冲 省一》https://www.yuque.com/lenyan-svokd/hi7hp2/hfka297matrtsxy2?singleDoc# 《准备实足&#xff0c;冲冲冲 省一》 #include<bits/stdc.h> // 包含标准库头文件using namespace std; using ll long long; // 定义 long long 数据类…

【opencv】示例-opencv_version.cpp 输出OpenCV的版本和构建配置的示例

#include <opencv2/core/utility.hpp> // 引入OpenCV核心工具库 #include <iostream> // 引入标准输入输出流库// 定义一个包含命令行参数的字符串 static const std::string keys "{ b build | | print complete build info }" // 定义参数b&#xff…

【数据结构】06图

图 1. 定义1.1 无向图和有向图1.2 度、入度和出度1.3 图的若干定义1.4 几种特殊的图 2. 图的存储2.1 邻接矩阵-顺序存储&#xff08;数组&#xff09;2.2 邻接表-顺序存储链式存储&#xff08;数组链表&#xff09;2.3 十字链表-适用于有向图2.4 邻接多重表-适用于无向图 3. 图…

设计模式代码实战-建造者模式

1、问题描述 小明家新开了一家自行车工厂&#xff0c;用于使用自行车配件&#xff08;车架 frame 和车轮 tires &#xff09;进行组装定制不同的自行车&#xff0c;包括山地车和公路车。 山地车使用的是Aluminum Frame&#xff08;铝制车架&#xff09;和 Knobby Tires&#x…

【随笔】Git 高级篇 -- 管理多分支 git rebase(二十二)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…