当前位置: 首页 > news >正文

聊一聊vue如何实现角色权限的控制的

大家好,我是G探险者。
关于角色与权限控制,通常是分为两大类:一种是菜单权限;一种是操作权限。

菜单权限是指,每个角色对应着可以看到哪些菜单,至于每个菜单里面的每个按钮,比如增删改查等等这类按钮控制不到这个粒度。简单来说就是控制看到的菜单多少。

操作权限是指,每个角色对于所看到的数据具有哪些操作权限,就是增删改查这些具体的操作,简单来说就是读写权限。

一套完整的角色访问控制:是应该包含这两种控制的。通常二者也是交叉在一起进行访问控制的。

Vue.js 提供了灵活的方式来实现角色权限控制,本文将深入探讨如何通过 Vue 实现角色权限控制,特别是基于按钮级别的权限控制。

1. 角色权限控制的概述

角色权限控制可以分为两个层面:

  • 菜单权限:决定用户能看到哪些菜单和页面。
  • 操作权限:控制用户对数据的操作权限,例如增、删、改、查等。

在 Vue 中实现角色权限控制,通常是在前端页面中动态渲染菜单和按钮,并通过与后端权限数据的对比,来决定用户是否有权限显示和操作这些元素。本文重点讨论如何实现按钮级别的权限控制,即根据用户的角色来控制他们能执行哪些操作。

2. 基本思路

角色权限控制的核心思想是:

  • 用户权限通过后端接口返回,前端根据这些权限数据来决定页面中哪些按钮显示,哪些禁用,哪些完全移除。
  • Vue 的动态渲染机制允许我们根据不同用户的权限来动态控制按钮的展示和行为,确保用户只能看到和操作他们有权限访问的功能。

3. Vue 实现角色权限控制

3.1 权限控制插件:v-perm-code

为了简化权限控制的实现,我们可以创建一个自定义 Vue 指令 (v-perm-code),该指令根据当前用户的权限动态控制按钮的显示、禁用或移除。

3.1.1 指令的基本实现

首先,我们通过 Vue 的 Vue.directive 注册一个名为 perm-code 的自定义指令,该指令在绑定时检查每个按钮的权限,并根据用户的权限动态调整按钮的状态。

import { isObjectLike } from "lodash-es";
import { btnPermRemove, btnPermControl } from "globalSettings";export default {install(Vue) {Vue.directive("perm-code", {async bind(el, binding, vnode) {// 开发模式下是否关闭按钮级别权限控制if (!btnPermControl) return;let { value: permCode } = binding;  // 获取按钮的权限码if (!permCode) return false;  // 如果没有权限码则退出const dom = el;const _store = vnode.context.$store;let pathnameCurrent = vnode.context.$route.path;if (!pathnameCurrent) pathnameCurrent = location.pathname;const pathnameStore = _store.state.router.pathname;// 动态获取权限码if (isObjectLike(permCode)) {permCode = Vue.filter(permCode.filter)(permCode.value);}// 是否显示无权限的按钮但禁用const permShow = el.getAttribute("perm-show") === "true";// 从store获取权限码列表if (pathnameCurrent && pathnameStore !== pathnameCurrent) {await _store.dispatch("router/getCurrentPermList", pathnameCurrent);}const permCodeList = _store.getters["router/permCodeList"];// 根据权限控制按钮的显示和状态dom.setAttribute("perm-code", permCode);if (permCodeList.includes(permCode)) {dom.style.display = "inline-block";dom.title = `有权限按钮: ${permCode}`;} else if (permShow) {dom.style.display = "inline-block";dom.setAttribute("disabled", "disabled");} else {dom.title = `无权限按钮: ${permCode}`;if (btnPermRemove) {setTimeout(() => {dom.parentNode.removeChild(el);  // 移除无权限按钮}, 0);} else {dom.style.display = "inline-block";}}},});},
};
3.1.2 指令的核心逻辑
  • 权限码 (permCode):每个按钮的权限码,通常由后端返回并与前端匹配,用于判断用户是否有权限执行某个操作。
  • 权限列表 (permCodeList):从 Vuex 中获取当前用户的权限列表,这些权限码来自后端接口。
  • 按钮显示/禁用/移除
    • 如果用户有权限(即权限码存在于 permCodeList 中),按钮显示并且可以点击。
    • 如果没有权限,但 perm-show="true",则按钮仍然显示,但禁用。
    • 如果没有权限且 perm-show 不为 true,按钮会被从 DOM 中移除(如果 btnPermRemove 为 true)。

3.2 按钮与权限结合:btnPermCode

在页面组件中,每个按钮都包含一个 btnPermCode 属性,该属性指定了与之关联的权限码。例如:

data() {return {buttonList: [{label: "新增",type: "add",click: this.openAdd,btnPermCode: "add",  // 权限码},{label: "删除",type: "delete",click: this.clickDelete,btnPermCode: "delete",  // 权限码},{label: "发布",type: "publish",click: this.clickPublish,btnPermCode: "publish",  // 权限码},// 更多按钮...],};
},

3.3 Vuex 与权限列表管理

用户的权限列表存储在 Vuex 中,通过后端接口动态获取。当用户访问一个页面时,Vuex 会存储与该页面相关的权限码,指令 v-perm-code 会通过 Vuex 获取这些权限,并根据权限决定按钮的展示。

const permCodeList = _store.getters["router/permCodeList"];

通过这种方式,前端可以确保根据当前用户的角色,动态显示和操作相关功能。

3.4 实际应用

在实际应用中,通常会有以下几种按钮操作:

  • 增删改查:用户可以根据权限执行不同的数据操作,如新增、删除、编辑、查看等。
  • 批量操作:例如批量删除、批量发布,前端根据权限判断是否显示这些操作按钮。
  • 导入导出:当用户拥有导入导出的权限时,显示相应的按钮,否则不显示。

4. 总结

通过 Vue 的自定义指令和 Vuex 的权限管理,我们可以在前端实现细粒度的角色权限控制。v-perm-code 指令结合 btnPermCode 和权限码列表,实现了基于权限的按钮显示、禁用、移除等功能。后端返回的权限数据与前端进行匹配,确保用户只能访问和操作他们有权限的功能。这种方式使得前端权限控制更加灵活和可维护,适用于大多数基于角色的权限管理系统。

通过这种方式,我们可以在 Vue 中高效地实现角色权限管理,确保不同角色的用户只看到和操作他们有权限的页面和功能,提高了系统的安全性和用户体验。

相关文章:

聊一聊vue如何实现角色权限的控制的

大家好,我是G探险者。 关于角色与权限控制,通常是分为两大类:一种是菜单权限;一种是操作权限。 菜单权限是指,每个角色对应着可以看到哪些菜单,至于每个菜单里面的每个按钮,比如增删改查等等这类…...

Python连接MySQL数据库图文教程,Python连接数据库MySQL入门教程

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言1. 环境准备1.1安装 Python1.2选择开发环境1.3安装 MySQL 数据库1.4 安装 pymysql 库 2. 连接数据库3. 数据库基本操作3.1 创建数据库3.2 创建表3.3 插入数据3.…...

懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)

1.合集懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制):https://www.bilibili.com/video/BV1M6rdYEEog/ 备注: 1.本地离线卡密采用最安全的非对称加解密技术,设备id采用最安全多重混合加密不可逆技术生成&…...

天 锐 蓝盾终端安全管理系统:办公U盘拷贝使用管控限制

天 锐 蓝盾终端安全管理系统以终端安全为基石,深度融合安全、管理与维护三大要素,通过对桌面终端系统的精准把控,助力企业用户构筑起更为安全、稳固且可靠的网络运行环境。它实现了管理的标准化,有效破解终端安全管理难题&#xf…...

LeetCode 2595.奇偶位数:位运算

【LetMeFly】2595.奇偶位数:位运算 力扣题目链接:https://leetcode.cn/problems/number-of-even-and-odd-bits/ 给你一个 正 整数 n 。 用 even 表示在 n 的二进制形式(下标从 0 开始)中值为 1 的偶数下标的个数。 用 odd 表示…...

一周学会Flask3 Python Web开发-response响应格式

锋哥原创的Flask3 Python Web开发 Flask3视频教程: 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在HTTP响应中,数据可以通过多种格式传输。大多数情况下,我们会使用HTML格式,这也是Flask中…...

uni-app开发app时 使用uni.chooseLocation遇到的问题

问题一:不显示 问题二:选择地址列表一直在加载中 因为 uni-app 接口文档 中已经说明,使用腾讯的话需要开启云服务,具体可看官网,这就是为什么使用时直接不显示的原因,所以我使用的高德,但又出现…...

Android Hal AIDL 简介 (一)

Android 接口定义语言 (AIDL) 是一款可供用户用来抽象化 IPC 的工具。 以在 .aidl 文件中指定的接口为例,各种构建系统都会使用 aidl 二进制文件构造 C++ 或 Java 绑定,以便跨进程使用该接口(无论其运行时环境或位数如何)。 AIDL 可以在 Android 中的任何进程之间使用:在…...

鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图(@ohos.arkui.componentSnapshot (组件截图) )

前言: 这个模块可以截取组件的图片,无论组件是否已加载。截图只能拍到组件本身的大小区域。 如果组件或其子组件画得超出了自己的区域,超出的部分不会出现在截图中。截图不会拍到与当前组件平级的(兄弟)组件。 模块简…...

华为昇腾910b服务器部署DeepSeek翻车现场

最近到祸一台HUAWEI Kunpeng 920 5250,先看看配置。之前是部署的讯飞大模型,发现资源利用率太低了。把5台减少到3台,就出了他 硬件配置信息 基本硬件信息 按照惯例先来看看配置。一共3块盘,500G的系统盘, 2块3T固态…...

[展示]Webrtc NoiseSuppressor降噪模块嵌入式平台移植

最近在尝试把WebRtc的NoiseSuppressor模块移植到嵌入式平台,现在已经移植了,尝试了下效果,降噪效果很显著,噪声带被显著抑制了 降噪前: 降噪后:...

golang内存泄漏

golang也用了好几年了,趁着有空 整理归纳下,以后忘了好看下 一般认为 Go 10次内存泄漏,8次goroutine泄漏,1次是真正内存泄漏,还有1次是cgo导致的内存泄漏 1:环境 go1.20 win10 2:goroutine泄漏 单个Goroutine占用内存&…...

安科瑞能源物联网平台助力企业实现绿色低碳转型

安科瑞顾强 随着全球能源结构的转型和“双碳”目标的推进,能源管理正朝着智能化、数字化的方向快速发展。安科瑞电气股份有限公司推出的微电网智慧能源管理平台(EMS 3.0),正是这一趋势下的创新解决方案。该平台集成了物联网&…...

Android Http-server 本地 web 服务

时间:2025年2月16日 地点:深圳.前海湾 需求 我们都知道 webview 可加载 URI,他有自己的协议 scheme: content:// 标识数据由 Content Provider 管理file:// 本地文件 http:// 网络资源 特别的,如果你想直接…...

腾讯的webUI怎样实现deepseek外部调用 ; 腾讯云通过API怎样调用deepseek

腾讯的webUI怎样实现deepseek外部调用 目录 腾讯的webUI怎样实现deepseek外部调用腾讯云通过API怎样调用deepseekhtml方式curl方式python方式腾讯云通过API怎样调用deepseek 重点说明:不需要SK,仅仅使用ip和端口号 html方式 <!DOCTYPE html> <html lang="e…...

DeepSeek VS ChatGPT-速度、准确性和成本

撰写本文时马斯克刚刚发布了聊天机器人Grok2&#xff0c;10万张算卡体现了马斯克的财大气粗。近年来&#xff0c;人工智能模型取得了长足的发展&#xff0c;每个模型都力求在速度、准确性和成本效率方面超越其他模型。在本文中&#xff0c;我将深入研究比较中美在AI的焦点模型上…...

内外网隔离文件传输解决方案|系统与钉钉集成+等保合规,安全提升70%

一、背景与痛点 在内外网隔离的企业网络环境中&#xff0c;员工与外部协作伙伴&#xff08;如钉钉用户&#xff09;的文件传输面临以下挑战&#xff1a; 1. **安全性风险**&#xff1a;内外网直连可能导致病毒传播、数据泄露。 2. **操作繁琐**&#xff1a;传统方式需频繁切…...

Linux基础开发工具的使用(apt、vim、gcc、g++、gdb、make、makefile)

Linux软件包管理器–apt Linux安装软件的方式 在Linux下安装软件的方法有以下三种&#xff1a; 下载到程序的源代码&#xff0c;自己编译出可执行程序获取deb安装包、然后使用dpkg命令安装。&#xff08;不解决依赖关系&#xff09;通过apt进行安装软件。 小知识点&#xf…...

最新版IDEA下载安装教程

一、下载IDEA 点击前往官网下载 或者去网盘下载 点击前往百度网盘下载 点击前往夸克网盘下载 进去后点击IDEA 然后点击Download 选择自己电脑对应的系统 点击下载 等待下载即可 二、安装IDEA 下载好后双击应用程序 点击下一步 选择好安装目录后点击下一步 勾选这两项后点击…...

MacOS 15.3 卸载系统内置软件

1、关闭系统完整性&#xff08;SIP&#xff09; 进入恢复模式(recovery) 如果您使用的是黑苹果或者白苹果&#xff0c;可以选择 重启按住CommandR 进入&#xff0c;如果是M系列芯片&#xff0c;长按开机键&#xff0c;进入硬盘选择界面进入。 我是MacMini M4芯片&#xff0c;关…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...