vue3实现按钮权限管理的项目实践
更新时间：2023年08月24日 09:01:58 作者：Apeng_0919
在做后台管理系统时,经常会有权限管理的功能,本文主要介绍了vue3实现按钮权限管理的项目实践,具有一定的参考价值,感兴趣的可以了解一下
在做后台管理系统时，经常会有权限管理的功能，这里来记录一下关于按钮权限管理的实现方法
1、自定义指令 v-permission。新建js文件用来写指令代码。
export default function btnPerms(app) {
app.directive('permission', {
mounted(el, binding) {
if (!permsJudge(binding.value)) {
el.parentNode.removeChild(el);
}
function permsJudge(value){
let perms = JSON.parse(localStorage.getItem('perms')) || [];
for (let item of perms) {
if (item === value) {
return true;
}
}
return false;
}
}
});
}2、在main.js里注入；
3、在登录后台时获取后端返回的用户权限数据，并且存入到本地；我这边是把获取数据的接口放在vuex中的
async _getUserPermission(contxt,payload){
let res = await getUserPermission();
if(res && res.data){
let {code,data,message} = res.data;
if(code == 200){
localStorage.setItem('perms',JSON.stringify(data.resourceList));
contxt.commit('getPerObj',data.resourceList);
}else {
reject(message)
}
}
}然后在登录页面调用这个方法；也可以直接在登录页面获取数据，这里就不赘述了。
获取的数据大概是这个格式
4、在需要判断权限的按钮调用指令；
这样就可以实现按钮权限了
到此这篇关于vue3实现按钮权限管理的项目实践的文章就介绍到这了,更多相关vue3按钮权限管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VUE+elementui组件在table-cell单元格中绘制微型echarts图
这篇文章主要介绍了VUE+elementui组件在table-cell单元格中绘制微型echarts图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了Vue如何设置全局css文件以及css组合器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了webpack中的optimization配置详解,主要就是根据不同的策略来分割打包出来的bundle,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要给大家介绍了关于VUE中鼠标滚轮使div左右滚动的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在使用 Vue.js 开发后台管理系统时，经常会遇到需要使用路由标签页的场景，这篇文章主要介绍了vue3+Typescript实现路由标签页和面包屑,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了VUE前端cookie简单操作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
本文主要介绍了Vue极简生成器 Vuepress的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>2022-06-06
这篇文章主要给大家介绍了基于axios请求封装的vue应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
在项目里有个打印功能,将页面的部分内容打印出来,所以下面这篇文章主要给大家介绍了关于利用vue实现打印页面的几种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论