VUE封装-自定义权限控制指令

2024-06-03 11:28

本文主要是介绍VUE封装-自定义权限控制指令,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        在实际开发中,会遇到很多的权限控制、资源位的场景,其实就是用来控制某个组件的展示与否,可以是一个按钮、一个报表、一个TAB页面等

例如下图,我想通过当前登录的用户控制谷歌的这个logo显示与否

        因为设计到的权限、资源位控制比较多,如果单纯的使用v-if 进行组件的展示与否的判断,会导致在每个页面都需要重新写,重新从vuex或者pinia或者发起请求获取资源为列表,再通过当前用户判断是否有权限。

这就导致了两个问题:

        1)代码冗余,难于维护

        2)v-if中条件过多容易逻辑混乱

        所以我们就可以通过自定义的指令进行控制,所谓自定义指令,其实就是写一个类似v-if的属性,通过我们自定义的逻辑判断达到组件展示与否的功能

首先再src下新建名为directive的文件夹,新建如下两个js文件

permission.js文件:

import {useSubscriber} from "@/store/index.js";/*** 权限控制指令*/
export default {mounted(el,binding){// 首先判断是否使用自定义指令 若不使用(无值)则不进行校验if(binding.value){// 获取pinia中的用户信息const subscriber = useSubscriber()// 从用户信息中获取其包含的权限列表const perms = subscriber.perms// 判断权限列表中是否包含自定义指令输入的值const flag = binding.value.some((item) => {return perms.indexOf(item) > -1})// 如果不包含的话 则代表无权限,则删除该节点if(!flag){el.parentNode && el.parentNode.removeChild(el)}}}
}

index.js文件:

import permission from "./permission"
const directives = {permission
}
// 注册指令
export default {install(Vue){Object.keys(directives).forEach(key=>{Vue.directive(key,directives[key])})}
}

然后我们再main.js中增加

import directive from "./directive/index.js";app.use(router).use(store)// 挂到app上.use(directive).use(components).mount('#app')

然后就可以需要使用的页面上通过v-permission="['']"使用了

我在网上看到些方法,里面写的是将该节点的display属性置为none,但是这样的话就会导致更改页面源码,将该组件再展示出来,所以建议还是直接删除节点。

这篇关于VUE封装-自定义权限控制指令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1026857

相关文章

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

Spring Security注解方式权限控制过程

《SpringSecurity注解方式权限控制过程》:本文主要介绍SpringSecurity注解方式权限控制过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、摘要二、实现步骤2.1 在配置类中添加权限注解的支持2.2 创建Controller类2.3 Us

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

Redis实现RBAC权限管理

《Redis实现RBAC权限管理》本文主要介绍了Redis实现RBAC权限管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1. 什么是 RBAC?2. 为什么使用 Redis 实现 RBAC?3. 设计 RBAC 数据结构

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter(过滤器)类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter(过滤器)简介dubbo 过滤器运行时机自定义 filter第一种 @A

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误