2019-03-11菜单权限和按钮权限

最新推荐文章于 2025-06-05 16:42:19 发布

快乐的想念17

最新推荐文章于 2025-06-05 16:42:19 发布

阅读量1k

点赞数

本文详细介绍如何在Vue项目中实现权限控制，包括基于路由的菜单权限匹配和按钮级权限控制。通过递归生成菜单结构，结合后台返回的数据，动态展示用户可访问的菜单和操作按钮，确保系统的安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

权限菜单思路（根据路由来匹配，在角色保存的时候按照后台要的格式传过去）
https://www.jianshu.com/p/65f1b7f31c6d

vue 权限按钮
https://www.cnblogs.com/xifengxiaoma/p/9649895.html

<el-tree
v-loading=“loading”
element-loading-text=“拼命加载中,请耐心等待…”
element-loading-spinner=“el-icon-loading”
:props=“defaultProps”
:data=“menuData”
show-checkbox
node-key=“id”
accordion
@check=“handleCheckChange”
ref=“tree”
:default-checked-keys=‘resourceCheckedKey’
>

handleCheckChange(data,checked) {
//checked.checkedKeys 选中的节点id数组
//checked.halfCheckedKeys 半选中节点id数组
let ids=[];
ids=checked.halfCheckedKeys.concat(checked.checkedKeys);//选中节点和半选中节点所有的id
this. $KaTeX parse error: Expected 'EOF', got '}' at position 37: \dotss) }̲, 全\dots$ http.get(api.MUNElIST).then((res) => {
if(res.data.status200){
let result=res.data.data.sort((a,b)=>a.sort - b.sort);
if(result.length>0){
result.forEach((value)=>{
if(!value.parentId){
if(value.buttons){
this.getButton(result)
}
//一级菜单
this.menuList.push(value);
//二级菜单
this.menuListData(result,value);
}
});
return this.menuList
}else {
this. $m e s s a g e (t y p e :^{'} e r r o r^{'}, m e s s a g e : r e s . d a t a . m s g); t h i s .$ router.push({name:‘login’})
}
}
});
},
//递归菜单
menuListData(data,value){
value.children=[];
data.forEach((item)=>{
//二级菜单
if(value.menuIditem.parentId){
value.children.push(item);
this.menuListData(data,item)
}
});
if(value.children.length0) delete value.children;
},
getButton(data){
//存储按钮对应的数据
*sessionStorage.removeItem(‘buttons’);
sessionStorage.setItem(“buttons”,JSON.stringify(data));
},
2.公共方法里面写
//全局js
exports.install = function (Vue, options) {
//获取按钮权限
Vue.prototype.BtnsData = function (url,bts){
let butData=JSON.parse(sessionStorage.getItem(“buttons”));
if(butData.length>0){
butData.forEach((value)=>{
if(value.urlurl){
value.buttons.forEach((item)=>{
if(item.menuName){
bts.push(item.menuName)
}
})
}
});
}
};
};
3.，每个页面中调用并且在页面中判断（自定义一个btns数组并且判断）
//this. $r o u t e . p a t h 当前 u r l / / t h i s . b t n s 当前的按钮 t h i s . B t n s D a t a (t h i s .$ route.path,this.btns);//获取按钮权限
<i class=“fa fa-plus” @click=“add” v-if=“btns.indexOf(‘添加’)!=-1”>添加