位置: IT常识 - 正文

vue3全局自定义指令实现按钮权限控制(vue3全局属性)

编辑:rootadmin
vue3全局自定义指令实现按钮权限控制 1. 文档介绍的全局自定义指令

推荐整理分享vue3全局自定义指令实现按钮权限控制(vue3全局属性),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue自定义全局方法,vue3全局自定义指令自动获取input焦点,vue自定义全局方法,vue3定义全局变量,vue3定义全局变量,vue3全局自定义指令模块化,vue3全局自定义指令,vue3全局自定义指令,内容如对您有帮助,希望把文章链接给更多的朋友!

在Vue的模板语法中我们除了使用:v-show、v-for、v-model等,Vue其实 也允许我们来自定义自己的指令。

1)注意,在 Vue 中,代码复用和抽象的主要形式是组件。 2)然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

先看一下vue3官方文档介绍使用的自定义全局指令:

自定义全局指令:app的 directive 方法,可以在任意组件中被使用;

vue3全局自定义指令实现按钮权限控制(vue3全局属性)

main.ts

其他页面使用v-focus这个指令

2. 参数解释el:指令所绑定的元素,可以直接操作DOM。binding:是一个对象,包含该指令的所有信息。binding.value,传递给指令的值,例如:<div v-permission="['add']",传递给permission指令的值就是['add'],我们可以拿到值做相关处理。3. 适用业务场景

在很多后台管理系统中,常常需要针对某个页面的按钮进行权限控制。比如说,角色A用户拥有该页面的新增,编辑,删除权限;角色B用户拥有该页面编辑权限。那么对于角色B用户来说,该页面新增,删除按钮应该是不可见的。这就需要我们自定义指令来控制按钮的显示和隐藏。

4. 实现步骤

1) 用户登录成功时,将用户权限数据,存入sessionStorage中

// login.vue<script setup lang='ts'> import { useStore } from '@/store' const store = useStore() const login = ()=>{ // 请求后台接口,拿到相关的用户权限数据 getUserPermissionApi().then(res=>{ sessionStorage.setItem('permission',res.data) // 示例: // 页面名称:按钮权限名 // ['auto.add','auto.delete','auto.update'] }).catch(err=>{ console.log('拿到用户权限内容报错了') }) }</script>

2) 进行封装,项目根目录下新建一个directives文件夹 =》permission.ts和index.ts

// permission.ts// 引入vue中定义的指令对应的类型定义import { Directive } from 'vue'export const permission: Directive = { // mounted是指令的一个生命周期 mounted(el, binding) { // value 获取用户使用自定义指令绑定的内容 const { value } = binding // 获取用户所有的权限按钮 const permissionBtn = sessionStorage.getItem('permission') // 判断用户使用自定义指令,是否使用正确了 if (value && value instanceof Array && value.length > 0) { const permissionFunc = value //判断传递进来的按钮权限,用户是否拥有 //Array.some(), 数组中有一个结果是true返回true,剩下的元素不会再检测 const hasPermission = permissionBtn.some((role: any) => { return permissionFunc.includes(role) }) // 当用户没有这个按钮权限时,设置隐藏这个按钮 if (!hasPermission) { el.style.display = 'none' } } else { throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"') } }}// 注意,我们这里写的自定义指令,传递内容是一个数组,也就说,按钮权限可能是由// 多个因素决定的,如果你的业务场景只由一个因素决定,自定义指令也可以不传递一个数组,// 只传递一个字符串就可以了// index.tsexport * from './permission'

3)main.ts中注册为全局指令

import App from './App.vue'import { createApp, Directive } from 'vue'import * as directives from '@/directives'const app = createApp(App)console.log(directives, 'directives') //打印发现是导出的自定义指令名,permissionObject.keys(directives).forEach(key => { //Object.keys() 返回一个数组,值是所有可遍历属性的key名 app.directive(key, (directives as { [key: string ]: Directive })[key]) //key是自定义指令名字;后面应该是自定义指令的值,值类型是string})

4) 在页面中使用

<template> <button v-permission="['auto.add']">新增</button> <button v-permission="['auto.update']">编辑</button> <button v-permission="['auto.delete']">删除</button></template>

这样,我们的全局自定义指令基本就实现按钮权限的控制了。

本文链接地址:https://www.jiuchutong.com/zhishi/289711.html 转载请保留说明!

上一篇:Linux系统驱动跟裸机驱动的区别(linux驱动和windows驱动)

下一篇:Maven基础学习——tomcat插件配置(含web工程配置)(maven视频教程)

  • 论坛营销发帖推广技巧(论坛营销发帖推广文案)

    论坛营销发帖推广技巧(论坛营销发帖推广文案)

  • 微博营销一些常见的方法和技巧(微博营销的要点?)

    微博营销一些常见的方法和技巧(微博营销的要点?)

  • 微信怎么设置中国大陆不显示地区(微信怎么设置中国大陆不显示城市)

    微信怎么设置中国大陆不显示地区(微信怎么设置中国大陆不显示城市)

  • 抖音可以查看访客记录吗(抖音可以查看访问的人吗)

    抖音可以查看访客记录吗(抖音可以查看访问的人吗)

  • ipad微信怎么发送消息(iPad微信怎么发原图)

    ipad微信怎么发送消息(iPad微信怎么发原图)

  • 挂烫机灯不亮了也不工作了怎么回事(挂烫机灯不亮了怎么维修)

    挂烫机灯不亮了也不工作了怎么回事(挂烫机灯不亮了怎么维修)

  • dubal00手机支持4g吗(华为dubal00a可以用电信卡么)

    dubal00手机支持4g吗(华为dubal00a可以用电信卡么)

  • 打印机显示文档被挂起是什么意思(打印机显示文档等待中不打印)

    打印机显示文档被挂起是什么意思(打印机显示文档等待中不打印)

  • 华为手机如何获取本机手机号码(华为手机如何获取存储权限)

    华为手机如何获取本机手机号码(华为手机如何获取存储权限)

  • 微信电话最长能打多久(微信电话最长能打多少时间)

    微信电话最长能打多久(微信电话最长能打多少时间)

  • 笔记本声音大嗡嗡响是怎么回事(笔记本声音大嗡嗡响需要清灰吗)

    笔记本声音大嗡嗡响是怎么回事(笔记本声音大嗡嗡响需要清灰吗)

  • 京东学生认证安全吗(京东学生认证成功后,可以在哪里打开)

    京东学生认证安全吗(京东学生认证成功后,可以在哪里打开)

  • word文档背景颜色设置(Word文档背景颜色为什么不显示)

    word文档背景颜色设置(Word文档背景颜色为什么不显示)

  • 小米10和小米10pro区别(小米10和小米10pro膜通用吗)

    小米10和小米10pro区别(小米10和小米10pro膜通用吗)

  • iphone11和iphone8对比(iphone11与iphone8)

    iphone11和iphone8对比(iphone11与iphone8)

  • 小米mi4lte是什么意思(小米手机型号mi4lte)

    小米mi4lte是什么意思(小米手机型号mi4lte)

  • vivo手机字体变成空心(vivo手机字体变大)

    vivo手机字体变成空心(vivo手机字体变大)

  • iphonex支持wifi6吗(苹果x支持wifi6路由器吗)

    iphonex支持wifi6吗(苹果x支持wifi6路由器吗)

  • 电脑系统更新需要多久(电脑系统更新需要更新吗)

    电脑系统更新需要多久(电脑系统更新需要更新吗)

  • iphone8支持3dtouch吗(IPhone8支持快充吗)

    iphone8支持3dtouch吗(IPhone8支持快充吗)

  • 手机qq怎么一键退群(手机qq怎么一键清好友)

    手机qq怎么一键退群(手机qq怎么一键清好友)

  • 智能手环可以打电话吗(智能手环可以打游戏吗)

    智能手环可以打电话吗(智能手环可以打游戏吗)

  • 充电宝怎么看电满不满(充电宝怎么看电充满了没有)

    充电宝怎么看电满不满(充电宝怎么看电充满了没有)

  • dub-al00a是华为什么型号(dubal00a是华为什么型号多少钱)

    dub-al00a是华为什么型号(dubal00a是华为什么型号多少钱)

  • 内存3000和3200的差别(内存3200比3000便宜)

    内存3000和3200的差别(内存3200比3000便宜)

  • 华为鸿蒙系统怎么查看正在运行的服务?(华为鸿蒙系统怎么看安卓版本)

    华为鸿蒙系统怎么查看正在运行的服务?(华为鸿蒙系统怎么看安卓版本)

  • Win10确认已修复NTFS格式磁盘拒绝服务致系统崩溃的漏洞(win10一直显示修复)

    Win10确认已修复NTFS格式磁盘拒绝服务致系统崩溃的漏洞(win10一直显示修复)

  • 申请延期缴纳税款的批准机关
  • 美容美发属于什么行业
  • 税务师考试科目安排
  • 个体户营业税怎么算
  • 全面一次性奖金收入扣税标准
  • 终止经营净利润计算公式
  • 分公司一定要汇总申报吗
  • 在哪里报个税
  • 转入公司对公账户怎么办
  • 2019小规模纳税人免征增值税政策
  • 已经给员工交了社保能退吗
  • 给员工购消费卡怎么做账
  • 租金收入未收到 税法规定
  • 小规模纳税人季报还是月报?
  • 继承房产也需要缴税吗
  • 社保显示已录入什么意思
  • 购买办公桌椅属于什么费用
  • 特定业务预缴所得税不能填写
  • 公司购买理财产品的收益计入什么科目
  • 研发失败的项目可以加计扣除吗
  • 债券折价摊销属于借款费用吗
  • 往年度的工资做什么科目
  • 政府给企业的钱叫什么
  • 合伙企业收到投资款要缴纳印花税吗
  • 信息化投入包括什么投入和什么投入
  • 年报的企业主营业务活动
  • 赠与合同公证收费标准
  • 筹建期间费用计什么科目
  • 怎么关闭windows defender
  • php判断ua
  • 残疾人增值税即征即退政策2020
  • 无花果的功效与作用对女人的好处
  • 小规模纳税人进项可以抵扣吗
  • 发票填开有哪些规范性要求
  • js监听hover
  • php图像
  • 进项票留底怎么做分录
  • 收据不可以入账吗
  • 固定资产一次性折旧政策2023
  • 无形资产摊销怎么算月摊销额
  • netconf over ssh
  • 增值税发票已经认证了,但是税票原票没给,会有什么后果
  • 特殊劳务交易的法律规定
  • 个税少报了能查出来吗
  • 收到稳岗补贴如何入账
  • 中药资源与开发跨专业考研
  • ❤️国庆假期快到了,用python写个倒计时程序,助你熬到假期!❤️
  • 公司境外汇款该怎么处理
  • sql2012存储过程
  • 非营利组织增值税怎么处理
  • 发票金额大于实付金额
  • 只有收入没有成本怎么做账
  • 固定资产资本化后续支出
  • 免税农产品按多少抵扣
  • 单位卖二手车如何交税
  • 企业自建房产提款流程
  • 三包适用范围
  • 质量不合格怎么说
  • 城镇土地税需要计税吗
  • 会计记账科目表
  • 分公司需要独立核算和报税吗
  • sql解析器是什么
  • mysql事件调用存储过程
  • MySQL slave_net_timeout参数解决的一个集群问题案例
  • mysql好在哪里
  • win7 64位系统如何查看计算机名称为了应付某一操作
  • centos怎么执行脚本
  • win8老是自动安装软件
  • centos 操作日志
  • win7怎么保留文件升级到win10系统
  • 简述js和jquery的关系
  • onclick和onclientclick
  • cocos-2dx
  • opengl发光物体
  • js动态改变div内容
  • win10 putty
  • jQuery+ajax读取并解析XML文件的方法
  • 贵州省电子税务
  • 个人领税票需要哪些资料
  • 重庆国税局官网登录入口查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设