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

前端权限验证之自定义指令v-permission

自定义指令

  • 在前端处理按钮权限
    • 详细代码

在前端处理按钮权限

使用vue自定义指令来v-permission 来控制按钮

详细代码

//index.js文件
import permission from './permission'const install = function(Vue) {Vue.directive('permission', permission)
}if (window.Vue) {window['permission'] = permissionVue.use(install); // eslint-disable-line
}permission.install = install
export default permission
// permission.js文件
import store from '@/store'function checkPermission(el, binding) {const { value } = bindingconst roles = store.getters && store.getters.rolesif (value && value instanceof Array) {if (value.length > 0) {const permissionRoles = valueconst hasPermission = roles.some(role => {return permissionRoles.includes(role)})if (!hasPermission) {el.parentNode && el.parentNode.removeChild(el)}}} else {throw new Error(`need roles! Like v-permission="['admin','editor']"`)}
}export default {inserted(el, binding) {checkPermission(el, binding)},update(el, binding) {checkPermission(el, binding)}
}

在代码中使用

<template><!-- Admin can see this --><el-tag v-permission="['admin']">admin</el-tag><!-- Editor can see this --><el-tag v-permission="['editor']">editor</el-tag><!-- Editor can see this --><el-tag v-permission="['admin','editor']">Both admin or editor can see this</el-tag>
</template><script>
// 当然你也可以为了方便使用,将它注册到全局
import permission from '@/directive/permission/index.js' // 权限判断指令
export default{directives: { permission }
}
</script>

可以使用全局权限判断函数,用法和指令 v-permission 类似。

<template><el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane><el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane><el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
</template><script>
import checkPermission from '@/utils/permission' // 权限判断函数export default{methods: {checkPermission}
}
</script>

相关文章:

前端权限验证之自定义指令v-permission

自定义指令 在前端处理按钮权限详细代码 在前端处理按钮权限 使用vue自定义指令来v-permission 来控制按钮 详细代码 //index.js文件 import permission from ./permissionconst install function(Vue) {Vue.directive(permission, permission) }if (window.Vue) {window[p…...

c++使用条件变量实现生产消费问题(跨平台)

1. 生产者线程 思路&#xff1a;队列满了的情况下, 触发条件变量wait, 等待消费线程消费后唤醒继续生产. void ProducerThreadFunc() {while(1) { while(/* 容器已满 */) { /* 线程等待, 直到消费者消费后唤醒继续执行 */ }/* 生产动作 */ } }2. 消…...

怎么快速搭建BI?奥威BI系统做出了表率

搭建BI系统有两大关键&#xff0c;分别是环境搭建和数仓建设。这两点不管是哪一个都相当地费时费力&#xff0c;那要怎么才能快速搭建BI平台&#xff0c;顺利实现全企业数字化运营决策&#xff1f;奥威BI系统方案&#xff0c;你值得拥有&#xff01; 奥威BI系统方案&#xff0…...

Kafka3.4 SASL/kerberos/ACL 证以及 SSL 加密连接

Kafka3.4 SASL/kerberos ACL 证以及 SSL 加密连接 序 前面我们使用 kafka3.3.1 on zookeeper 的模式进行多网段监听的 kafka 集群&#xff0c;顺便搭建起 kafkaui 后发现一些问题&#xff0c;我们 kafka 集群没有连接认证&#xff0c;万一谁知道了我们的 kafka 连接地址&…...

UE中低延时播放RTSP监控视频解决方案

第1章 方案简介 1.1 行业痛点 在各种智慧城市、智慧社区、智慧水利、智慧矿山等数字孪生项目中&#xff0c;经常使用通UE来开发三维可视化场景。在这些场景中通常都需要把现场的各种监控视频在UE的可视化场景中接入&#xff0c;主要包含海康威视、大华、宇视、华为等众多监控…...

iOS - 开发者账号续订会员资格更换订阅的账号

文章目录 前言开发环境续订会员资格转让账户持有人验证身份1. 实名认证2. 联系信息 更换订阅的账号最后 前言 公司有一个开发者账号快到期了需要续订会员资格&#xff0c;刚注册时是用我自己的个人账号完成的订阅购买。现在想来有点不妥&#xff0c;于是尝试更换用于订阅的账号…...

大数据课程F3——HIve的基本操作

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握HIve的基本SQL语句和注意问题; ⚪ 掌握HIve的表结构; ⚪ 掌握HIve的数据类型; ⚪ 掌握HIve的基础函数和窗口函数; 一、基本SQL 1. SQL的执行方式 1. 通过hive -e的方式来执行指…...

top解析

top - 13:52:26 up 26 days, 20:56, 2 users, load average: 0.00, 0.01, 0.05 当前时间 系统运行时间&#xff0c;格式为时&#xff1a;分 当前登陆用户数2 系统负载&#xff0c;即任务队列的平均长度。三个数值分别为1分钟&#xff0c;5分钟&#xff0c;15分钟前到现在的平均…...

如何让子组件,router-view,呈现左右分布格局

1.用浮动进行浮动布局&#xff0c;定义一个大盒子&#xff0c;把浮动的样式写在公共样式里&#xff08;这里在main.js里定义一下全局布局&#xff09;。 2、能够在右边显示了...

计算机网络—TCP和UDP、输入url之后显示主页过程、TCP三次握手和四次挥手

TCP基本认识 TCP是面向连接的、可靠的&#xff0c;基于字节流的传输层通信协议。 图片来源小林coding 序号&#xff1a;传输方向上字节流的字节编号。初始时序号会被设置一个随机的初始值&#xff08;ISN&#xff09;&#xff0c;之后每次发送数据时&#xff0c;序号值 ISN…...

使用反汇编工具IDA查看发生异常的汇编代码的上下文去辅助分析C++软件异常

目录 1、概述 2、如何使用IDA打开并查看二进制文件的汇编代码 3、在IDA中找到发生崩溃的那条汇编指令的位置 3.1、如何在IDA中找到发生异常的那条汇编指令 3.2、示例 4、阅读汇编代码上下文需要掌握一定的基础汇编知识 5、最后 VC常用功能开发汇总&#xff08;专栏文章列…...

怎么合并多个视频?简单视频合并方法分享

合并多个视频可以将它们组合成一个更长的视频&#xff0c;这对于需要播放多个短视频的情况非常有用。此外&#xff0c;合并视频还可以使视频编辑过程更加高效&#xff0c;因为不必将多个独立的视频文件分别处理。最后&#xff0c;合并视频可以减少文件数量&#xff0c;从而使整…...

webpack基础知识九:如何提高webpack的构建速度?

一、背景 随着我们的项目涉及到页面越来越多&#xff0c;功能和业务代码也会随着越多&#xff0c;相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关&#xff0c;当我们本地开发启动 devServer 或者 build 的时候&#xff0c;如果时间过长&#xff…...

批量改名字序号和前缀

echo off setlocal enabledelayedexpansion set count10 for /f %%i in (dir /b *.jpg,*.png,*.bmp,*.jpeg,*.gif) do ( set /a count1 echo %%i 前缀_!count! rename %%i 前缀_!count!.png ) REM …...

基于Spring Boot的医院预约挂号网站设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的医院预约挂号网站设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java spring…...

Linux命令200例:join将两个文件按照指定的键连接起来分析

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…...

谈谈网络安全

目录 1.概念 2.发展现状 3.主要问题 1.概念 网络安全是指保护计算机网络和其中的数据免受未经授权访问、损坏、窃取或破坏的过程和技术。网络安全涉及预防和检测潜在的威胁和漏洞&#xff0c;并采取措施保护网络的机密性、完整性和可用性。 网络安全的概念包括以下几个方面&am…...

机器学习深度学习——文本预处理

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——序列模型&#xff08;NLP启动&#xff01;&#xff09; &#x1f4da;订阅专栏&#xff1a;机器学习&am…...

Qt实现可伸缩的侧边工具栏(鼠标悬浮控制伸缩栏)

Qt实现可伸缩的侧边工具栏 一直在网上找&#xff0c;发现大多的实现方案都是用一个按钮&#xff0c;按下控制侧边栏的伸缩&#xff0c;但是我想要实现鼠标悬浮在侧边栏的时候就伸出&#xff0c;移开就收缩的功能&#xff0c;也没找到好的参考&#xff0c;所以决定自己实现一个…...

【Spring Boot】拦截器与统一功能处理

博主简介&#xff1a;想进大厂的打工人博主主页&#xff1a;xyk:所属专栏: JavaEE进阶 上一篇文章我们讲解了Spring AOP是一个基于面向切面编程的框架&#xff0c;用于将某方面具体问题集中处理&#xff0c;通过代理对象来进行传递&#xff0c;但使用原生Spring AOP实现统一的…...

效率倍增器:利用快马AI自动生成网络设备批量巡检与健康报告脚本

最近在深圳做网络运维的朋友跟我吐槽&#xff0c;每天要手动巡检几十台网络设备&#xff0c;检查CPU、内存、接口状态这些指标&#xff0c;不仅耗时还容易出错。于是我尝试用InsCode(快马)平台帮他解决这个问题&#xff0c;效果出奇的好。今天就把这个自动化巡检脚本的实现过程…...

【光学】基于matlab偏振光线追迹【含Matlab源码 15265期】

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到海神之光博客之家&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49…...

Omni-Vision Sanctuary集成MySQL数据库:智能图像数据管理与检索实战

Omni-Vision Sanctuary集成MySQL数据库&#xff1a;智能图像数据管理与检索实战 1. 引言&#xff1a;当AI图像生成遇上数据库管理 想象一下这样的场景&#xff1a;你的设计团队每天使用Omni-Vision Sanctuary生成数百张创意图片&#xff0c;但很快发现这些数字资产变得难以管…...

告别运行库安装烦恼:如何用VisualCppRedist AIO一站式解决Windows依赖问题

告别运行库安装烦恼&#xff1a;如何用VisualCppRedist AIO一站式解决Windows依赖问题 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 在使用Windows电脑时&…...

Hotkey Detective:3分钟快速定位Windows热键冲突的终极指南

Hotkey Detective&#xff1a;3分钟快速定位Windows热键冲突的终极指南 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是…...

VideoAgentTrek-ScreenFilter模型压缩与量化教程:在边缘设备上实现轻量部署

VideoAgentTrek-ScreenFilter模型压缩与量化教程&#xff1a;在边缘设备上实现轻量部署 想让一个原本需要强大GPU才能流畅运行的视频分析模型&#xff0c;在树莓派或者Jetson Nano这类小巧的边缘设备上也能跑起来吗&#xff1f;这听起来像是个不可能的任务&#xff0c;但通过模…...

全套R分析代码,空间转录组 + scRNA-seq揭示阿尔茨海默病抗体药机制

&#x1f680;科研不掉发&#xff0c;快来这个地表最强的生信神仙网站&#xff1a;中国银河生信云平台&#x1f449; 立即访问&#xff1a;https://usegalaxy.cn最佳Galaxy生信云平台教程&#xff1a;从入门到精通&#xff08;图文版&#xff09;转录组分析流程和工具大全&…...

NovelAI:从文本生成到内容创作的AIGC实践

1. NovelAI&#xff1a;你的AI创作助手 第一次接触NovelAI时&#xff0c;我正被一篇商业方案折磨得焦头烂额。凌晨三点的咖啡杯旁&#xff0c;这个基于GPT模型的AI工具在15分钟内就帮我完成了初稿框架&#xff0c;那一刻我就知道&#xff0c;内容创作的方式正在被重新定义。Nov…...

Ostrakon-VL-8B在VMware虚拟机中的一站式部署与性能调优

Ostrakon-VL-8B在VMware虚拟机中的一站式部署与性能调优 想在本地隔离环境里跑通一个强大的多模态大模型&#xff0c;比如Ostrakon-VL-8B&#xff0c;但又不想折腾物理机或者担心影响主系统&#xff1f;VMware虚拟机是个不错的选择。不过&#xff0c;在虚拟机里部署AI应用&…...

Qwen3.5-4B-Claude-Opus一文详解:GGUF量化模型在低延迟推理场景下的优势

Qwen3.5-4B-Claude-Opus一文详解&#xff1a;GGUF量化模型在低延迟推理场景下的优势 1. 模型概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B架构的推理蒸馏模型&#xff0c;特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。该…...