按钮级权限控制

发表于 | 分类于 | | 阅读次数:
字数统计: 438 字 | 阅读时长 ≈ 2 分钟

按钮级权限控制。需后端配合给出接口，前端控制按钮的显隐性。

接口参数及返回格式

接口参数：当前url

1
url: "/jgpt/schoolCount/schoolManage"

后台接口格式：

包含按钮名称、唯一的code、是否展示的布尔值。

按钮权限的封装

@/utils/btn-authority.js:

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
import API from '@/plugins/api';

// config {按钮的集合}
const getAuthority = (config, item = []) => {
  //深拷贝一次 不改变函数的形参
  let myConfig = JSON.parse(JSON.stringify(config));

  try {
    item.forEach(t => {
      Object.keys(myConfig).forEach(i => {
        if (myConfig[i].actionCode === t.actionCode) {
          myConfig[i].display = t.display;
        }
      });
    });
  } catch (error) {
    throw new Error('权限配置失败，功能ID验证失败。');
  } finally {
    // 无法在finally 使用 return语句
  }
  return myConfig;
};

/**
 * 配置按钮的权限服务器端URL地址
 * 返回的结果是[{id,display},]
 */
export const fetchAuthority = config => {
  let queryData = {
    url: ''
  };
  queryData.url = window.currentRoute.path;
  return API['permission/btn'](queryData).then(data => {
    let authority = getAuthority(config, data);

    return authority;
  });
};

接口调用的封装参见axios封装及api调用方法

使用方法

定义配置文件config.js:

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
export default {
  authority: {
    // 学校管理详情
    schoolManage: {
      func: {
        edit: {
          display: false,
          id: 12,
          name: '编辑',
          actionCode: 'schoolList_base_modify'
        },
        search: {
          display: false,
          id: 81,
          name: '查询',
          actionCode: 'schoolList_search'
        },
        export: {
          display: false,
          id: 83,
          name: '导出',
          actionCode: 'schoolList_export'
        },
        import: {
          display: false,
          id: 82,
          name: '导入',
          actionCode: 'schoolList_import'
        },
        delete: {
          display: false,
          id: 3100,
          name: '删除',
          actionCode: 'schoolList_delete'
        }
      },
      pageName: '学校管理'
    }
  }
};

页面index.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { fetchAuthority } from '@/utils/btn-authority';
import config from '../config.js';

data() {
  return {
    authority: config.authority.schoolManage.func
  }  
}

created() {
  // 获取按钮的权限
  fetchAuthority(this.authority).then(data => {
    this.authority = data;
  });
}

模板：

1
2
<Button v-if="authority.export.display">导出</Button>
<Button v-if="authority.import.display">导入</Button>