Vue前后端动态权限管理对接方案
Posted helena000
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue前后端动态权限管理对接方案相关的知识,希望对你有一定的参考价值。
前后端动态权限管理对接方案
1.用户登录
Request:
{
username: ‘adminxx’,
password: ‘123456’
}
Response:
{
status: ‘OK’,
ok: true,
comment: ‘操作成功!’,
value: {
token: ‘xxxxx’,
....
}
}
2.用户信息及按钮页面按钮权限获取
Request:
{
token: ‘xxxxx’
}
Response:
{
permission:[
‘/customer/account’,
‘/customer/addaccount’,
...
],
profile: {
id: ‘x’,
username:’xxx’,
name:’xxxx’,
avatar:’http://xxxxx’,
...
}
roles: [ ‘adminxxx’ ],
...
}
字段 类型 注释
permission Array 页面按钮权限,值为对应项的path值
profile Object 登录用户的用户信息
roles Array 登录用户的角色列表
3.用户权限菜单列表获取
Response:
{
token: ‘xxxxx’
}
Request:
[
{
id:‘1‘
parentId:"2",
path: ‘/customer‘,
component:‘Layout‘,
redirect: ‘/customer/account‘,
alwaysShow: true,
name: ‘customer‘,
meta: {
title: ‘客户管理‘,
icon: ‘lock‘
},
children: [
{
id:‘1‘
parentId:"2",
path: ‘/customer/account‘,
component: ‘views/customer/index‘,
name: ‘account‘,
meta: {
title: ‘客户账号‘,
roles: [ ‘admin‘ ]
}
}
]
}
]
说明:
这个列表前端发给后台,后台只控制每一项id,parentId及roles的值,别的字段的值及类型均原样返回
roles的值为有这个页面权限的角色的角色列表
4.权限树菜单
Response:
{
token: ‘xxxxx’
}
Request:
[
{
id: 1,
label: ‘客户管理‘,
children: [
{
id: 7,
label: ‘账号添加‘
},
{
id: 8,
label: ‘账号编辑‘
},
{
id: 9,
label: ‘账号删除‘
}
]
},
{
id: 2,
label: ‘系统管理‘,
children: [
{
id: 10,
label: ‘账号添加‘
},
{
id: 3,
label: ‘账号编辑‘
},
{
id: 4,
label: ‘账号删除‘
},
{
id: 5,
label: ‘权限设置‘
},
{
id: 6,
label: ‘权限查看‘
}
]
}
]
5.设置权限
Request:
{
ids:[id1,id2,id3]
}
Response:
{
status: ‘OK’,
ok: true,
comment: ‘操作成功!’
}
6.查看权限
Request:
{
token: ’xxx’
}
Response:
{
status: ‘OK’,
ok: true,
comment: ‘操作成功!’,
value: {
ids:[id1,id2,id3]
}
}
以上是关于Vue前后端动态权限管理对接方案的主要内容,如果未能解决你的问题,请参考以下文章
SpringBoot+Vue+AntDesign前后端分离解决方案
SpringBoot+Vue+AntDesign前后端分离解决方案
pbootcms对接微信扫码登录代码核心片段和步骤(前后端)