accompany_admin_pc/src/views/login/OauthCallBack.vue

<template>
  <div class="callback-page">
    <div class="spotlight18" data-cont="页面准备跳转中...">页面准备跳转中...</div>
  </div>
</template>

<script setup>
import { setToken } from '@/utils/auth';
import { useAuth0 } from '@auth0/auth0-vue';
import { useMessage } from 'naive-ui';

const { getAccessTokenSilently } = useAuth0();
const router = useRouter();
const message = useMessage();
const oSomethingWithToken = async () => {
  try {
    const token = await getAccessTokenSilently();
    setToken(token);
    message.success('登录成功！');
    router.push('/layout');
  } catch (error) {
    router.push('/');
    message.error('错误！');
  }

}
onMounted(() => {
  oSomethingWithToken();
})
</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>