<template>
  <div>
    hello {{ userInfo?.username }} is login
    <div v-if="loading">Loading menus...</div>
    <div v-else>
      menus:
      {{ JSON.stringify(menus) }}
    </div>
    <button @click="unifiedLoginSDK.logout()">退出</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {type RouterInfo, unifiedLoginSDK, type UserInfo} from "oauth2-login-sdk";

const userInfo = ref<UserInfo | null>(null);
const menus = ref<RouterInfo | null>(null);
const loading = ref(false);



// 在组件挂载后获取菜单
onMounted(async () => {
  loading.value = true;
  try {
    // 同步获取用户信息
    userInfo.value = unifiedLoginSDK.getUserInfo();
    menus.value = await unifiedLoginSDK.getRoutes();
  } catch (error) {
    console.error('Failed to fetch menus:', error);
    menus.value = null;
  } finally {
    loading.value = false;
  }
});
</script>