权限控制(添加菜单)

1024创新实验室 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);
            }
          });
        }
      }
    ]);