本文主要是介绍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封装-自定义权限控制指令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!