vue权限管理——按钮控制

1.按钮根据后端返回数据决定展示与否

根据right中的数据对应增删改查按钮

const menuList = [{'id': 1, path:'/uploadSpec','authName': "上传spec", icon: 'User', children:[], rights:['view','add','edit','delete']},{'id': 2, path:'/showSpec', 'authName': "Spec预览", icon: 'DataAnalysis',children:[], rights:['view','add','edit','delete']},{'id': 3, path:'/generateTxt', 'authName': "生成测试数据", icon: 'DataAnalysis',children:[], rights:['view','add','edit','delete']},{'id': 4, path:'/generateCronjob', 'authName': "生成转码程序", icon: 'Promotion',children:[], rights:['view','add','edit','delete']},{'id': 5, path:'/pdfCompare', 'authName': "PDF文档对比", icon: 'DocumentCopy',children:[], rights:['view','add','edit','delete']},{'id': 6, path:'/resourceUpdate', 'authName': "资源更新管理", icon: 'Management',children:[], rights:['view','add','edit','delete']},{'id': 7, path:'/generateTestCase', 'authName': "自动生成ST/SIT案例", icon: 'Files',children:[], rights:['view','add','edit','delete']},{'id': 8, path:'/userManagement', 'authName': "用户管理", icon: 'User', rights:['view']},{'id': 9, path:'/roleManagement', 'authName': "角色管理", icon: 'Stamp', rights:['view']},
]

2.在设置动态路由时,将rights权限数据设置到路由元数据中meta

 initDynamicRoutes给用户对应的router中动态添加meta元数据后,permission.js中通过router.currentRoute就可以获取

export const initDynamicRoutes = async () => {const menuList = Store.state.user.menuList;;const rights = Store.state.user.rights;;menuList.length > 0 && menuList.forEach(item => {if (item.path) {const temp = routeMapping[item.path];// 动态添加rights到meta中,使用自定义指令时通过rights鉴别其是否有该权限temp.meta.rights = item.rights;router.addRoute("Home", temp);}});router.addRoute({ name: 'NotFound', path: '/404', title: "页面不存在", component: NotFound });router.addRoute({ path: '/:pathMatch(.*)', redirect: '/404' });
}

3.按钮上通过自定义指令控制

directives/permission.js

获取路由元数据中的rights权限和按钮上的action记录权限做比较:如果包含则有该权限,否则无权限,进行删除元素或者设置disabled

import router from "@/route/route"
import { nextTick } from 'vue'export const vHas = {created(el, binding, vnode, prevVnode) {let metaRights = router.currentRoute.value.meta.rights;let action = binding.value.action;let effect = binding.value.effect;if (!metaRights.includes(action)) {// 注意要使用nextTick,才能立即修改DOMnextTick(() => {if (effect === "disabled") {el.ariaDisabled = 'true';el.classList.add('is-disabled')} else {if (el.parentNode)el.parentNode.removeChild(el)elseel.remove();}});}}
}

4.页面中使用v-has指令

<template>
<div><el-button type="primary" v-has="{action:'add',effect:'disabled'}">增加角色</el-button><el-button type="success" v-has="{action:'edit'}">修改角色</el-button><el-button type="info" v-has="{action:'view'}">查看角色</el-button><el-button type="warning" v-has="{action:'delete',effect:'disabled'}">删除角色</el-button>
</div></template>
<script setup>
import { vHas } from "@/directives/permission"</script>

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

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

相关文章

edge浏览器进行qq截图过保爆决过程

edge浏览器进行qq截图过保解决过程 参考&#xff1a;电脑截屏曝光特别高怎么解决&#xff1f; - 知乎 问题展示 饱和度过高&#xff0c;刺眼 1. 在chrome地址栏输入chrome://flags/ 2. 在页面的搜索栏搜索force color profile 3. 在选项中选择所对应的颜色管理。&#xff08…

简单着色器编写(中下)

这篇我们来介绍另一部分函数。 static unsigned int CreateShader(const std::string& vertexShader, const std::string& fragmentShader) {unsigned int program glCreateProgram();unsigned int vs CompileShader(GL_VERTEX_SHADER,vertexShader);unsigned int f…

数据库为什么使用B+树而不是B树做索引

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

34、springboot切换内嵌Web服务器(Tomcat服务器)与 生成SSL证书来把项目访路径从 HTTP 配置成 HTTPS

知识点1&#xff1a;springboot切换内嵌Web服务器&#xff08;Tomcat服务器&#xff09; 知识点2&#xff1a;生成SSL证书来把项目访路径从 HTTP 配置成 HTTPS ★ Spring Boot默认的Web服务器&#xff08;Tomcat&#xff09; ▲ 基于Servlet的应用&#xff08;使用Spring MV…

使用VSCode SSH实现公网远程连接本地服务器开发的详细教程

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…

把Android手机变成电脑摄像头

一、使用 DroidCam 使用 DroidCam&#xff0c;你可以将手机作为电脑摄像头和麦克风。一则省钱&#xff0c;二则可以在紧急情况下使用&#xff0c;比如要在电脑端参加一个紧急会议&#xff0c;但电脑却没有摄像头和麦克风。 DroidCam 的安卓端分为免费的 DroidCam 版和收费的 …

【每日一题】1267. 统计参与通信的服务器

【每日一题】1267. 统计参与通信的服务器 1267. 统计参与通信的服务器题目描述解题思路 1267. 统计参与通信的服务器 题目描述 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有…

python进行数据分析:数据预处理

六大数据类型 见python基本功 import numpy as np import pandas as pd数据预处理 缺失值处理 float_data pd.Series([1.2, -3.5, np.nan, 0]) float_data0 1.2 1 -3.5 2 NaN 3 0.0 dtype: float64查看缺失值 float_data.isna()0 False 1 …

Kotllin实现ArrayList的基本功能

前言 上次面试时&#xff0c;手写ArrayList竟然翻车&#xff0c;忘了里面的扩容与缩容的条件&#xff0c;再次实现一次&#xff0c;加深印象 源码讲了什么 实现了List列表和RandomAccess随机访问接口List具有增删改查功能&#xff0c;RandomAccess支持下标访问内部是一个扩容…

java使用ExcelExportUtil.exportBigExcel导出大文件(非分页)

网上看到很多使用这个方法处理的时候&#xff0c;大多使用的分页进行查询&#xff0c;但是当遇到特殊的产品需求&#xff0c;比如A类型数据&#xff0c;多条记录就显示多行&#xff0c;B类型的要求存在多条记录时&#xff0c;就进行汇总后只显示一条&#xff0c;这就导致无法使…

Oracle给表空间添加容量

假如给SYSTEM表空间添加 查看文件位置和容量&#xff1a;Select * FROM DBA_DATA_FILES; FILE_NAME就是要修改的文件 查看每一个表空间的容量&#xff0c;单位MB&#xff1a; SELECT t.tablespace_name, round(SUM(bytes / (1024 * 1024)), 0) ts_size FROM dba_tablespaces…

大数据扫盲(2): 数据分析BI与ETL的紧密关系——ETL是成功BI的先决条件

着业务的发展每个企业都将产生越来越多的数据&#xff0c;然后这些数据本身并不能直接带来洞察力并产生业务价值。为了释放数据的潜力&#xff0c;数据分析BI&#xff08;商业智能&#xff09;成为了现代企业不可或缺的一部分。然而&#xff0c;在数据分析的背后&#xff0c;有…

详解多目标跟踪(MOT)算法中的Kalman滤波

Kalman滤波算法的原理可以参考&#xff1a; 卡尔曼滤波理解 以sort算法为例&#xff0c; 算法中使用到了卡尔曼滤波。 其作用是&#xff1a;通过t-1帧的结果&#xff0c; 通过卡尔曼滤波的predict过程得到目标在t帧的先验估计&#xff0c; 同时在t帧通过检测模型得到检测结果&…

【Linux网络】TCP UDP socket HTTP webSocket之间的区别

目录 一、OSI & TCP/IP模型 二、几者之间的关系 三、HTTP 四、Socket 五、WebSocket 5.1、WebSocket 优点 一、OSI & TCP/IP模型 首先我们要了解OSI七层模型&#xff0c;和预支对应的TCP/IP 四层的模型。 用下面的图可以看出&#xff0c;TCP UDP 工作在传输层&…

前端面试:【新技术与趋势】WebAssembly、Serverless、GraphQL

在不断演进的技术领域中&#xff0c;WebAssembly、Serverless和GraphQL都是备受关注的新技术和趋势。它们改变了软件开发、部署和数据传输的方式&#xff0c;为开发者提供了更多的选择和灵活性。 1. WebAssembly&#xff08;Wasm&#xff09;&#xff1a; 简介&#xff1a; Web…

Word导出创建Adobe PDF其中emf图片公式马赛克化及文字缺失

软件版本 Word 2021 Visio 2019 Adobe Acrobat Pro 2020 问题描述 公式马赛克化&#xff0c;是指在Word中使用MathType编辑的公式&#xff0c;然后在Visio中使用图片(增强型图元文件)形式得到的粘贴对象&#xff0c;效果如下 文字缺失&#xff0c;是指Word导出→创建Adobe P…

一文学会lua脚本

文章目录 0.前言背景应用 1. 学习大纲1. 学习基本语法&#xff1a;2. 理解函数和模块&#xff1a;3. 深入数据结构&#xff1a;4. 高级特性和技巧&#xff1a;5. 实践项目&#xff1a; 2. Lua脚本2.1 学习基本语法2.2 理解函数和模块2.3 深入数据结构2.4 高级特性和技巧 3. 高级…

Hbase分布式安装

一、环境准备 启动zookeeper 启动hdfs 二、安装 上传安装包 1、解压 tar -zxf hbase-2.2.2-bin.tar.gz -C /opt/installs/2、更名 mv hbase-2.2.2/ hbase3、配置环境变量 [roothadoop11 conf]# vim /etc/profile export HBASE_HOME/opt/installs/hbase export PATH$PATH:$…

如何使用Linux文件系统?

为了让你更好地理解Linux文件系统&#xff0c;我要告诉你一些非常非常重要的知识点&#xff0c;确保你能够顺利地在这个庞大的世界中游走。 首先&#xff0c;你需要了解Linux中的基本概念。这个系统不像你的手机或者电脑&#xff0c;它是一个“文本”驱动的操作系统。这里的所…

Spring Boot中如何编写优雅的单元测试

单元测试是指对软件中的最小可测试单元进行检查和验证。在Java中&#xff0c;单元测试的最小单元是类。通过编写针对类或方法的小段代码&#xff0c;来检验被测代码是否符合预期结果或行为。执行单元测试可以帮助开发者验证代码是否正确实现了功能需求&#xff0c;以及是否能够…