Vue 前端权限控制、按钮权限、多种方式
# 权限控制
# 函数方式
usePermission (opens new window) 还提供了按钮级别的权限控制。
<template>
<a-button v-if="hasPermission(['sys:user:view', 'sys:empUser:view'])" color="error" class="mx-4">
拥有 [sys:user:view, sys:empUser:view] 权限字符串可见
</a-button>
</template>
<script lang="ts">
import { usePermission } from '/@/hooks/web/usePermission';
import { RoleEnum } from '/@/enums/roleEnum';
export default defineComponent({
setup() {
const { hasPermission } = usePermission();
return { hasPermission };
},
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 组件方式
用于项目权限的组件，一般用于按钮级等细粒度权限管理
<template>
<div>
<Authority :value="'sys:user:view'">
<a-button type="primary" block> 只有 sys:user:view 权限字符串的可见 </a-button>
</Authority>
</div>
</template>
<script>
import Authority from '/@/components/Authority';
import { defineComponent } from 'vue';
export default defineComponent({
components: { Authority },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 指令方式
提示
指令方式不能动态更改权限（但使用方法最简单）
<a-button v-auth="'sys:user:view'" type="primary" class="mx-4">
拥有 sys:user:view 权限字符串的可见
</a-button>
1
2
3
2
3
# 表格列权限
const columns: BasicColumn[] = [
{
title: '列名1',
dataIndex: 'field1',
width: 160,
// 表格列权限控制，指定权限字符串
auth: 'test:testData:edit',
// 这里还可以使用 usePermission 函数方式进行动态判断权限
ifShow: () => hasPermission('sys:test:view'),
// 根据字段数值判断表格列是否显示
ifShow: () => record.status === '0',
},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 表格操作列权限
const actionColumn: BasicColumn = {
actions: (record: Recordable) => [
{
// 按钮权限控制，指定权限字符串
auth: 'test:testData:edit',
// 这里还可以使用 usePermission 函数方式进行动态判断权限
ifShow: () => hasPermission('sys:test:view'),
// 根据字段数值判断按钮是否显示
ifShow: () => record.status === '0',
},
],
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 表单字段权限
const inputFormSchemas: FormSchema[] = [
{
label: t('字段名称'),
field: 'field1',
component: 'Input',
componentProps: {
maxlength: 500,
},
// 根据数据值判断表单控件是否显示（正常渲染控件，只是控制显示隐藏）
show: ({ values }) => record.status === '0',
// 根据数据值判断表单控件是否显示（为 false 时不渲染控件）
ifShow: ({ values }) => record.status === '0',
// 如果有 sys:test:view 查看权限，则显示控件
ifShow: ({ values }) => hasPermission('sys:test:view'),
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 弹窗按钮权限
提交按钮权限，控制按钮是否显示，举例如下：
<BasicDrawer :okAuth="'test:testData:edit'" />
1
