详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

2023-09-24 16:07:05 122

项目背景：物业管理后台，不同角色拥有不同权限

采用技术：Vue.js+Vuex+ElementUI

实现RBAC权限管理需要后端接口支持，这里仅提供前端解决方案。

因代码篇幅较大，对代码进行了删减，文中“...”即为省略的一部分代码。

大致思路：
首先登录成功后，从后台拉取用户当前可显示的菜单和可用权限列表，分别将其存入store的nav（菜单导航）和auth（用户可用权限）中，在用户切换路由时，判断是否存在auth，如果不存在，则重新获取，判断当前访问地址to.meta.alias是否在用户可用权限列表中，如果不存在，则提示无权限，否则进入路由。

1.路由与侧边菜单分离

侧边菜单相关代码Main.vue









{{child.name}}



{{child.name}}

{{subChild.name}}








{{item.name}}

2.路由切换前进行鉴权

路由定义的部分代码，对每个路由添加了meta属性，用于鉴权。

这里component采用了异步引入的方式。

定义路由

//...
//系统管理
{
path:'/system',
component:Main,
name:'系统管理',
redirect:'/system/organization',
children:[{
path:'/system/organization',
component:()=>import('@/views/System/Organization.vue'),
name:'组织结构',
//requiresAuth用于确认此地址是否需要验证
//alias用于获取后端返回rbac权限对应的前端路由地址和导航菜单图标
meta:{requiresAuth:true,alias:'Pmsadmin/Oragnize/list'}
},
{
path:'/system/user',
component:()=>import('@/views/System/User.vue'),
name:'人员管理',
redirect:'/system/user/index',
children:[
{
path:'/system/user/index',
component:()=>import('@/views/System/UserList.vue'),
name:'职员列表',
meta:{requiresAuth:true,alias:'Pmsadmin/Admin/list'}
}
]
},
{
path:'/system/auth',
component:()=>import('@/views/System/Auth.vue'),
name:'角色管理',
meta:{requiresAuth:true,alias:'Pmsadmin/Role/list'}
}
]
}
//...

路由钩子beforeEach

router.beforeEach((to,from,next)=>{
document.title=`${configs.title}-${to.name}`;
const{hasAuth,auth}=store.state.user;
//未拿到权限，则获取
if(!hasAuth){
store.dispatch('getUserAuth');
console.log('重新获取用户权限');
//next();
}
//如果未登录，跳转
if(window.localStorage.getItem('IS_LOGIN')===null&&to.path!=='/login'){
console.log('未登录状态');
next({
path:'/login',
query:{redirect:to.fullPath}
//将跳转的路由path作为参数，登录成功后跳转到该路由
})
}else{
//需要鉴权的路由地址
console.log(to,auth.indexOf(to.meta.alias),auth);
if(to.meta.requiresAuth){
if(auth.indexOf(to.meta.alias)>-1){
console.log('有权限进入');
next();
}else{
if(auth.length>0){
Message.error({
message:'当前用户权限不足，无法访问',
showClose:true,
});
}else{
next();
}
}
}else{
next();
}
}
});

在Vuex的state中，定义好nav对象

//登录用户信息
constuser={
name:'',//用户名
avatar:'',//用户头像
auth:[],//用户权限
hasAuth:false//是否已经加载用户权限
};
//导航菜单
constnav=[];

通过action异步获取数据

//获取用户权限
constgetUserAuth=async({commit})=>{
constres=awaithttp.post('YOUR_URL',{});
if(res===null)return;
console.log('getUserAuth',res.param);
commit('SET_USER_AUTH',res.param.auth);
commit('SET_SIDE_NAV',res.param.nav);
};

Vuex中的mutation的相关代码

//设置用户权限
constSET_USER_AUTH=(state,auth)=>{
state.user.auth=auth.concat('欢迎使用');
state.user.hasAuth=true;
};
//设置导航菜单
constSET_SIDE_NAV=(state,nav)=>{
//导航菜单
let_nav=[{
name:'欢迎使用',
url:"/main",
iconCls:'fafa-bookmark'
}];
//权限菜单对应的路由地址
constroute={
"系统管理":{iconCls:'fafa-archive',url:''},
"Pmsadmin/Oragnize/list":{iconCls:'',url:'/system/organization'},
"Pmsadmin/Admin/list":{iconCls:'',url:'/system/user/index'},
"Pmsadmin/Role/list":{iconCls:'',url:'/system/auth'},
"Pmsadmin/Log/record":{iconCls:'',url:'/system/logs'},
"项目管理":{iconCls:'fafa-unlock-alt',url:''},
"Pmsadmin/Project/list":{iconCls:'',url:'/project/list/index'},
"Pmsadmin/House/list":{iconCls:'',url:'/project/house'},
"Pmsadmin/Pack/list":{iconCls:'',url:'/project/pack'},
"广告位":{iconCls:'fafa-edit',url:''},
"Pmsadmin/Place/list":{iconCls:'',url:'/adsplace/list'},
"投诉建议":{iconCls:'fafa-tasks',url:''},
"Pmsadmin/Scategory/list":{iconCls:'',url:'/complain/type'},
"Pmsadmin/Complain/list":{iconCls:'',url:'/complain/list'},
"Pmsadmin/Suggest/list":{iconCls:'',url:'/complain/suggestion'},
"报事报修":{iconCls:'fafa-user',url:''},
"Pmsadmin/Rcategory/list":{iconCls:'',url:'/rcategory/type'},
"Pmsadmin/Rcategory/info":{iconCls:'',url:'/rcategory/public'},
"Pmsadmin/Repair/list":{iconCls:'',url:'/rcategory/personal'},
"便民服务":{iconCls:'fafa-external-link',url:''},
"Pmsadmin/Bcategory/list":{iconCls:'',url:'/bcategory/type'},
"Pmsadmin/Service/list":{iconCls:'',url:'/bcategory/list'},
"首座推荐":{iconCls:'fafa-file-text',url:''},
"Pmsadmin/stcategory/list":{iconCls:'',url:'/stcategory/type'},
"Pmsadmin/Store/list":{iconCls:'',url:'/stcategory/list'},
"招商租赁":{iconCls:'fafa-leaf',url:''},
"Pmsadmin/Bussiness/list":{iconCls:'',url:'/bussiness/list'},
"Pmsadmin/Company/list":{iconCls:'',url:'/bussiness/company'},
"Pmsadmin/Question/list":{iconCls:'',url:'/bussiness/question'},
"停车找车":{iconCls:'fafa-ra',url:''},
"Pmsadmin/Cplace/list":{iconCls:'',url:'/cplace/cmanage'},
"Pmsadmin/Clist/list":{iconCls:'',url:'/cplace/clist'},
"Pmsadmin/Cquestion/list":{iconCls:'',url:'/cplace/cquestion'},
};
for(letkeyinnav){
letitem=nav[key];
let_temp={};
letsubItems=[];//二级菜单临时数组
if(item.children&&item.children.length>0){
//二级菜单
item.children.forEach(subItem=>{
subItems.push(Object.assign({},{
name:subItem.name||'',
url:route[subItem.url].url||'',
iconCls:route[subItem.url].iconCls||'',
}))
});
//一级菜单
_temp=Object.assign({},{
name:item.name||'',
url:item.url||'',
iconCls:route[item.name].iconCls||'',
children:subItems.slice(0)
});
_nav.push(_temp);
}
}
state.nav=_nav;
};

3.后端接口返回内容

{
"status":200,
"info":"数据查询成功！",
"param":{
"nav":{
"1":{
"name":"系统管理",
"url":"",
"children":[
{
"name":"组织结构",
"url":"Pmsadmin/Oragnize/list"
},
{
"name":"人员管理",
"url":"Pmsadmin/Admin/list"
},
{
"name":"角色管理",
"url":"Pmsadmin/Role/list"
},
{
"name":"日志管理",
"url":"Pmsadmin/Log/record"
}
]
},
"61":{
"name":"广告位",
"url":"",
"children":[
{
"name":"广告位列表",
"url":"Pmsadmin/Place/list"
}
]
}
},
"auth":[
"系统管理",
"Pmsadmin/Oragnize/list",
"Pmsadmin/Admin/list",
"Pmsadmin/Role/list",
"Pmsadmin/Log/record",
"广告位",
"Pmsadmin/Place/list"
]
}
}

存在的问题

新增修改删除按钮还无法实现根据用户权限控制其显示
代码上还存在着不足，期待大神能够有更优的解决方案。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

热门推荐

随机推荐