权限控制

系统权限部分说明

前言

权限部分一直都是一个系统的关键,但想要在一个系统中真正用好并不是一件容易的事情,接下来我们看下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: '用户操作日志', childrenPoints: [ { title: '查询', name: 'user-operate-log-search' }, { title: '详情', name: 'user-operate-log-detail' }, { title: '删除', name: 'user-operate-log-delete' } ] }, component: () => import('@/views/user-log/user-operate-log.vue') }, // 人员管理页面路由 { path: '/user-log/user-login-log', name: 'UserLoginLog', meta: { title: '用户登录日志', childrenPoints: [ { title: '查询', name: 'user-login-log-search' }, { title: '删除', name: 'user-login-log-delete' } ] }, component: () => import('@/views/user-log/user-login-log.vue') } ] } ];

例如我们需要在用户操作日志中加入每个登陆用的是否有查询,详情,删除的权限,我们只需在用户操作日志的meta对象中添加childrenPoints属性,其中title为描述这个权限所操作的事件,name为系统中进行权限判定的标识(Smart-Admin规定这里每个单词必须是大写驼峰)。

使用v-privilege控制页面权限

我们在路由中配置好每个模块的具体权限后,下面两种形式都是合法的写法。

  • 原生html形式
<Form inline v-privilege="'user-login-log-search'" class="tools" ref="searchform" :model="searchform" > </Form>
  • 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); } }); } } ]);

API调用权限
添加权限后在后台增加相应权限Api调用接口(如不需要网络调用可忽略)

后台系统设置中点击菜单管理,在左侧列表中选择需要配置的模块,右侧会展示你刚才在路由中配置的权限,点击编辑最下方填入此接口调用的api地址即可。

配置权限

以上步骤完成后,在系统角色管理中将你需要的权限赋予相应的角色后,相应角色对应的用户就只有你允许的那些权限了。

自动化

自动读取路由文件生成菜单,一建保存菜单权限

右侧功能点

根据路由配置中childrenPoints自动生成;
1、功能点name必须保持唯一
2、url:功能点对应的API权限配置

选择url.png

角色管理

image.png

添加角色

根据不同的角色添加不同的权限

设置权限

勾选角色对应的菜单与功能点

添加成员

添加角色对应的成员


作者简介:
卓大, 1024创新实验室主任,混迹于各个技术,熟悉点java,略懂点前端。