11.人力资源管理项目 -_角色管理==＞RBAC 设计思想、 组间通信、 数据铺设、默认选择

已于 2023-09-21 00:14:33 修改
阅读量95 收藏
点赞数
文章标签： vue.js 前端 elementui javascript ajax
于 2023-05-14 17:17:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53850394/article/details/130671011
版权
文章介绍了基于角色的访问控制（RBAC）的设计思想，以及如何在项目中实现角色管理和分配。通过RBAC，可以更有效地管理用户权限，减少单独设置的复杂性。文章详细阐述了如何创建角色分配弹框，获取角色列表，回填员工已有角色，以及最终将选定角色同步到服务器的过程，涉及Vue.js组件开发和数据交互。
摘要由CSDN通过智能技术生成

11.人力资源管理项目 -_角色管理==＞RBAC 设计思想、 组间通信、 数据铺设、默认选择

当页数不确定时如何获取所有页面的数据==>>先随便发一次请求，然后利用第一次请求返回的数据中的total确定总页数。

父传子时，通过watch监听props中的值的变化，给子组件中data的值进行实时赋值，便可以实现子组件data中的数据与父组件的传值实时绑定

01.权限管理-RBAC的权限设计思想

目标

  1. 了解传统的权限设计
  2. 了解 RBAC 权限设计思想

分析

  1. 传统权限说明

​

从上面的图中，我们发现，传统的权限设计是对每个人进行单独的权限设置，

但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限

  1. RBAC 权限设计思想说明

因此传统的诸多缺点，RBAC的权限模型就应运而生了，RBAC(Role-Based Access Control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式如下：

​

RBAC 实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可，接下来，我们就在该项目中实施这一设想。

小结

  1. 以前我们怎么管理用户的权限, 现在怎么做的?

    答案
    • 以前是给每个用户设置可以访问的路由页面路径列表, 或者权限来管理, 现在我们关心的是角色(类)能访问的权限, 而用户分发的是角色的身份

02.角色管理-员工分配角色弹框

目标

实现给员工分配角色的弹框展示

分析

目前系统中已经有一些角色，我们下面要将这些角色分配给不同的员工，让他们进入系统后，做不同的事情。

用户和角色是**1对多**的关系：一个用户可以拥有多个角色，这样他就会具有这多个角色的权限了。比如公司的董事长可以查看全部的员工、可以对公司进行设置、也可以查看员工考勤

例如: 老王是董事长

方式1:

老王这个员工, 分配角色的时候, 可以分配多个角色(人事专员-权限1和2, 薪资专员-权限1和3, 考勤专员-权限4和5…) -> 老王就有很多功能

上面的分配有点麻烦, 所以更好的做法

方式2:

新建角色 -> 董事长 -> 分配权限点(1, 2, 3, 4, 5) -> 给老王设置角色就不需要上面那些小的了, 直接设置一个董事长就全有了

因为功能比较复杂，因此我们需要按照如下步骤进行开发

  1. 把具体的功能给拆分出去（角色的功能比较复杂，拆分组件会减轻工作量）
  2. 通过 Element 提供的 Dialog 组件实现弹层

实现

  1. 创建 src\views\employees\components\assignRoleDialog.vue 组件

  2. 初始化页面结构

<template>
  <div>
    <!-- 渲染角色列表 -->

    <el-row class="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small">确定</el-button>
        <el-button size="small" @click="cancleDialog">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AssignRole',
  props: {
    // 用户的id 用来查询当前用户的角色信息
    userId: {
      type: String,
      default: null
    }
  },
  data() {
    return {}
  },
  methods: {
    // 取消弹框
    cancleDialog() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 30px;
}
</style>
  1. 导入组件，在src/views/employees/index.vue并放置到弹框中
import AssignRoleDialog from './components/assignRoleDialog.vue'

components: {
  AssignRoleDialog
}

<!-- 员工-分配角色权限 - 弹窗 -->
<el-dialog title="分配角色" :visible="showRoleDialog" @close="cancleDialog">
  <!-- 设置角色组件 -->
  <assign-role-dialog @close="showRoleDialog = false" />
</el-dialog>

// 关闭分配角色弹框
cancleDialog() {
  this.showRoleDialog = false
}
  1. 点击分配角色绑定事件处理程序，并传递 ID
<el-button type="text" size="small" @click="setEmp(scope.row.id)">分配角色</el-button>
  1. 在对应的事件处理中
  • 接收 ID，并传递给组件
  • 让弹框展示
  • data里定义userId: ‘’ 变量
// 分配角色
setEmp(id) {
  this.userId = id
  this.showRoleDialog = true
}

<!-- 设置角色组件 -->
<assign-role-dialog :user-id="userId" @close="showRoleDialog = false" />

  1. 子组件内接收userId变量, 在src/views/employees/components/assignRoleDialog.vue中

    其实这一步已经在上面埋伏好了

    props: {
    // 用户的id 用来查询当前用户的角色信息
    userId: {
      type: String,
      default: null
    }
  }

小结

  1. 角色分配我们要做什么效果?

    答案
    • 弄一个弹框, 把内部的内容单独封装一个组件

03.角色管理-获取角色列表并用渲染

目标

  1. 学习 Checkbox 多选框 组件的使用
  2. 获取角色列表数据
  3. Checkbox + 列表数据，渲染角色列表结构

分析

  1. 学习 Checkbox 多选框 的使用
  2. 准备 api 接口发送请求获取后端数据
  3. 开始渲染角色列表的结构

组件学习

  1. 页面结构
  • v-model的值是数组（表示多选）
  • 它的子元素el-checkbox的label属性决定了选中这一项之后值
<!-- 渲染角色列表 -->
<el-checkbox-group v-model="roleIdArr">
  <el-checkbox label="复选框 A" />
  <el-checkbox label="复选框 B" />
  <el-checkbox label="复选框 C" />
</el-checkbox-group>

<script>
export default {
  data () {
	return {
	  roleIdArr: [] // 保存当前选中的权限列表
	}
  }
}
</script>

实现

  1. 导入获取角色列表的方法, 在src/views/employees/index.vue引入使用, 然后传值进入到弹窗组件

    在api/setting.js中已经定义过了, 直接导入使用

    import { getRolesAPI } from '@/api'

  2. 调用该方法，获取角色列表数据

    data() {
  return {
    roleIds: [], // 被选中项
    roleList: [] // 角色列表数据
  }
},

created() {
    // ...其他
  	// 获取所有角色信息
    this.getRoleListFn()
},

methods: {
  // 获取角色列表
  async getRoleListFn() {
	const res = await getRolesAPI()
	this.roleList = res.data.rows
  }
}

  3. 向子组件传值进入

    <!-- 员工-分配角色权限 - 弹窗 -->
<el-dialog title="分配角色" :visible="showRoleDialog" @close="cancleDialog">
    <!-- 设置角色组件 -->
    <assign-role-dialog :user-id="userId" :role-list="roleList" @close="showRoleDialog = false" />
</el-dialog>

  4. 在views/employees/components/assignRoleDialog.vue中接收传递过来的角色数组数据

    props: {
    // ...
    // 接收所有角色数据
    roleList: {
      type: Array,
      required: true
    }
  }

小结

  1. 我们为何要把数组定义在逻辑页面, 传入, 写子组件里也行, 那为何还要写在外面?

    答案
    • 组件一般接收数据展示, 或者有一些事件, 触发传回到逻辑页面, 而且我们在用一些第三方封装的组件也是这个思想, 组件只负责展示数据和一些简单的交互

04.角色管理-获取员工已有角色数据并回填

目标

获取员工已有的数据，将获取到的数据回填到复选框内

​

分析

  1. 首先需要获取到当前员工已有的权限
  2. 将获取到的员工数据中的 roleIds 权限字段赋值给 data 中的 roleIds

实现

  1. 在api/employees.js里其实已经定义过了, 改个注释

    /**
 * @description: 获取用户详细信息
 * @param {*} id 用户id
 * @return {*}
 */
export function getUserDetailByIdAPI(id) {
  return request({
    url: `/sys/user/${id}`
  })
}

  2. 导入获取员工详情的 API

    import { getUserDetailByIdAPI } from '@/api'

  3. 调用获取员工详情数据的方法

    
methods: {
  // 调用员工详情数据
  async getUserRoles() {
    const infoRes = await getUserDetailByIdAPI(this.userId)
    if (!infoRes.success) return this.$message.error(infoRes.message)
    this.roleIds = infoRes.data.roleIds
  },
  // ...其他
  // 分配角色-按钮点击事件
  // 分配角色
    setEmp(id) {
      this.userId = id
      this.showRoleDialog = true

      // 获取员工详细数据
      this.getUserRoles()
    }
}

小结

  1. 为什么我们一直在请求准备数据, 不在组件内渲染呢?

    答案
    • 因为根据需求发现, 我们需要全部的角色信息列表, 还需要当前登录的这个用户的角色信息, 所以先准备好2个数组的数据, 再去铺设, 还可以设置默认选中哪些. 所以先准备好数据, 一会儿铺设

05.角色管理-数据铺设和默认选择

目标

把角色信息, 在弹窗组件中显示, 并接收用户选择的数据

讲解

  1. 在子组件employees/components/assignRoleDialog.vue中, 铺设数据

    <!-- 渲染角色列表 -->
<el-checkbox-group v-model="roleIdArr">
    <el-checkbox v-for="obj in roleList" :key="obj.id" :label="obj.name" :value="obj.id" />
</el-checkbox-group>

  2. 设置默认的选择

    在内部监听外面传入值的变化, 同步给子组件内私有变量, 影响上面多选框的选择

    watch: {
    roleIds() {
        this.roleIdArr = this.roleIds
    }
},

小结

  1. 默认选择如何做的?

    答案
    • 复选框v-model设置数组, 默认和每个value匹配上, 默认就选中了

06.角色管理-完成角色管理的分配

目标

给员工选定角色，同步到服务器，实现角色管理的分配

分析

  1. 封装角色管理分配的 API
  2. 点击确定，调用接口，完成角色分配

实现

  1. 在 src\api\employees.js 文件中封装角色管理分配的 API
/**
 * @description: 为员工分配角色
 * @param {*} data { id:当前用户id, roleIds:选中的角色id组成的数组 }
 * @return {*}
 */
export function assignRolesAPI(data) {
  return request({
    url: '/sys/user/assignRoles',
    data,
    method: 'put'
  })
}

  1. 点击确定，调用接口，完成角色分配, 把数组返回给父组件, 在子组件employees/components/assignRoleDialog.vue实现

    <el-button type="primary" size="small" @click="confirmFn">确定</el-button>

  2. 对应点击事件的方法

    // 确定-点击事件
confirmFn() {
    this.$emit('confirm', this.roleIdArr)
}

  3. 在父级src/employees/index.vue中, 接收事件和选择的角色id的数组

    <!-- 员工-分配角色权限 - 弹窗 -->
<el-dialog title="分配角色" :visible="showRoleDialog" @close="cancleDialog">
    <!-- 设置角色组件 -->
    <assign-role-dialog :user-id="userId" :role-list="roleList" :role-ids="roleIds" @close="showRoleDialog = false" @confirm="addRoleFn" />
</el-dialog>

  4. 对应父级的事件方法

    import { assignRolesAPI } from '@/api'

    methods: {
  // 子组件弹窗 - 点击确定 - 员工角色分配
    async addRoleFn(roleIds) {
    // 调用 API，传入参数
      const res = await assignRolesAPI({ id: this.userId, roleIds: roleIds })
      if (!res.success) return this.$message.error(res.message)

      // 员工分配成功，给用户提示
      this.$message.success(res.message)
      // 关闭弹框
      this.showRoleDialog = false
      // 重新获取当前当前列表数据
      this.getEmployeeList()
    }
}

小结

  1. 角色管理-角色分配传递什么类型数据给后台

    答案
    • 外层是对象, 里面是角色id的数组给后台, 但其实会被axios转成json字符串发给后台
Prodigal__son
关注
RBAC权限设计思想的理解以及使用
qq_60292609的博客
10-27 1012
RBAC是什么? 1、RBAC模型概述 RBAC模型（Role-Based Access Control：基于角色的访问控制）模型是20世纪90年代研究出来的一种新模型，但其实在20世纪70年代的多用户计算时期，这种思想就已经被提出来，直到20世纪90年代中后期，RBAC才在研究团体中得到一些重视，并先后提出了许多类型的RBAC模型。其中以美国George Mason大学信息安全技术实验室（LIST）提出的RBAC96模型最具有代表，并得到了普遍的公认。 RBAC认为权限授权的过程可以抽象地概括为：Who是
RBAC权限管理设计思想
weixin_44047389的博客
12-22 3263
RBAC权限管理设计一、概述二、权限模型三、RBAC模型什么是RBAC模型基本模型RBAC0角色分层模型RBAC1角色限制模型RBAC2统一模型RBAC3基于RBAC的延展——用户组总结： 一、概述 不管是开发手机APP，Web网站还是小程序等项目，基本上都需要一个后台管理系统的支撑。而每个后台管理系统都有一个通用的模块就是用户权限管理模块，权限管理是所有后台系统的都会涉及的一个重要组成部分，主要目的是对不同的用户访问资源进行权限的控制，避免因权限控制缺失或操作不当引发的风险问题，如操作错误，隐私数据泄露等
RBAC用户角色权限管理
qq_51386003的博客
08-22 5181
RBAC（Role-Based Access Control，基于角色的访问控制），就是用户通过角色与权限进行关联。简单地说，一个用户拥有若干角色，每一个角色拥有若干权限。这样，就构造成“用户-角色-权限”的授权模型。在这种模型中，用户与角色之间，角色与权限之间，一般者是多对多的关系。可以看出角色表起到了一个承接的作用把权限下发给每一个角色，而用户可以选择角色来间接的获取权限User（用户）：每个用户都有唯一的UID识别，并被授予不同的角色Role（角色）：不同角色具有不同的权限。
构建安全小程序：RBAC思想下的权限控制方案
luhanglh的博客
10-10 1094
RBAC（Role-Based Access Control，基于角色的访问控制）是一种广泛应用于计算机系统和网络安全的访问控制机制。它的核心思想是通过定义角色，将权限与角色关联，再将角色赋予用户，从而简化权限管理。简单一点来说就是把权限绑定到角色上，在把角色分配给用户,来实现对系统资源的访问控制。一个用户可以拥有多个角色，一个角色又可以拥有若干权限，这样就构成了用户-角色-权限的授权模型系统中的实体，通常是人或进程，需要访问系统资源。（指的是系统的实际使用者。一组权限的集合。
基于RBAC权限管理模型的实现
02-12
本资源是基于RBAC权限管理模型思想实现的完整JAVA代码，有数据库脚本，对于基于RBAC思想的开发具有很好的启发与帮助作用。
SSH.rar_SSH-RBAC_java web_spring_ssh_ssh项目
09-14
这个SSH.rar文件中的SSH-RBAC项目是一个基于这三个框架的实战应用，主要目标是实现基于角色的访问控制（Role-Based Access Control，RBAC）功能。在这个项目中，开发者使用了Struts2作为MVC框架，Spring来管理依赖并...
RBAC.zip_-baijiahao_MYSQL_RBAC
09-15
【MySQL RBAC数据库设计】 在IT领域，特别是数据库管理和系统安全方面，RBAC（Role-Based Access Control，基于角色的访问控制）是一种常见的权限管理模型。MySQL作为广泛应用的关系型数据库管理系统，支持灵活的...
ChinaMobile.rar_ChinaMobile_5655_RBAC_php 管理系统_权限管理系统_管理系统
09-23
RBAC是一种广泛采用的权限管理系统设计模式，它的核心理念是将用户的权限与特定的角色关联起来。在ChinaMobile系统中，角色可以理解为用户的不同职能或职责，如管理员、普通员工等。每个角色预定义了一组操作权限，...
md.rar_MD-RBAC_MD5 JAVA_MD算法_md5_md5算法
09-24
MD5（Message-Digest Algorithm 5）是一种广泛使用的哈希函数，由计算机科学家Ronald Rivest在1991年设计。它能够将任意长度的数据转换为固定长度的128位（16字节）的摘要，通常以32个十六进制数字的形式表示。在...
rbac.rar_JAVA 系统_RBAC_s2sh_ui_权限管理系统
09-23
RBAC模型是一种有效的权限管理模式，它的核心思想是通过角色来定义用户的权限。在RBAC中，用户通过关联角色获取操作权限，而非直接赋予用户具体的权限。这种模式提高了权限管理的灵活性和安全性，降低了管理成本。 ...
RBAC的基本的理解
m0_45259333的博客
11-08 889
RBAC的概念 基于角色的权限访问控制(Role-Based Access Control)作为传统访问控制(自主访问，强制访问)的有前景的代替受到广泛的关注。在RBAC中，权限与角色相关联，用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理rbac: 一种数据库设计思想,根据设计数据库设计方案,完成项目的权限控制. 权限:具备操作某个事务的能力 角色:一系列权限的集合 [2]权限的使用情景 2.1 不同用户登录后看到的菜单是不一样的. 2.2 不同用户看到的页面效果不一样 2.2.
RBAC 权限入门
daxi1047的博客
10-08 233
RBAC 权限入门 RBAC概念 RBAC：Role Based Access Control，核心是用户只和角色关联，而某角色可以拥有各种各样的权限并可继承。 RBAC白话介绍 RBAC有很多模型，最简单的就是Core RBAC。说白了就是User用户, Role角色, Permission许可 三个对象。 l 角色有多个操作许可 l ...
什么是RBAC
热门推荐
qq_45874107的博客
08-21 6万+
一、RBAC是什么 1、RBAC模型概述 RBAC模型（Role-Based Access Control：基于角色的访问控制）模型是20世纪90年代研究出来的一种新模型，但其实在20世纪70年代的多用户计算时期，这种思想就已经被提出来，直到20世纪90年代中后期，RBAC才在研究团体中得到一些重视，并先后提出了许多类型的RBAC模型。其中以美国George Mason大学信息安全技术实验室（LIST）提出的RBAC96模型最具有代表，并得到了普遍的公认。 RBAC认为权限授权的过程可以抽象地概括为：Who
RBAC设计思想--Day3
IT小浪
07-31 478
一：RBAC简介 1：RBAC中文名称：基于角色的访问控制 1.1：作用：实现访问控制 1.2：角色 2：英文名称：Role-Based Access Control 3：解释：一种思想。根据RBAC思想进行数据库设计，根据数据库设计更好的完成权限控制 4：权限控制常用分类 4.1：菜单功能 4.2：url控制（控制访问不同的控制器） 5：发展历史 5.1：最开始 5.1.1...
RBAC（角色访问控制）的基本思想
weixin_33981932的博客
12-20 210
RBAC（角色访问控制）的基本思想可简单地用图1来表示，即把整个访问控制过程分成两步：访问权限与角色相关联，角色再与用户关联，从而实现了用户与访问权限的逻辑分离。由于RBAC实现了用户与访问权限的逻辑分离，因此它极大的方便了权限管理。例如，如果一个用户的职位发生变化，只要将用户当前的角色去掉，加入代表新职务或新任务的角色即可，角色/权限之间的变化比角色/用户关系之间...
扩展el-table，实现当showOverflowTooltip时，鼠标可移入tooltip功能
最新发布
Bitter的博客
11-01 363
1.在utils里创建elTable.js。2.在main.js中引入 并绑在vue上。
基于SSM+VUE历史车轮网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
卓越软件开发的博客
11-01 831
源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿部署教程+代码讲解+代码时间修改教程。
vue-i18n国际化多国语言i18n国际语言代码对照表
aming小老弟
10-31 837
uniapp是自带有i18n这个插件需要自己去给每一个需要国际化的字符去手动配置key，所以如果是已经完成的项目可能工作量就稍微有点大了第一步：语言命名是有规范的不能乱取名，具体可以参考国际语言代码i18n国际语言代码对照表zh_CN 中文(简体) 中国zh_TW 中文(繁体) 中国台湾pt_PT 葡萄牙语 葡萄牙ja_J...
信息化背景下的人力资源管理系统设计与J2EE应用
本篇硕士学位论文《人力资源管理系统设计与实现》由山东大学的张森撰写，专注于软件工程专业，目标是在信息时代背景下提升企业的人力资源管理水平。作者在研究中强调了人力资源管理系统在企业管理平台（EMP）中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值