106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<script setup>
|
||
import { onBeforeUnmount, onMounted, ref } from "vue";
|
||
import { useHead, useRouter } from "#app";
|
||
import { NuxtLink } from "#components";
|
||
import Button from "primevue/button";
|
||
import Message from "primevue/message";
|
||
import { useAuth } from "~/lib/auth.js";
|
||
|
||
definePageMeta({ layout: "blank" });
|
||
useHead({
|
||
title: "正在进入会员中心",
|
||
meta: [{ name: "referrer", content: "no-referrer" }],
|
||
});
|
||
|
||
const auth = useAuth();
|
||
const router = useRouter();
|
||
const isVerifying = ref(false);
|
||
const verificationError = ref("");
|
||
let disposed = false;
|
||
|
||
async function verifyAndEnterConsole() {
|
||
if (isVerifying.value) return;
|
||
isVerifying.value = true;
|
||
verificationError.value = "";
|
||
try {
|
||
// The route guard owns credential extraction; this page never reads it from the URL.
|
||
await auth.verifyLegacyLogin();
|
||
if (!disposed) await router.replace("/");
|
||
} catch (error) {
|
||
if (!disposed) {
|
||
verificationError.value =
|
||
error instanceof Error ? error.message : "登录验证失败，请稍后重试。";
|
||
}
|
||
} finally {
|
||
if (!disposed) isVerifying.value = false;
|
||
}
|
||
}
|
||
|
||
onMounted(verifyAndEnterConsole);
|
||
onBeforeUnmount(() => {
|
||
disposed = true;
|
||
auth.cancelLegacyLogin();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<section
|
||
class="auth-card legacy-login"
|
||
:aria-busy="isVerifying"
|
||
aria-labelledby="legacy-login-title"
|
||
>
|
||
<span class="legacy-login-icon" aria-hidden="true">
|
||
<i :class="isVerifying ? 'pi pi-spin pi-spinner' : 'pi pi-user'" />
|
||
</span>
|
||
<h1 id="legacy-login-title">
|
||
{{ verificationError ? "暂时无法进入会员中心" : "正在进入会员中心" }}
|
||
</h1>
|
||
<Message v-if="verificationError" severity="error" :closable="false">
|
||
{{ verificationError }}
|
||
</Message>
|
||
<p v-else role="status">正在验证登录身份，请稍候…</p>
|
||
<div v-if="verificationError" class="legacy-login-actions">
|
||
<Button
|
||
label="重新验证"
|
||
icon="pi pi-refresh"
|
||
:loading="isVerifying"
|
||
@click="verifyAndEnterConsole"
|
||
/>
|
||
<NuxtLink to="/login" class="legacy-login-link">使用账号登录</NuxtLink>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.legacy-login {
|
||
text-align: center;
|
||
}
|
||
.legacy-login-icon {
|
||
background: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
|
||
width: 56px;
|
||
height: 56px;
|
||
color: var(--p-primary-color);
|
||
border-radius: 50%;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
font-size: 1.75em;
|
||
display: inline-flex;
|
||
}
|
||
.legacy-login p {
|
||
color: var(--p-text-muted-color);
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
}
|
||
.legacy-login-actions {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
margin-top: 24px;
|
||
display: flex;
|
||
}
|
||
.legacy-login-link {
|
||
color: var(--p-primary-color);
|
||
text-underline-offset: 3px;
|
||
}
|
||
</style>
|