84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<template>
|
|
<div class="callback-page">
|
|
<div class="spotlight18" data-cont="页面准备跳转中...">页面准备跳转中...</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { setToken } from '@/utils/auth';
|
|
import { useLogto } from '@logto/vue';
|
|
import { useMessage } from 'naive-ui';
|
|
import { isNewUser, getUserInfo } from '@/api/userApi';
|
|
const { isAuthenticated, getAccessToken } = useLogto();
|
|
const router = useRouter();
|
|
const message = useMessage();
|
|
watch(() => isAuthenticated.value, (newVal) => {
|
|
if (newVal) {
|
|
(async () => {
|
|
try {
|
|
const accessToken = await getAccessToken(import.meta.env.VITE_API_BASE_URL);
|
|
console.log(accessToken);
|
|
setToken(accessToken);
|
|
const isCompleteInfo = await isNewUser(); //表示是否完成信息登记 true表示完成
|
|
if (!isCompleteInfo) return router.push('/register');
|
|
const result = await getUserInfo();
|
|
console.log(result, 'result'); //后面userInfo要存到store里面
|
|
//TODO
|
|
message.success('登录成功！');
|
|
router.push('/layout');
|
|
} catch (error) {
|
|
router.push('/');
|
|
message.error(error.message);
|
|
}
|
|
})();
|
|
}
|
|
},{
|
|
immediate:true
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.callback-page {
|
|
background: #d1d1d1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.spotlight18 {
|
|
color: #eaeaea;
|
|
font-size: 40px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
}
|
|
|
|
.spotlight18:before {
|
|
width: inherit;
|
|
height: inherit;
|
|
content: attr(data-cont);
|
|
color: transparent;
|
|
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #56e28d 100%);
|
|
-webkit-background-clip: text;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
animation: spotlight18 8s linear infinite;
|
|
}
|
|
|
|
@keyframes spotlight18 {
|
|
0% {
|
|
clip-path: ellipse(32px 32px at 0 50%);
|
|
}
|
|
|
|
50% {
|
|
clip-path: ellipse(32px 32px at 100% 50%);
|
|
}
|
|
|
|
100% {
|
|
clip-path: ellipse(32px 32px at 0 50%);
|
|
}
|
|
}
|
|
</style> |