位置: 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视频教程)

  • macbook如何镜像投屏(macbook如何镜像安装vscode)

    macbook如何镜像投屏(macbook如何镜像安装vscode)

  • 苹果短信已读是对方看了吗(苹果短信已读是看到了吗)

    苹果短信已读是对方看了吗(苹果短信已读是看到了吗)

  • 使用什么可以进行快速格式复制操作(使用什么可以进入空气中)

    使用什么可以进行快速格式复制操作(使用什么可以进入空气中)

  • 苹果关闭共享对方知道吗(iphone共享)

    苹果关闭共享对方知道吗(iphone共享)

  • 华为手机怎样添加桌面天气和时间(华为手机怎样添加联系人)

    华为手机怎样添加桌面天气和时间(华为手机怎样添加联系人)

  • 为什么苹果安兔兔闪退(iphone 安兔兔)

    为什么苹果安兔兔闪退(iphone 安兔兔)

  • 手机屏幕换了是不是没有原装的好(手机屏幕换了是看不出来的吗为什么)

    手机屏幕换了是不是没有原装的好(手机屏幕换了是看不出来的吗为什么)

  • 苹果相册里的视频加载不出来(苹果相册里的视频怎么变慢动作)

    苹果相册里的视频加载不出来(苹果相册里的视频怎么变慢动作)

  • K30充满电有提示吗(k30pro充满电还是显示在充电)

    K30充满电有提示吗(k30pro充满电还是显示在充电)

  • 苹果xr屏幕出现红点(苹果xr屏幕出现竖条线怎么修)

    苹果xr屏幕出现红点(苹果xr屏幕出现竖条线怎么修)

  • 微信动态视频评论是公开的吗(微信动态视频的评论只有自己看得见吗)

    微信动态视频评论是公开的吗(微信动态视频的评论只有自己看得见吗)

  • 华为mate30充满电多久(华为p60pro充电)

    华为mate30充满电多久(华为p60pro充电)

  • kindle电池耗电太快(kindle耗电严重)

    kindle电池耗电太快(kindle耗电严重)

  • 在pc机中,cpu的时钟信号由什么提供(pc机cpu的叙述)

    在pc机中,cpu的时钟信号由什么提供(pc机cpu的叙述)

  • 苹果x耳机接口在哪里(苹果x耳机接口型号)

    苹果x耳机接口在哪里(苹果x耳机接口型号)

  • 苹果11怎么用双卡(苹果11怎么用双卡发信息)

    苹果11怎么用双卡(苹果11怎么用双卡发信息)

  • x23手机为什么停产(x27手机自动关机怎么回事)

    x23手机为什么停产(x27手机自动关机怎么回事)

  • 语音设置在哪(语音设置在哪里打开)

    语音设置在哪(语音设置在哪里打开)

  • 借充电宝押金99怎么退(借充电宝押金99多久到账)

    借充电宝押金99怎么退(借充电宝押金99多久到账)

  • x9plus有nfc功能吗(vivo x9s plus有没有nfc功能)

    x9plus有nfc功能吗(vivo x9s plus有没有nfc功能)

  • 无法载入icloud(无法载入更高质量照片怎么恢复)

    无法载入icloud(无法载入更高质量照片怎么恢复)

  • 苹果7充不进去电怎么回事(苹果7充不进去电怎么解决)

    苹果7充不进去电怎么回事(苹果7充不进去电怎么解决)

  • 在Win7系统中,CMD命令不能用怎么办 ?(在win7系统中怎样卸载win10?)

    在Win7系统中,CMD命令不能用怎么办 ?(在win7系统中怎样卸载win10?)

  • 小规模纳税人执行小企业会计准则吗
  • 结构性减税政策的定义
  • 城建税计税依据扣除增值税期末留抵
  • 其他应付款借方余额怎么调整
  • 机器设备一般折旧几年
  • 8月现金收入9月存银行如何做账
  • 个人所得税红利20%
  • 预缴税款可以抵税吗
  • 金税盘锁死日期16号几点
  • 食堂买菜费用如何做会计
  • 公司代缴个税分录
  • 税控盘服务费减免税会计分录
  • 施工单位名称变更需要变施工许可证吗
  • 资本公积在现金流量表哪里体现
  • 造价服务费收费标准计算器
  • 个人所得税薪金所得是实发工资还是应发工资
  • 旅行社代订机票发票写个人能报销吗
  • 印花税可以计入开办费吗
  • 转正工资差额什么意思
  • 小规模的增值税怎么算
  • 一般纳税人免税申报表怎么填
  • 电脑屏幕突然黑屏怎么回事
  • 购买电脑应该怎么做账
  • 消防工程改造需要什么资质
  • 关闭自动重新启动会怎样
  • 重装系统后软件打不开
  • 高新企业有啥用
  • 辅导期一般纳税人标准
  • 资产减值损失会影响营业利润吗
  • 如何导入并使用数据库
  • 因为技术原因
  • 淘宝买建材
  • 出口发票的开具时间问题
  • 公司财务认证负责人实名认证需要承担责任吗
  • 保税进料加工企业
  • 人力为主的公司名称
  • 帝国cms界面
  • 服务型公司营业执照图片
  • 支付银行贷款利息现金流量表填哪里
  • 织梦cms不更新了吗
  • 非营利组织缴纳增值税账务处理
  • 以前年度多计提增值税
  • 金税盘发票报送失败怎么办
  • 更正个税申报需要交滞纳金没
  • 财务会计的主要目标和工作内容包括
  • access调用sql
  • 企业存续情况
  • 企业怎样合理避税详述
  • 企业所得税季度预缴纳税申报表
  • 库存现金月末是怎么样结账的
  • 销售成本会计英语
  • 投资性房地产抵债怎么做账务处理
  • 公司买的吃的计入什么科目
  • 开红字发票做账时记账凭证上如何写摘要?
  • 民办非企业单位免税
  • 企业所得税季报与年报的关系
  • 兼职人员属于雇佣人吗
  • 收到分公司负责人的礼物
  • 固定资产管理需要什么专业
  • 本票丢了别人可以取钱吗
  • 互联网代记账业务
  • linux如何安装c语言编译器
  • mysql索引用法
  • windows图标显示不出来
  • avcodec.dll是什么意思
  • win7没有printtopdf
  • 360卫士重装电脑够进入不了桌面
  • macbook调节音量怎么没反应
  • win7系统怎么给软件打开摄像头权限
  • 安装win7旗舰版变了家庭版
  • linux中sudoers
  • win7其他设备
  • JavaScript浏览器打开
  • js设计模式有什么用
  • js获取form表单数据并显示
  • Javascript Math ceil()、floor()、round()三个函数的区别
  • 通过jquery实现页面的动画效果(实例代码)
  • 连云港税务局网站
  • 广东省地税电子税务局
  • 个体商户营业额多少万以下免税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设