32 lines
1.3 KiB
Vue
32 lines
1.3 KiB
Vue
<script setup lang="ts">
|
||
import { useUserStore } from '@/store/user'
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { firstAccessiblePath } from '@/router/access'
|
||
import { handledError } from '@/utils/error'
|
||
const user = useUserStore()
|
||
const router = useRouter()
|
||
const checking = ref(false)
|
||
async function checkAccess(): Promise<void> {
|
||
if (checking.value) return
|
||
checking.value = true
|
||
try {
|
||
await user.fetchUserInfo()
|
||
const target = firstAccessiblePath(router, user.roles)
|
||
if (target !== '/no-access') await router.replace(target)
|
||
} catch (error) { handledError(error) }
|
||
finally { checking.value = false }
|
||
}
|
||
</script>
|
||
<template>
|
||
<section class="card access-empty" aria-labelledby="access-title">
|
||
<h1 id="access-title" class="page-title">暂无可访问功能</h1>
|
||
<p>当前账号尚未分配功能权限。请联系管理员分配角色，授权后可在这里重新检查。</p>
|
||
<el-button type="primary" :loading="checking" @click="checkAccess">重新检查权限</el-button>
|
||
</section>
|
||
</template>
|
||
<style scoped>
|
||
.access-empty { max-width: 640px; margin: 48px auto; padding: 40px 24px; text-align: center; }
|
||
.access-empty p { max-width: 38em; margin: 16px auto 24px; color: var(--ys-ink-2); line-height: 1.8; }
|
||
</style>
|