perf: 支持oidc单点登录

2026-05-16 21:27:34 +08:00 · 2025-11-27 01:59:22 +08:00
parent c7b298c46f
commit ec75afbc44
25 changed files with 633 additions and 103 deletions
@@ -0,0 +1,45 @@
+import { request } from "/src/api/service";
+
+const apiPrefix = "/oauth";
+
+export async function OauthLogin(type: string) {
+  return await request({
+    url: apiPrefix + `/login`,
+    method: "post",
+    data: {
+      type,
+    },
+  });
+}
+
+export async function OauthCallback(type: string, query: Record<string, string>) {
+  return await request({
+    url: apiPrefix + `/callback`,
+    method: "post",
+    data: {
+      type,
+      ...query,
+    },
+  });
+}
+
+export async function AutoRegister(type: string, code: string) {
+  return await request({
+    url: apiPrefix + `/autoRegister`,
+    method: "post",
+    data: {
+      validationCode: code,
+      type,
+    },
+  });
+}
+
+export async function BindUser(code: string) {
+  return await request({
+    url: apiPrefix + `/bind`,
+    method: "post",
+    data: {
+      validationCode: code,
+    },
+  });
+}
@@ -0,0 +1,105 @@
+<template>
+  <div class="oauth-callback-page">
+    <div class="oauth-callback-content">
+      <div v-if="!bindRequired" class="oauth-callback-title">
+        <span>登录中...</span>
+      </div>
+      <div v-else class="oauth-callback-title">
+        <div>第三方登录成功，还未绑定账号，请选择</div>
+
+        <div>
+          <a-button class="w-full mt-5" type="primary" @click="goBindUser">绑定已有账号</a-button>
+          <a-button class="w-full mt-5" type="primary" @click="autoRegister">创建新账号</a-button>
+        </div>
+
+        <div class="w-full mt-5">
+          <router-link to="/login" class="w-full mt-5" type="primary">返回登录页</router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import * as api from "./api";
+import { useRoute, useRouter } from "vue-router";
+import { useUserStore } from "/@/store/user";
+
+const route = useRoute();
+const router = useRouter();
+const oauthType = route.params.type as string;
+
+const query = route.query as Record<string, string>;
+
+const userStore = useUserStore();
+
+const bindRequired = ref(false);
+const bindCode = ref("");
+
+async function handleOauthCallback() {
+  //处理第三方登录回调
+  const res = await api.OauthCallback(oauthType, query);
+  if (res.token) {
+    //登录成功
+    userStore.onLoginSuccess(res);
+    //跳转到首页
+    router.replace("/");
+    return;
+  }
+  if (res.bindRequired) {
+    //需要绑定
+    bindRequired.value = true;
+    bindCode.value = res.validationCode;
+  }
+}
+
+onMounted(async () => {
+  await handleOauthCallback();
+});
+
+async function goBindUser() {
+  //绑定已有账号
+  router.replace({
+    path: "/login",
+    query: {
+      bindCode: bindCode.value,
+    },
+  });
+}
+
+async function autoRegister() {
+  //自动注册账号
+  const res = await api.AutoRegister(oauthType, bindCode.value);
+  //登录成功
+  userStore.onLoginSuccess(res);
+  //跳转到首页
+  router.replace("/");
+}
+</script>
+<style lang="less">
+.oauth-callback-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+
+  .oauth-callback-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    border-radius: 16px;
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
+    width: 500px;
+    margin: 0 auto;
+    margin-top: 50px;
+
+    .oauth-callback-title {
+      font-size: 24px;
+      font-weight: 500;
+    }
+  }
+}
+</style>
@@ -0,0 +1,45 @@
+<template>
+  <div class="oauth-footer">
+    <div v-for="item in oauthList" :key="item.type">
+      <div class="oauth-icon-button pointer" @click="goOauthLogin(item.type)">
+        <el-icon :icon="item.icon" />
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import * as api from "./api";
+
+const oauthList = ref([
+  {
+    name: "OIDC",
+    type: "oidc",
+    icon: "ion:oidc",
+  },
+]);
+
+async function goOauthLogin(type: string) {
+  //获取第三方登录URL
+  const res = await api.OauthLogin(type);
+  const loginUrl = res.loginUrl;
+  window.location.href = loginUrl;
+}
+</script>
+<style lang="less">
+.oauth-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  .oauth-icon-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-radius: 100px;
+  }
+}
+</style>