Defer oauth login runtime

web/apps/web-ele/src/views/_core/authentication/login.vue

@@ -8,19 +8,6 @@ import { useRoute, useRouter } from 'vue-router';
 import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { ElMessage } from 'element-plus';
-
-import {
-  getDingTalkAuthorizeUrlApi,
-  getFeishuAuthorizeUrlApi,
-  getGiteeAuthorizeUrlApi,
-  getGitHubAuthorizeUrlApi,
-  getGoogleAuthorizeUrlApi,
-  getMicrosoftAuthorizeUrlApi,
-  getQQAuthorizeUrlApi,
-  getWeChatAuthorizeUrlApi,
-  getWeComAuthorizeUrlApi,
-} from '#/api/core/oauth';
 import { getPreferencesConfigApi } from '#/api/core/ui-config';
 import { useAuthStore } from '#/store';
 
@@ -72,6 +59,49 @@ const getRedirectState = () => {
   return redirect ? JSON.stringify({ redirect }) : undefined;
 };
 
+type OAuthProvider =
+  | 'dingtalk'
+  | 'feishu'
+  | 'gitee'
+  | 'github'
+  | 'google'
+  | 'microsoft'
+  | 'qq'
+  | 'wechat'
+  | 'wecom';
+
+const providerErrorKeyMap: Record<OAuthProvider, string> = {
+  dingtalk: 'authentication.dingtalkLoginFailed',
+  feishu: 'authentication.feishuLoginFailed',
+  gitee: 'authentication.giteeLoginFailed',
+  github: 'authentication.githubLoginFailed',
+  google: 'authentication.googleLoginFailed',
+  microsoft: 'authentication.microsoftLoginFailed',
+  qq: 'authentication.qqLoginFailed',
+  wechat: 'authentication.wechatLoginFailed',
+  wecom: 'authentication.wecomLoginFailed',
+};
+
+async function showOAuthError(message: string) {
+  const { ElMessage } = await import('element-plus');
+  ElMessage.error(message);
+}
+
+async function handleOAuthLogin(provider: OAuthProvider) {
+  try {
+    const { getOAuthAuthorizeUrlApi } = await import('#/api/core/oauth');
+    const data = await getOAuthAuthorizeUrlApi(provider, getRedirectState());
+    if (data?.authorize_url) {
+      window.location.href = data.authorize_url;
+    } else {
+      await showOAuthError($t('authentication.getAuthUrlFailed'));
+    }
+  } catch (error) {
+    console.error(`${provider} OAuth login failed:`, error);
+    await showOAuthError($t(providerErrorKeyMap[provider]));
+  }
+}
+
 // 处理登录提交，支持 redirect 参数重定向
 async function handleLogin(params: Record<string, any>) {
   const redirect = route.query.redirect as string | undefined;
@@ -167,147 +197,47 @@ const formSchema = computed((): VbenFormSchema[] => {
 
 // Gitee OAuth 登录
 async function handleGiteeLogin() {
-  try {
-    const data = await getGiteeAuthorizeUrlApi(getRedirectState());
-    // requestClient 配置了 responseReturn: 'body'，直接返回 data
-    if (data?.authorize_url) {
-      // 重定向到 Gitee 授权页面
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('Gitee 登录失败:', error);
-    ElMessage.error($t('authentication.giteeLoginFailed'));
-  }
+  await handleOAuthLogin('gitee');
 }
 
 // GitHub OAuth 登录
 async function handleGitHubLogin() {
-  try {
-    const data = await getGitHubAuthorizeUrlApi(getRedirectState());
-    if (data?.authorize_url) {
-      // 重定向到 GitHub 授权页面
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('GitHub 登录失败:', error);
-    ElMessage.error($t('authentication.githubLoginFailed'));
-  }
+  await handleOAuthLogin('github');
 }
 
 // QQ OAuth 登录
 async function handleQQLogin() {
-  try {
-    const data = await getQQAuthorizeUrlApi(getRedirectState());
-    if (data?.authorize_url) {
-      // 重定向到 QQ 授权页面
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('QQ 登录失败:', error);
-    ElMessage.error($t('authentication.qqLoginFailed'));
-  }
+  await handleOAuthLogin('qq');
 }
 
 // Google OAuth 登录
 async function handleGoogleLogin() {
-  try {
-    const data = await getGoogleAuthorizeUrlApi(getRedirectState());
-    if (data?.authorize_url) {
-      // 重定向到 Google 授权页面
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('Google 登录失败:', error);
-    ElMessage.error($t('authentication.googleLoginFailed'));
-  }
+  await handleOAuthLogin('google');
 }
 
 // 微信 OAuth 登录
 async function handleWeChatLogin() {
-  try {
-    const data = await getWeChatAuthorizeUrlApi(getRedirectState());
-    if (data?.authorize_url) {
-      // 重定向到微信授权页面（扫码登录）
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('微信登录失败:', error);
-    ElMessage.error($t('authentication.wechatLoginFailed'));
-  }
+  await handleOAuthLogin('wechat');
 }
 
 // 微软 OAuth 登录
 async function handleMicrosoftLogin() {
-  try {
-    const data = await getMicrosoftAuthorizeUrlApi(getRedirectState());
-    if (data?.authorize_url) {
-      // 重定向到微软授权页面
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('微软登录失败:', error);
-    ElMessage.error($t('authentication.microsoftLoginFailed'));
-  }
+  await handleOAuthLogin('microsoft');
 }
 
 // 钉钉 OAuth 登录
 async function handleDingTalkLogin() {
-  try {
-    const data = await getDingTalkAuthorizeUrlApi(getRedirectState());
-    if (data?.authorize_url) {
-      // 重定向到钉钉授权页面
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('钉钉登录失败:', error);
-    ElMessage.error($t('authentication.dingtalkLoginFailed'));
-  }
+  await handleOAuthLogin('dingtalk');
 }
 
 // 飞书 OAuth 登录
 async function handleFeishuLogin() {
-  try {
-    const data = await getFeishuAuthorizeUrlApi(getRedirectState());
-    if (data?.authorize_url) {
-      // 重定向到飞书授权页面
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('飞书登录失败:', error);
-    ElMessage.error($t('authentication.feishuLoginFailed'));
-  }
+  await handleOAuthLogin('feishu');
 }
 
 // 企业微信 OAuth 登录
 async function handleWeComLogin() {
-  try {
-    const data = await getWeComAuthorizeUrlApi(getRedirectState());
-    if (data?.authorize_url) {
-      // 重定向到企业微信授权页面
-      window.location.href = data.authorize_url;
-    } else {
-      ElMessage.error($t('authentication.getAuthUrlFailed'));
-    }
-  } catch (error) {
-    console.error('企业微信登录失败:', error);
-    ElMessage.error($t('authentication.wecomLoginFailed'));
-  }
+  await handleOAuthLogin('wecom');
 }
 </script>