Vue前后端动态权限管理对接方案

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

前后端动态权限" title="动态权限">动态权限管理对接方案
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前后端动态权限管理对接方案 的全部内容， 来源链接： utcz.com/z/380639.html

回到顶部