提交 | 用户 | age
|
2f6253
|
1 |
<template> |
03b602
|
2 |
<div class="p-4 m-4 demo"> |
2f6253
|
3 |
<Alert message="刷新后会还原" show-icon /> |
陈 |
4 |
|
|
5 |
<CurrentPermissionMode /> |
|
6 |
|
|
7 |
<p> |
|
8 |
当前拥有的code列表: <a> {{ permissionStore.getPermCodeListState }} </a> |
|
9 |
</p> |
|
10 |
<Divider /> |
|
11 |
<Alert class="mt-4" type="info" message="点击后请查看按钮变化" show-icon /> |
|
12 |
<Divider /> |
|
13 |
<a-button type="primary" class="mr-2" @click="changePermissionCode('2')"> |
|
14 |
点击切换按钮权限(用户id为2) |
|
15 |
</a-button> |
|
16 |
<a-button type="primary" @click="changePermissionCode('1')"> |
|
17 |
点击切换按钮权限(用户id为1,默认) |
|
18 |
</a-button> |
|
19 |
|
|
20 |
<Divider>组件方式判断权限</Divider> |
|
21 |
<Authority :value="'1000'"> |
|
22 |
<a-button type="primary" class="mx-4">拥有code ['1000']权限可见</a-button> |
|
23 |
</Authority> |
|
24 |
|
|
25 |
<Authority :value="'2000'"> |
|
26 |
<a-button color="success" class="mx-4">拥有code ['2000']权限可见</a-button> |
|
27 |
</Authority> |
|
28 |
|
|
29 |
<Authority :value="['1000', '2000']"> |
|
30 |
<a-button color="error" class="mx-4">拥有code ['1000','2000']角色权限可见</a-button> |
|
31 |
</Authority> |
|
32 |
|
|
33 |
<Divider>函数方式方式判断权限</Divider> |
|
34 |
<a-button v-if="hasPermission('1000')" type="primary" class="mx-4"> |
|
35 |
拥有code ['1000']权限可见 |
|
36 |
</a-button> |
|
37 |
|
|
38 |
<a-button v-if="hasPermission('2000')" color="success" class="mx-4"> |
|
39 |
拥有code ['2000']权限可见 |
|
40 |
</a-button> |
|
41 |
|
|
42 |
<a-button v-if="hasPermission(['1000', '2000'])" color="error" class="mx-4"> |
|
43 |
拥有code ['1000','2000']角色权限可见 |
|
44 |
</a-button> |
|
45 |
|
|
46 |
<Divider>指令方式方式判断权限(该方式不能动态修改权限.)</Divider> |
|
47 |
<a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button> |
|
48 |
|
|
49 |
<a-button v-auth="'2000'" color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button> |
|
50 |
|
|
51 |
<a-button v-auth="['1000', '2000']" color="error" class="mx-4"> |
|
52 |
拥有code ['1000','2000']角色权限可见 |
|
53 |
</a-button> |
|
54 |
</div> |
|
55 |
</template> |
|
56 |
<script lang="ts"> |
|
57 |
import { defineComponent } from 'vue'; |
|
58 |
import { Alert, Divider } from 'ant-design-vue'; |
|
59 |
import CurrentPermissionMode from '../CurrentPermissionMode.vue'; |
|
60 |
import { usePermission } from '/@/hooks/web/usePermission'; |
|
61 |
import Authority from '/@/components/Authority'; |
|
62 |
import { getPermCodeByUserId } from '/@/api/sys/user'; |
|
63 |
import { permissionStore } from '/@/store/modules/permission'; |
|
64 |
import { PermissionModeEnum } from '/@/enums/appEnum'; |
|
65 |
export default defineComponent({ |
|
66 |
components: { Alert, CurrentPermissionMode, Divider, Authority }, |
|
67 |
setup() { |
|
68 |
const { hasPermission } = usePermission(); |
|
69 |
|
|
70 |
// !模拟从后台获取权限编码, 该函数可能只需要执行一次,实际项目可以自行放到合适的时机 |
|
71 |
async function changePermissionCode(userId: string) { |
|
72 |
const codeList = await getPermCodeByUserId({ userId }); |
|
73 |
permissionStore.commitPermCodeListState(codeList); |
|
74 |
} |
|
75 |
// 默认初始化为1 |
|
76 |
changePermissionCode('1'); |
|
77 |
return { |
|
78 |
hasPermission, |
|
79 |
permissionStore, |
|
80 |
changePermissionCode, |
|
81 |
PermissionModeEnum, |
|
82 |
}; |
|
83 |
}, |
|
84 |
}); |
|
85 |
</script> |
03b602
|
86 |
<style lang="less" scoped> |
N |
87 |
.demo { |
|
88 |
background: #fff; |
|
89 |
} |
|
90 |
</style> |