权限控制

系统权限部分说明

前言

权限部分一直都是一个系统的关键,但想要在一个系统中真正用好并不是一件容易的事情,接下来我们看下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') } ] } ];

重点关注 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>
  • 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); } }); } } ]);

功能点name必须保持全局唯一!!!

第三步、自动化保存菜单和功能点

使用超级管理员 sa 登录系统,打开 系统设置-》系统设置-》菜单权限页面
1、保存左侧菜单,如图一左侧

系统会自动检测所有router文件的修改,比较各个字段,但凡有变化则会提示更新

2、保存左侧菜单以后选择某个具体菜单,右侧保存具体功能点,如图一右侧

系统会自动检测所有router的privielege是否有在后端有存储,进行比对,若发现差异,提示保存按钮

3、为功能点和页面添加 后端api接口,如图二、图三

添加权限后在后台增加相应权限Api调用接口(如不需要网络调用可忽略),后台系统设置中点击菜单管理,在左侧列表中选择需要配置的模块,右侧会展示你刚才在路由中配置的权限,点击编辑最下方填入此接口调用的api地址即可

第四步、为角色配置不同的权限

使用超级管理员 sa 登录系统,进入系统管理-》人员管理-》角色管理页面进行 勾选 相关的权限,保存即可

设置权限

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

添加成员

添加角色对应的成员


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