jdk 17

demo/frontend/src/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+
+<script setup lang="ts">
+</script>

demo/frontend/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

demo/frontend/src/components/Home.vue

@@ -0,0 +1,37 @@
+<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>

demo/frontend/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router'
+import unifiedLoginSDK from "oauth2-login-sdk";
+
+// 初始化配置
+unifiedLoginSDK.init({
+    clientId: 'b55c88c20db94790a60a5075',
+    registrationId: 'demo',
+    storageType: 'localStorage',
+    basepath: '/demo-api',
+    idpLogoutUrl: 'http://localhost/logout',
+    homePage: 'http://localhost:9506/home'
+});
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

demo/frontend/src/router/index.ts

@@ -0,0 +1,31 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import unifiedLoginSDK from 'oauth2-login-sdk';
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      redirect: '/home'
+    },
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('../components/Home.vue')
+    }
+  ]
+})
+router.beforeEach(async (to, _from, next) => {
+  debugger
+  if (!unifiedLoginSDK.isAuthenticated()) {
+    if (to.path === '/oauth2/callback') {
+      await unifiedLoginSDK.handleCallback()
+    }else{
+      await unifiedLoginSDK.login()
+    }
+  } else {
+    next()
+  }
+})
+
+export default router

demo/frontend/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}