vue3 实现按钮权限管理

在做后台管理系统时,经常会有权限管理的功能,这里来记录一下关于按钮权限管理的实现方法

1、自定义指令 v-permission。新建js文件用来写指令代码。

export default function btnPerms(app) {app.directive('permission', {mounted(el, binding) {if (!permsJudge(binding.value)) {el.parentNode.removeChild(el);}function permsJudge(value){let perms = JSON.parse(localStorage.getItem('perms')) || [];for (let item of perms) {if (item === value) {return true;}}return false;}}});
}

2、在main.js里注入;

3、在登录后台时获取后端返回的用户权限数据,并且存入到本地;我这边是把获取数据的接口放在vuex中的

async _getUserPermission(contxt,payload){let res = await getUserPermission();if(res && res.data){let {code,data,message} = res.data;if(code == 200){localStorage.setItem('perms',JSON.stringify(data.resourceList));contxt.commit('getPerObj',data.resourceList);}else {reject(message)}}
}

然后在登录页面调用这个方法;也可以直接在登录页面获取数据,这里就不赘述了。

 获取的数据大概是这个格式

 4、在需要判断权限的按钮调用指令;

 这样就可以实现按钮权限了,如有问题,欢迎留言!!

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

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

相关文章

vscode C++17便捷配置教程(懒人版)

环境链接 以上是已经配置好的c17环境链接,直接下载解压即可 下载解压之后按照msys64-mingw64-bin路径打开 然后单击该路径右方空白区域可直接复制路径 然后点击开始菜单搜索“环境变量“并打开(如图) 然后点击右下方环境变量 之后双击下方…

22、WEB漏洞-文件上传之内容逻辑数组绕过

目录 内容及其他演示案例:Uploadlabs-pass13-20关卡测试CVE-2017-12615-上传-Tomcat中间件解析漏洞配合文件上传测试 图片一句话制作方法 copy 1.png /b shell.php /a webshell.jpg也可以用nopad把图片打开,在末尾添加一句话后门 文件头检测 图像文件信…

低压风机单片机方案

低压风机通常由电机、转子、机壳、进气管、出气管、齿轮和减速机等组成。电机带动转子旋转,旋转的转子带动齿轮和减速机转动,进而形成空气被吸入转子内部,通过旋转而产生的离心力把气体压缩,并将气体排出。 低压风机方案的主控型…

C++11并发与多线程笔记(10) future其他成员函数、shared_future、atomic

C11并发与多线程笔记(10) future其他成员函数、shared_future、atomic 1、std::future 的成员函数1.1 std::future_status 2、std::shared_future:也是个类模板3、std::atomic原子操作3.1 原子操作概念引出范例:3.2 基本的std::at…

Springboot+mybaits-plus+h2集成产生的一些问题(not found tables)

一、问题描述 org.h2.jdbc.JdbcSQLSyntaxErrorException: Table "EP_MAPPING" not found (this database is empty);大概就是说在引入mybatis-plus的依赖后,找不到数据库找不到表的问题。 排查方向:在引入mybatish2时,是可以正常…

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint

1、运行好后自动打开浏览器 package.json中 vite后面加上 --open 2、安装eslint npm i eslint -D3、运行 eslint --init 之后,回答一些问题, 自动创建 .eslintrc 配置文件。 npx eslint --init回答问题如下: 使用eslint仅检查语法&…

解决出海痛点:亚马逊云科技助力智能涂鸦,实现设备互联互通

今年6月,《财富》(中文版)发布“2023年值得关注的中国出海主力”盘点,在七个赛道中聚焦不断开拓新领域、影响力与日俱增的出海企业。涂鸦智能顺利入选,作为一家全球化公司,相比于产品直接到海外销售的传统出…

wazuh初次理解-8-23

一、wazuh配置: 1、进入官网下载OVA启动软件: Virtual Machine (OVA) - Installation alternatives 2、进入虚拟机进行配置: 3、登录提示: 4、将网络连接模式更改为NAT,否则不能上网; 4、重启网络&#…

ahooks.js:一款强大的React Hooks库及其API使用教程(四)

一、ahooks.js简介二、ahooks.js安装三、继续ahooks.js API的介绍与使用教程51. useResetState52. useUpdateLayoutEffect53. useDeepCompareLayoutEffect54. useRafInterval55. useRafTimeout56. useTimeout57. useLockFn58. useDocumentVisibility59. useDrop60. useDrag 一、…

AI大模型潮水中,医疗数字化加速「求解」

蝴蝶挥动翅膀,医疗行业每个角落开始连锁反应,曾经被忽视的问题也愈发明显。但与之对应的是,对数字化和AI大模型的价值认可,在中国医疗赛道也正在加速来临。 作者|斗斗 编辑|皮爷 出品|产业家 重庆市某地方人民医院&#xf…

如何实现element UI中table操作栏更多按钮的展示与折叠?

解决思路: ​ 直接使用elementUI文档上Popover 弹出框组件 废话不多说,直接上代码吧 <el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable" @selection-change="handleSelecti…

【C++】做一个飞机空战小游戏(十二)——游戏源代码、音效、图标等资源文件

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…

微信小程序创建项目以及注意事项

1.申请账号并完善信息 2.下载安装开发工具 3.开发小程序 4.上传代码 5.提交审核 6.发布 创建项目 根据需求选择模板&#xff0c;也可以不选择模板 创建完毕之后 进入页面点击终端 然后新建终端 输入npm init 一直按回车即可 安装成功 出现package.json 如何使用组件&#x…

Android 12系统源码_输入事件(一)HOME按键事件响应流程

前言 本文我们现在主要分析一下android系统对HOME按键的响应过程&#xff0c;HOME按键事件是属于系统级别的按键事件监听&#xff0c;而在Android系统中&#xff0c;系统级别的按键处理逻辑都在PhoneWindowManager这个类中。 一、interceptKeyBeforeDispatching方法分发按键事…

IC芯片 trustzone学习

搭建Airplay TA环境需要在IC的TrustZone中进行。TrustZone是一种安全技术&#xff0c;用于隔离安全和非安全环境&#xff0c;并保护敏感文件。在TrustZone中&#xff0c;我们需要编写一个叫做TA&#xff08;Trusted Application&#xff09;的应用程序来控制这些私密文档。 &am…

SpringBoot一些困惑及梳理

Spring中常用的classpath前缀到底指向哪里? classpath实际就是和java命令行运行时指定的classpath是同一个概念&#xff0c;在ideamaven中也就是指向target/classes目录。不要被网上哪些复制粘贴的文章所迷惑。classpath: 和 classpath*: 到底什么区别? classpath: 实际就是当…

Python土力学与基础工程计算.PDF-土的三项组成

5.3 Python求解 Python 求解代码如下&#xff1a; 1. # 定义已知参数 2. G_s 2.7 # 比重 3. w 0.2 # 含水量 4. e 0.6 # 孔隙比 5. gamma_w 9.81 # 水的重度 6. 7. # 根据公式计算饱和度 8. S_r G_s * w / e 9. print("饱和度为", S_r) 10. 11.…

js将搜索的关键字加颜色

js将搜索的关键字加颜色 使用正则匹配关键字并加入span标签&#xff0c;页面渲染时使用v-html渲染即可 // 文本框内容 let searchCont 测试;const reg new RegExp((${searchCont.value}), g); let data 图片保存测试A; data data.replace(reg, <span style"color:…

vscode+ros开发环境搭建

目录 介绍 前提 vscode安装 vscode插件安装 工作空间准备 打开vscode 创建catkin包 编写cpp代码 编译 运行 启动ros服务 监听话题 启动ros测试 介绍 ros开发是机器人开发中必不可少的工作&#xff0c;语言选择可以是c,也可以是python。工具的话&#xff0c;不能像wi…

基于YOLOv8模型的五类动物目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的五类动物目标检测系统可用于日常生活中检测与定位动物目标&#xff08;狼、鹿、猪、兔和浣熊&#xff09;&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与…