基于RBAC的权限管理的理论实现和权限管理的实现

权限管理的理论

首先需要两个页面支持,分别是角色管理和员工管理,其中角色管理对应的是角色和权限的配合,员工管理则是将登录的员工账号和员工所处的角色进行对应,即通过新增角色这个概念,让权限和员工并不直接关联,而是通过分别和角色进行关联从而实现给员工分配权限。

菜单和按钮的权限管理

菜单的权限控制

通过对后台返回的数据进行vuex中的存储,然后将权限与路由中的动态规则进行比对,筛选出对应的动态规则,然后将这些规则与静态规则合并,从而实现路由的权限控制,然后通过将完整的路由规则存入到vuex中,在菜单的展示界面渲染vuex中存储的完整的路由规则,来实现界面上我们看到的菜单的权限控制。

这里有几个细节,我们在获取用户权限的时候有两个时机可以选择,一个是用户登录时,另一个是路由的beforeEach时,考虑到更好的时效性(更容易得到修改权限后,用户展示的菜单和按钮权限在界面上立即可以看到),我们选择在beforeEach的时候请求这个接口。

还有就是我们在拆分权限的时候,将其拆分成一级路由对应的权限以及二级路由对应的权限,这里面用到了数组去重的Array.from(new Set(某个数组)) 这样的操作。然后我们根据去重后的结果,使用一级的权限去筛选符合条件的动态路由,然后用二级的权限去筛选被筛选过的动态路由,从而得到我们要的路由。

这里获取二级的权限的时候的字符串拼接,是写成return `${arr[0]}:${arr[1]}`,即中间还有一个:,这个是和我们设计的动态路由的permission字段相对应的。我们的二级路由也是写成xx:yy这样的形式。

这里就是我们最终得到动态路由的地方,其中需要注意的就是我们的路由规则应该是完整的,所以我们最后return的是return {...item,children:(){}},即我们将item返回了,我们只修改了符合我们要求的children,这个写法很聪明。

然后就是动态添加路由规则,用的方法是router.addRoute(),完整写法是routes.forEach(item=>router.addRoute(item))

上面这种是添加到路由规则中,还需要我们对菜单进行调整

通过在vuex中进行响应式数据的设置,然后替换掉菜单的数据获取,从而实现菜单的响应式数据展示。

按钮的权限控制

通常常用的是通过vue的全局指令vue.directive('指令名',{

//钩子函数

bind(el,binding){},

inserted(el,binding){

//代码内容

}

})

按钮的权限控制,除了需要返回的权限以外,还需要后台返回一个全部的按钮权限。然后我们通过全局指令来对按钮进行操作,使得登录用户具有权限的按钮能够展示,这个一般是可以通过全局指令的钩子函数中的el.remove()来进行元素的移除。

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

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

相关文章

【论文精读】MAE

摘要 将掩码重建任务从nlp引入到cv,提出非对称掩码自编码器。 框架 概述 如上图,本文提出掩码自编码器,即将给定原始信号的部分观测值的情况下重建原始信号,编码器将观察到的部分信号(没有掩码标记)映射到潜在表示,采…

openai公司的chatgpt-3.5参数库内还未增加sora的语料信息

openai公司的chatgpt-3.5参数库内还未增加sora的语料信息!我想通过openai公司的chatgpt3.5来了解一下关于sora的技术信息,结果呢,它竟然回答不知道sora是什么。看来,sora的语料库信息还未来得及加入chatgpt3.5的训练模型中。 如图…

Puresuit 轨迹跟踪

在网上看过了很多Puresuit的轨迹跟踪算法,看起来都写的差不多,用起来不会用。 套用一份demo,在C转C语言的时候又深入理解了一些,在此整理成文档,供大家参考。输入 1.输入量是什么; 要知道车的长度,车的后轮位置以及下…

java+vue_springboot企业设备安全信息系统14jbc

企业防爆安全信息系统采用B/S架构,数据库是MySQL。网站的搭建与开发采用了先进的java进行编写,使用了vue框架。该系统从三个对象:由管理员、人员和企业来对系统进行设计构建。主要功能包括:个人信息修改,对人员管理&am…

WireShark 安装指南:详细安装步骤和使用技巧

Wireshark是一个开源的网络协议分析工具,它能够捕获和分析网络数据包,并以用户友好的方式呈现这些数据包的内容。Wireshark 被广泛应用于网络故障排查、安全审计、教育及软件开发等领域。接下将讲解Wireshark的安装与简单使用。 目录 Wireshark安装步骤…

术业有专攻!三防加固平板助力工业起飞

在日常使用中的商业电脑比较追求时效性,以市场定位做标准,内部元件只需满足一般要求就行,使用寿命比较短。而三防平板电脑是主要运用在复杂、恶劣的环境下所以在需求方面较高,需要保证产品在恶劣条件下正常使用,满足行业领域的需求…

《白话C++》第10章 STL和boost,Page101 10.4.6 std::weak_ptr

2.基本功能 “柔弱的”weak_ptr专门用来解决上述设计中必须面对的循环指向问题。 weak_ptr并不是真正的智能指针,它必须依附于shared_ptr存在。对应前面的C1、C2,我们写一个弱引用版本的C3和C4的例子: struct C4; struct C3 {~C3(){cout…

c++类和对象新手保姆级上手教学(中)

前言: 类和对象中篇,这里讲到的前4个默认成员函数,是类和对象中的重难点,许多资料上的讲法都非常抽象,难以理解,所以我作出这篇总结,分享学习经验,以便日后复习。 目录 6个默认成员…

图像配准之HomographyNet

文章名称:Deep Image Homography Estimation,论文地址:https://arxiv.org/pdf/1606.03798.pdf,代码地址:GitHub - mazenmel/Deep-homography-estimation-Pytorch: Deep homography network with Pytorch 1、背景介绍 …

小程序 - 下拉刷新

1.启用方法 2.刷新事件监听 3.停止方法

Stable Diffusion WebUI 常用命令行参数

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 大家好,我是水滴~~ 本文主要讲解 Stable Diffusion WebUI 的一些常用命令行参数,内容详细的介绍了每一种参数的使用,并配有截图,非常适合初学者…

vue3+element Plus+ts 自定义主题色,以及生成主题色各种透明度

目录 思路 安装css-color-function【接收一个颜色值,生成不同的透明度】 获取后台配置的主题色或者使用ColorPicker修改主题色 最终结果如下 思路 本篇文章的主体思路是从element Plus官网引申而来。结合了我以前用vue2element-ui配置主题色生成透明度&#x…