前端面试 vue 按钮级的权限控制

方案一

按钮权限也可以用v-if判断

但是如果页面过多,每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断

这种方式就不展开举例了

方案二

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

思维导图

心就是自定义指令的书写

首先配置路由

{path: '/permission',component: Layout,name: '权限测试',meta: {btnPermissions: ['admin', 'supper', 'normal']},//页面需要的权限children: [{path: 'supper',component: _import('system/supper'),name: '权限测试页',meta: {btnPermissions: ['admin', 'supper']} //页面需要的权限},{path: 'normal',component: _import('system/normal'),name: '权限测试页',meta: {btnPermissions: ['admin']} //页面需要的权限}]
}

自定义权限鉴定指令

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {bind: function (el, binding, vnode) {// 获取页面按钮权限let btnPermissionsArr = [];if(binding.value){// 如果指令传值,获取指令参数,根据指令参数和当前登录人按钮权限做比较。btnPermissionsArr = Array.of(binding.value);}else{// 否则获取路由中的参数,根据路由的btnPermissionsArr和当前登录人按钮权限做比较。btnPermissionsArr = vnode.context.$route.meta.btnPermissions;}if (!Vue.prototype.$_has(btnPermissionsArr)) {el.parentNode.removeChild(el);}}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {let isExist = false;// 获取用户按钮权限let btnPermissionsStr = sessionStorage.getItem("btnPermissions");if (btnPermissionsStr == undefined || btnPermissionsStr == null) {return false;}if (value.indexOf(btnPermissionsStr) > -1) {isExist = true;}return isExist;
};
export {has}

在使用的按钮中只需要引用v-has指令

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

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

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

相关文章

【算法】TopK问题超详解

TopK算法 TopK问题基本框架就是&#xff1a; 从n个数中&#xff0c;找出最大&#xff08;或最小&#xff09;的前k个数。 在我们生活中&#xff0c;经常会遇到TopK问题 比如大众点评的必吃榜&#xff1b;成绩单的前十名&#xff1b;各种数据的最值筛选&#xff1b; [外链图片…

【人工智能】Transformers之Pipeline(四):零样本音频分类(zero-shot-audio-classification)

​​​​​​​ 目录 一、引言 二、零样本音频分类&#xff08;zero-shot-audio-classification&#xff09; 2.1 概述 2.2 意义 2.3 应用场景 2.4 pipeline参数 2.4.1 pipeline对象实例化参数​​​​​​​ 2.4.2 pipeline对象使用参数 2.4 pipeline实战 2.5 模…

【MySQL】:对库和表的基本操作方法

数据库使用的介绍 什么是SQL 学习数据库的使用——>基于 SQL编程语言 来对数据库进行操作 重点表述的是“需求”&#xff0c;期望得到什么结果。&#xff08;至于结果是如何得到的&#xff0c;并不关键&#xff0c;都是数据库服务器在背后做好了&#xff09; 重点表述的是…

线程之间的通信

第一题 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <stdarg.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <dirent.h> #include <…

蔡司小乐圆:护航青少年视力健康,专业应对近视挑战

在科技日新月异的今天&#xff0c;电子产品已深度融入青少年的日常&#xff0c;为生活带来便利的同时&#xff0c;也悄然间对他们的视力构成了威胁。近视&#xff0c;这一日益严峻的健康问题&#xff0c;正牵动着无数家庭的心弦。蔡司眼镜&#xff0c;作为眼镜行业的领军者&…

7月21日,贪心练习

大家好呀&#xff0c;今天带来一些贪心算法的应用解题、 一&#xff0c;柠檬水找零 . - 力扣&#xff08;LeetCode&#xff09; 解析&#xff1a; 本题的贪心体现在对于20美元的处理上&#xff0c;我们总是优先把功能较少的10元作为找零&#xff0c;这样可以让5元用处更大 …

代码随想录算法训练营第35天|LeetCode 01背包问题 二维、01背包问题 一维、416. 分割等和子集

1. LeetCode 01背包问题 二维 题目链接&#xff1a;https://kamacoder.com/problempage.php?pid1046 文章链接&#xff1a;https://programmercarl.com/背包理论基础01背包-1.html#算法公开课 视频链接&#xff1a;https://www.bilibili.com/video/BV1cg411g7Y6/ 思路&#xf…

面向对象三大特征及其优劣接口的特点、抽象类的特点

简单介绍下面向对象三大特征&#xff1f; 封装&#xff1a;封装指的就是把对象的属性隐藏在内部&#xff0c;不允许外部对象直接访问内部信息&#xff0c;但是可以提供一些被外界访问的方法来访问属性。优点在于数据隐藏&#xff08;通过定义私有属性&#xff0c;避免直接访问…

JavaScript银行卡实名核验接口集成 代码详解

银行卡实名核验接口是一种用于验证银行卡持有人身份的服务&#xff0c;通常应用于金融机构或第三方支付平台。这种接口允许应用程序或服务发送请求&#xff0c;以验证银行卡所有者的身份信息是否与银行记录相匹配。 应对市场发展需求&#xff0c;翔云提供了银行卡实名认证接口…

压缩pdf大小的方法 指定大小软件且清晰

在数字化时代&#xff0c;pdf文件因其良好的兼容性和稳定性&#xff0c;已成为文档分享的主流格式。然而&#xff0c;高版本的pdf文件往往体积较大&#xff0c;传输和存储都相对困难。本文将为您详细介绍几种简单有效的方法&#xff0c;帮助您减小pdf文件的大小&#xff0c;让您…

Gradle构建配置包:一键生成构建脚本的秘籍

标题&#xff1a;Gradle构建配置包&#xff1a;一键生成构建脚本的秘籍 在软件开发过程中&#xff0c;构建系统是项目自动化构建的核心。Gradle&#xff0c;作为一种流行的构建自动化工具&#xff0c;以其灵活性和强大的扩展性而广受开发者欢迎。Gradle构建配置包&#xff08;…

任务3 git基础知识(主要是pr的笔记)

任务要求 https://github.com/InternLM/Tutorial/blob/camp3/docs/L0/Git/task.md 文档 https://github.com/InternLM/Tutorial/blob/camp3/docs/L0/Git/readme.md 任务 任务1&#xff1a;提交PR https://github.com/InternLM/Tutorial/pull/1242 任务2&#xff1a;实践…

UML的六大关系---泛化、实现、关联、聚合、组合、依赖

文章目录 前言1. 泛化关系(Generalization)2. 实现关系(Realization)3. ‌关联关系(Association)4. 聚合关系(Aggregation)5. 组合关系(Composition)6. 依赖关系(Dependency)总结 前言 讲到设计模式&#xff0c;就会有 U M L UML UML类图这个东西。 一开始就很难理解各种线啥意…

Android RSA 加解密

文章目录 一、RSA简介二、RSA 原理介绍三、RSA 秘钥对生成1. 密钥对生成2. 获取公钥3. 获取私钥 四、PublicKey 和PrivateKey 的保存1. 获取公钥十六进制字符串1. 获取私钥十六进制字符串 五、PublicKey 和 PrivateKey 加载1. 加载公钥2. 加载私钥 六、 RSA加解密1. RSA 支持三…

selenium.common.exceptions.NoAlertPresentException: Message:

这个错误 selenium.common.exceptions.NoAlertPresentException 表示在尝试访问警告框时&#xff0c;当前页面上并没有活动的警告框。这通常发生在两种情况下&#xff1a; 警告框实际上并没有出现&#xff0c;或者在你尝试访问它之前已经被自动处理或关闭了。你的代码在警告框…

CTF-Web习题:2019强网杯 UPLOAD

题目链接&#xff1a;2019强网杯 UPLOAD 解题思路 打开靶场如下图所示&#xff0c;是一个注册和登录界面 那就注册登录一下&#xff0c;发现是一个提交头像的页面&#xff1a; 试了一下只有能正确显示的png图片才能提交成功&#xff0c;同时F12拿到cookie&#xff0c;base6…

树形背包问题

一些题目给定了树形结构&#xff0c;在这个树形结构中选取一定数量的点或边&#xff08;也可能是其他属性&#xff09;&#xff0c;使得某种与点权或者边权相关的花费最大或者最小。解决这类问题&#xff0c;一般要考虑使用树上背包。 树上背包&#xff0c;顾名思义&#xff0c…

Linux 基础开发工具 : Vim编辑器

Vim 是 Linux 和其他类 Unix 系统上广泛使用的文本编辑器之一。它基于更早的 vi 编辑器&#xff0c;但添加了许多增强功能和扩展。Vim 是“Vi IMproved”的缩写&#xff0c;意为“改进的 Vi”&#xff0c;我们常使用Vim编辑器编写c/c代码。 ps&#xff1a;该篇介绍均为最基础介…

驱动开发系列07 - 驱动程序如何分配内存

一:概述 Linux 内核提供了丰富的内存分配函数、在本文中,我们将介绍在设备驱动程序中分配和使用内存的方法,以及如何优化系统的内存资源。由于内核为驱动程序提供了统一的内存管理接口。所以我们不会去讨论不同架构是如何管理内存的,文本不涉及分段、分页等问题,此外在本文…

Blender中保存透明图片

在Blender中保存透明图片&#xff0c;主要是通过在渲染设置中调整背景透明度&#xff0c;并选择合适的文件格式来保存图像。以下是一个详细的步骤指南&#xff1a; 一、设置渲染属性 打开Blender并加载你想要渲染的模型。在右侧的属性编辑器中&#xff0c;找到并点击“渲染属…