index.vue
2.42 KB
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<script lang="ts" setup>
import type { Recordable } from '@vben/types';
import { useRouter } from 'vue-router';
import { useAccess } from '@vben/access';
import { Page } from '@vben/common-ui';
import { resetAllStores, useUserStore } from '@vben/stores';
import { Button, Card } from 'ant-design-vue';
import { useAuthStore } from '#/store';
const accounts: Record<string, Recordable<any>> = {
admin: {
password: '123456',
username: 'admin',
},
super: {
password: '123456',
username: 'vben',
},
user: {
password: '123456',
username: 'jack',
},
};
const { accessMode, toggleAccessMode } = useAccess();
const userStore = useUserStore();
const accessStore = useAuthStore();
const router = useRouter();
function roleButtonType(role: string) {
return userStore.userRoles.includes(role) ? 'primary' : 'default';
}
async function changeAccount(role: string) {
if (userStore.userRoles.includes(role)) {
return;
}
const account = accounts[role];
resetAllStores();
if (account) {
await accessStore.authLogin(account, async () => {
router.go(0);
});
}
}
async function handleToggleAccessMode() {
if (!accounts.super) {
return;
}
await toggleAccessMode();
resetAllStores();
await accessStore.authLogin(accounts.super, async () => {
setTimeout(() => {
router.go(0);
}, 150);
});
}
</script>
<template>
<Page
:title="`${accessMode === 'frontend' ? '前端' : '后端'}页面访问权限演示`"
description="切换不同的账号，观察左侧菜单变化。"
>
<Card class="mb-5" title="权限模式">
<span class="font-semibold">当前权限模式:</span>
<span class="mx-4 text-primary">{{
accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
}}</span>
<Button type="primary" @click="handleToggleAccessMode">
切换为{{ accessMode === 'frontend' ? '后端' : '前端' }}权限模式
</Button>
</Card>
<Card title="账号切换">
<Button :type="roleButtonType('super')" @click="changeAccount('super')">
切换为 Super 账号
</Button>
<Button
:type="roleButtonType('admin')"
class="mx-4"
@click="changeAccount('admin')"
>
切换为 Admin 账号
</Button>
<Button :type="roleButtonType('user')" @click="changeAccount('user')">
切换为 User 账号
</Button>
</Card>
</Page>
</template>