Vue自定义指令实现按钮级的权限控制

通过v-指令,控制页面上的权限按钮的显示隐藏。首先是我的权限按钮数据,通过登录接口后端返回,前端将数据存在vuex里,在调用指令时候获取到当前页面对应的按钮权限数组,通过v-指令传递标识判断是否在当前页按钮权限数组里,有则显示,无则隐藏。

借鉴博客

一、封装组件

在 src 目录下新建 directive 目录,在目录下新建 permission.js 文件:

以下代码可直接复制:注意使用了store

// import Vue from 'vue'
import store from '@/store'
import router from '@/router'// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export default {install(Vue) {Vue.directive('permission', {/*** inserted:被绑定元素插入父节点时调用* el:指令所绑定的元素,可以用来直接操作 DOM* binding.value:指令的绑定值,例如:v-directive="10" 中,绑定值为 10。*/inserted(el, binding) {// 使用Vue.nextTick()确保在DOM更新后执行操作--解决不更新DOM问题Vue.nextTick(function() {let lastColumns = [] // 获取该角色当前页的按钮列表// 在Vue Router加载完成后执行获取路由参数的操作let pagePathrouter.onReady(() => {pagePath = router.currentRoute.path // 当前路由// console.log('pagePath', pagePath)// console.log('store', store.getters['system/systemConfig']) // 获取vuex里面的后端登录返回的页面权限按钮数组arrList// 从vuex里获取所有页面权限按钮关系数据arrList const arrList = [{ path: '/defectManagement/defectRecord', btnList: ['add'] },{ path: '/defectManagement/defectMaintenance', btnList: ['add', 'edit', 'delete'] },{ path: '/normalPenetratTest/penetratResult/asset', btnList: ['add', 'detail', 'edit', 'delete', 'upload', 'highlight'] },{ path: '/normalPenetratTest/penetratResult/loophole', btnList: ['detail', 'edit', 'delete'] }]arrList.forEach(ele => {if (ele.path === pagePath) {lastColumns = ele.btnList || [] // 获取当前路由下的角色的按钮}})// console.log('获取当前路由下的角色的权限按钮数组', lastColumns)// 执行指令的操作const buttonKey = binding.value// 代表某个元素需要通过权限验证if (buttonKey) {const key = checkKey(lastColumns, buttonKey)console.log('指令触发了', lastColumns, checkKey(lastColumns, buttonKey))if (!key) { // 没有权限el.remove() // 删除按钮}} else {throw new Error('缺少唯一指令')}})})}})}
}// 检测传入的元素key是否可以显示
function checkKey(lastColumns, key) {// 如果传入的元素key不在权限数组里,则不可显示return lastColumns.indexOf(key) > -1
}//     <a-button v-permission="'delete'" type="primary">删除</a-button>

二、引入组件和使用

1.在入口文件 src\main.js 里面引入自定义指令:
import permission './directive/permission'
Vue.use(permission)
2.在使用的页面,按钮中只需引用v-operate指令,赋值判断即可:
<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>

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

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

相关文章

一文了解和使用nginx(附带图文)

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一文了解和使用nginx 一. nginx 简介1.1 什么是 nginx 和可以做什么事情1.2 正向代理1.3 反向代理1.4 负载均衡1.5 SSL 配置1.6 管理…

代码训练营第51天:leetcode121买卖股票的最佳时机|leetcode122买卖股票的最佳时机2

leetcode121&#xff1a;买卖股票的最佳时机 文章讲解&#xff1a;leetcode121 leetcode122&#xff1a;买卖股票的最佳时机2 文章讲解&#xff1a;leetcode122 目录 1&#xff0c;leetcode121 买卖股票的最佳时机 2&#xff0c;leetcode122 买卖股票的最佳时机2 1&#xff0…

react中的函数式组件和类式组件

一、函数组件 1. 定义函数组件 在React中&#xff0c;函数组件&#xff08;Functional Component&#xff09;是一种通过纯粹的JavaScript函数定义的UI组件。函数组件采用函数的方式接收一个输入参数 props&#xff0c;并返回一个React元素或者一组React元素作为输出。定义函…

苹果官宣新品发布会 10月31日发布会与Mac有关

10 月 25 日消息&#xff0c;苹果宣布将于北京时间 10 月 31 日上午 8 点举行主题为“来势迅猛”的线上特别活动&#xff0c;届时或将有新品发布。 这场发布会与以往不同&#xff0c;将在北京时间 10 月 31 日上午 8 点举行。有很多猜测认为苹果届时会发布新款 Mac 电脑&#x…

TS的内置类型-Pick,Omit

简介 今天我们聊聊Typescript的内置工具类型&#xff0c;其中有两个类型颇为有意思。那就是 Pick (选取) 和 Omit (排除)。 核心&#xff1a;Pick 与 Omit 从现有类型中得到可复用类型 Pick 作用&#xff1f; 从类型对象中选取指定的属性类型 Omit 作用&#xff1f; 从类型…

Jenkins+Ant+Jmeter接口自动化集成测试

一、Jenkins安装配置 1、安装配置JDK1.6环境变量&#xff1b; 2、下载jenkins.war&#xff0c;放入C:\jenkins目录下&#xff0c;目录位置随意&#xff1b; Jenkins启动方法&#xff1a; cmd进入Jenkins目录下&#xff0c;执行java -jar jenkins.war 浏览器输入&#xff1a;l…

行为型模式-观察者模式

观察者模式是一种行为型设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;其所有依赖者都会收到通知并自动更新。 当对象间存在一对多关系时&#xff0c;则使用观察者模式。比如&#xff0c;当一个对象被修改时&#xff0…

JavaSE 二叉树

目录 1 树型结构1.1 概念1.2 树的表示形式1.3 树的应用 2 二叉树2.1 概念2.2 二叉树的基本形态2.3 两种特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储2.6 二叉树的基本操作2.6.1 二叉树的遍历2.6.2 二叉树的基本操作 2.7 基础练习题2.7.1 二叉树的前序遍历2.7.2 二叉树中序遍历…

Vue组件的本质和手写通过render渲染函数渲染组件

1.组件的本质 组件就是一组 DOM 元素的封装&#xff0c;本质就是一个对象 (mounted函数中打印一下组件即可看到打印的是一个对象) 如何利用javascript对象来描述一个组件&#xff1f; const MyComponent {render() {return {tag: div,props: {onClick: () > alert(hell…

TensorFlow2从磁盘读取图片数据集的示例(tf.data.Dataset.list_files)

import os import warnings warnings.filterwarnings("ignore") import tensorflow as tf from tensorflow.keras.optimizers import Adam from tensorflow.keras.applications.resnet import ResNet50 from pathlib import Path import numpy as np#数据所在文件夹 …

Unity C#中LuaTable、LuaArrayTable、LuaDictTable中数据的增删改查

LuaTable、LuaArrayTable、LuaDictTable中数据的增删改查 介绍Lua表lua表初始化lua移除引用lua中向表中添加数据lua中表中移除数据lua表中连接数据lua表中数据排序获取lua表长度获取表中最大值 UnityC#中LuaTableUnityC#中LuaArrayTable、LuaDictTable、LuaDictTable<K,V>…

Java游戏修炼手册:2023 最新学习线路图

前言 有没有一种令人兴奋的学习方法&#xff1f;当然有&#xff01;绝对有&#xff01;而且我要告诉你&#xff0c;学习的快乐可以媲美游戏的刺激。 小学时代&#xff0c;我曾深陷于一款名为"八百万勇士的梦"的游戏。每当放学&#xff0c;我总是迫不及待地打开电脑&a…

ES(elasticsearch) - 三种姿势进行分页查询

1. from size 浅分页 "浅"分页可以理解为简单意义上的分页。它的原理很简单&#xff0c;就是查询前20条数据&#xff0c;然后截断前10条&#xff0c;只返回10-20的数据。这样其实白白浪费了前10条的查询。 GET test_dev/_search {"query": {"bool&…

【tg】 7 GroupInstanceCustomImpl

group GroupInstanceCustomImpl 核心GroupInstanceCustomInternal G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\group\GroupInstanceCustomImpl.h 最核心是是GroupInstanceCustomInternal: private:std::shared_ptr<Threads> _threads;std::u…

Spring-Bean的生命周期概述

Bean的生命周期概述 入门使用的Spring代码&#xff1a; ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext("spring.xml"); UserService userService (UserService) context.getBean("userService"); userService.test(); …

Node.js的readline模块 命令行交互的模块

Node.js是一个非常流行的JavaScript运行时环境&#xff0c;它提供了许多内置模块来帮助我们开发应用程序。其中之一是readline模块&#xff0c;它提供了一种简单的方法来读取用户输入并进行交互。 本文将详细介绍readline模块的API和使用案例&#xff0c;并附有代码注释。 re…

财报解读:步步逼近ChatGPT,科大讯飞即将迎来全面爆发?

10月份&#xff0c;科大讯飞进入新的成果验证节点。 一是进一步透露AI进展的财报发布。三季报显示&#xff0c;科大讯飞仍然保持较为稳健的发展步伐&#xff0c;营收始终处于增长状态&#xff0c;对讯飞星火认知大模型的应用成果&#xff0c;进行了进一步揭示。基于此&#xf…

基于LSTM encoder-decoder模型实现英文转中文的翻译机器

前言 神经网络机器翻译(NMT, neuro machine tranlation)是AIGC发展道路上的一个重要应用。正是对这个应用的研究&#xff0c;发展出了注意力机制&#xff0c;在此基础上产生了AIGC领域的霸主transformer。我们今天先把注意力机制这些东西放一边&#xff0c;介绍一个对机器翻译…

文心一言简单体验

百度正式发布文心一言&#xff0c;文心一言 这里的插件模式挺有意思&#xff1a; 测试了一下图解说明&#xff0c;随意上传了一张图片&#xff1a; 提供图解让反过来画&#xff0c;抓住了部分重点&#xff0c;但是还是和原图有比较大的差异&#xff01; 百宝箱 暂未逐个体验&am…

2023年9月青少年软件编程(Python) 等级考试试卷(五级)

2323.9青少年软件编程&#xff08;Python&#xff09; 等级考试试卷&#xff08;五级&#xff09; 分数&#xff1a; 100 题数&#xff1a; 38 一、 单选题(共 25 题&#xff0c; 共 50 分) 1. 阅读以下代码&#xff0c; 程序输出结果正确的选项是&#xff1f; &#xff08; &a…