权限控制(添加菜单)

9/7/2021

# 前言

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

1
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>

1
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);
            }
          });
        }
      }
    ]);

1
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创新实验室 喝胡辣汤~