# 前言
权限部分一直都是一个系统的关键,但想要在一个系统中真正用好并不是一件容易的事情,接下来我们看下Smart-Admin中是怎么处理权限问题的。
# 如何进行权限配置?
权限配置集中在项目的路由中(router文件夹下),由于每个模块都会定义一个module这给我们分模块定义权限提供了天然优势。
# 我们以用户日志模块为例:
# 第一步、路由配置
在路由中设置权限
import Main from '@/components/main';
// 用户日志
export const userLog = [
{
path: '/user-log',
name: 'UserLog',
component: Main,
meta: {
title: '用户日志',
icon: 'ios-paper-outline'
},
children: [
// 发送email
{
path: '/user-log/user-operate-log',
name: 'UserOperateLog',
meta: {
title: '用户操作日志',
privilege: [
{ title: '查询', name: 'user-operate-log-search' },
{ title: '详情', name: 'user-operate-log-detail' },
{ title: '删除', name: 'user-operate-log-delete' }
]
},
component: () => import('@/views/system/user-log/user-operate-log.vue')
},
// 人员管理页面路由
{
path: '/user-log/user-login-log',
name: 'UserLoginLog',
meta: {
title: '用户登录日志',
privilege: [
{ title: '查询', name: 'user-login-log-search' },
{ title: '删除', name: 'user-login-log-delete' }
]
},
component: () => import('@/views/system/user-log/user-login-log.vue')
}
]
}
];
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
重点关注 meta 节点数据,meta节点中privilege
属性表示此页面的功能点
例如我们需要在用户操作日志中加入每个登陆用的是否有查询,详情,删除的权限,我们只需在用户操作日志的meta对象中添加privilege数组属性,其中title为描述这个权限所操作的事件,name为系统中进行权限判定的标识
# 第二步、使用v-privilege控制页面权限
我们在路由中配置好每个模块的具体权限后,下面两种形式都是合法的写法。
- 原生html形式
<Form
inline
v-privilege="'user-login-log-search'"
class="tools"
ref="searchform"
:model="searchform"
>
</Form>
2
3
4
5
6
7
8
9
10
- js createElement函数来创建Dom节点
this.$tableAction(h, [
{
title: '删除',
directives: [
{
name: 'privilege',
value: 'user-login-log-delete'
}
],
action: () => {
this.$Modal.confirm({
title: '友情提醒',
content: '确定要删除吗?',
onOk: () => {
this.handleDelete(param.row.id);
}
});
}
}
]);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
功能点name
必须保持全局唯一!!!
# 第三步、自动化保存菜单和功能点
前提: 如果新添加路由文件,切记要在 对应目录的index.js里引入你新加的路由文件(很多人忘记这一步),比如:
在
src/router/module/business/index.js
中引入了peony.js
!
1、使用超级管理员 sa 登录系统,打开 系统设置-》系统设置-》菜单权限
页面,保存左侧菜单,如图一左侧
系统会自动检测所有router文件的修改,比较各个字段,但凡有变化则会提示更新
2、保存左侧菜单以后选择某个具体菜单,右侧保存具体功能点,如图一右侧
系统会自动检测所有router的privielege是否有在后端有存储,进行比对,若发现差异,提示保存按钮
3、为功能点和页面添加 后端api接口,如图二、图三
添加权限后在后台增加相应权限Api调用接口(如不需要网络调用可忽略),后台系统设置中点击菜单管理,在左侧列表中选择需要配置的模块,右侧会展示你刚才在路由中配置的权限,点击编辑最下方填入此接口调用的api地址即可
![]() | ![]() | ![]() |
# 第四步、为角色配置不同的权限
使用超级管理员 ++sa++ 登录系统,进入系统管理-》人员管理-》角色管理
页面进行 勾选 相关的权限,保存即可
# 第五步、设置权限
勾选角色对应的菜单与功能点
# 第六步、添加成员
添加角色对应的成员
作者简介: 卓大 (opens new window), 1024创新实验室主任,混迹于各个技术圈,熟悉点java,略懂点前端。
![]() | ![]() | ![]() |
加“卓大”微信,入群 | 关注 1024创新实验室! | 我要请 1024创新实验室 喝胡辣汤~ |