当前位置: 首页 > 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;关…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...