From 1112409a3b2e9db3859ac7984501582a4eb618e5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 24 Mar 2025 20:11:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20request=20&&=20login=20&&=20router?=
 =?UTF-8?q?=E3=80=90e6939e22=E3=80=91=EF=BC=88=E9=AA=8C=E8=AF=81=E7=A0=81?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/auth.ts            | 51 +++++------------
 apps/web-antd/src/router/guard.ts             |  1 -
 .../src/views/_core/authentication/login.vue  | 57 +++++++++++++++----
 3 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/apps/web-antd/src/api/core/auth.ts b/apps/web-antd/src/api/core/auth.ts
index f5e74caf3..f351b13ee 100644
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -30,16 +30,12 @@ export namespace AuthApi {
 
 }
 
-/**
- * 登录
- */
+/** 登录 */
 export async function loginApi(data: AuthApi.LoginParams) {
   return requestClient.post<AuthApi.LoginResult>('/system/auth/login', data);
 }
 
-/**
- * 刷新 accessToken
- */
+/** 刷新 accessToken */
 export async function refreshTokenApi() {
   // TODO @芋艿：refreshToken 传递
   return baseRequestClient.post<AuthApi.RefreshTokenResult>('/system/auth/refresh', {
@@ -47,55 +43,38 @@ export async function refreshTokenApi() {
   });
 }
 
-/**
- * 退出登录
- */
+/** 退出登录 */
 export async function logoutApi() {
   return baseRequestClient.post('/system/auth/logout', {
     withCredentials: true,
   });
 }
 
-// /**
-//  * 获取用户权限码
-//  */
-// export async function getAccessCodesApi() {
-//   return requestClient.get<string[]>('/auth/codes');
-// }
-
-/**
- * 获取权限信息
- */
+/** 获取权限信息 */
 export function getAuthPermissionInfoApi() {
   return requestClient.get<AuthPermissionInfo>(
     '/system/auth/get-permission-info',
   );
 }
 
-/**
- * 获取租户列表
- */
+/** 获取租户列表 */
 export function getTenantSimpleList() {
   return requestClient.get<AuthApi.TenantResult[]>(
     `/system/tenant/simple-list`,
   );
 }
 
-/**
- * 使用租户域名，获得租户信息
- */
+/** 使用租户域名，获得租户信息 */
 export function getTenantByWebsite(website: string) {
-  // TODO @芋艿：改成 params 传递？
   return requestClient.get<AuthApi.TenantResult>(`/system/tenant/get-by-website?website=${website}`);
 }
 
-// TODO 芋艿：后续怎么放好。
-// // 获取验证图片 以及token
-// export async function getCaptcha(data: any) {
-//   return baseRequestClient.post('/system/captcha/get', data);
-// }
-//
-// // 滑动或者点选验证
-// export async function checkCaptcha(data: any) {
-//   return baseRequestClient.post('/system/captcha/check', data);
-// }
\ No newline at end of file
+/** 获取验证码 */
+export async function getCaptcha(data: any) {
+  return baseRequestClient.post('/system/captcha/get', data);
+}
+
+/** 校验验证码 */
+export async function checkCaptcha(data: any) {
+  return baseRequestClient.post('/system/captcha/check', data);
+}
\ No newline at end of file
diff --git a/apps/web-antd/src/router/guard.ts b/apps/web-antd/src/router/guard.ts
index 436d3cd1b..9e464ada6 100644
--- a/apps/web-antd/src/router/guard.ts
+++ b/apps/web-antd/src/router/guard.ts
@@ -109,7 +109,6 @@ function setupAccessGuard(router: Router) {
     const userRoles = userStore.userRoles ?? [];
 
     // 生成菜单和路由
-    debugger;
     const { accessibleMenus, accessibleRoutes } = await generateAccess({
       roles: userRoles,
       router,
diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue
index bdeb9be37..e75bf9381 100644
--- a/apps/web-antd/src/views/_core/authentication/login.vue
+++ b/apps/web-antd/src/views/_core/authentication/login.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
-import type { BasicOption } from '@vben/types';
-import type { AuthApi } from '#/api/core/auth';
+import {type AuthApi, checkCaptcha, getCaptcha } from '#/api/core/auth';
 
 import { computed, markRaw, onMounted, ref } from 'vue';
 
-import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
+import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { useAppConfig } from '@vben/hooks';
 
@@ -13,21 +12,24 @@ import { useAuthStore } from '#/store';
 import { useAccessStore } from '@vben/stores';
 
 import { getTenantSimpleList, getTenantByWebsite } from '#/api/core/auth';
-const { tenantEnable } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const { tenantEnable, captchaEnable } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
 
-// 租户列表
-const tenantList = ref<AuthApi.TenantResult[]>([]);
-
-// 获取 AuthenticationLogin 组件的引用
 const loginRef = ref();
+const verifyRef = ref();
+
+const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
 
 /** 获取租户列表，并默认选中 */
 const fetchTenantList = async () => {
+  if (!tenantEnable) {
+    return;
+  }
   try {
     // 获取租户列表、域名对应租户
     const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
@@ -56,7 +58,31 @@ const fetchTenantList = async () => {
   }
 };
 
-// 组件挂载时获取租户信息
+/** 处理登录 */
+const handleLogin = async (values: any) => {
+  // 如果开启验证码，则先验证验证码
+  if (captchaEnable) {
+    verifyRef.value.show();
+    return;
+  }
+
+  // 无验证码，直接登录
+  await authStore.authLogin(values);
+}
+
+/** 验证码通过，执行登录 */
+const handleVerifySuccess = async ({ captchaVerification }: any) => {
+  try {
+    await authStore.authLogin({
+      ...(await loginRef.value.getFormApi().getValues()),
+      captchaVerification,
+    });
+  } catch (error) {
+    console.error('Error in handleLogin:', error);
+  }
+};
+
+/** 组件挂载时获取租户信息 */
 onMounted(() => {
   fetchTenantList();
 });
@@ -122,6 +148,17 @@ const formSchema = computed((): VbenFormSchema[] => {
     ref="loginRef"
     :form-schema="formSchema"
     :loading="authStore.loginLoading"
-    @submit="authStore.authLogin"
+    @submit="handleLogin"
+  />
+  <!-- TODO @芋艿：貌似加了后，登录界面变形了 -->
+  <Verification
+    ref="verifyRef"
+    v-if="captchaEnable"
+    :captcha-type="captchaType"
+    :check-captcha-api="checkCaptcha"
+    :get-captcha-api="getCaptcha"
+    :img-size="{ width: '400px', height: '200px' }"
+    mode="pop"
+    @on-success="handleVerifySuccess"
   />
 </template>