src/App.vue

@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted } from "vue";
 import { RouterView } from "vue-router";
 
+import { isDingTalkContainer } from "@/api/dingtalk";
 import router from "@/router";
 import { useAuthStore } from "@/stores/auth.store";
 
@@ -17,9 +18,28 @@ function handleAuthExpired() {
   }
 }
 
-onMounted(() =>
-  window.addEventListener("risk-auth-expired", handleAuthExpired),
-);
+async function syncDingTalkUser() {
+  if (
+    !isDingTalkContainer() ||
+    !auth.user?.dingtalkId ||
+    auth.user.dingtalkId.startsWith("local-")
+  ) {
+    return;
+  }
+  try {
+    await auth.dingTalkLogin(true);
+  } catch {
+    // A stale token must remain usable if DingTalk is temporarily unavailable.
+  }
+}
+
+onMounted(async () => {
+  window.addEventListener("risk-auth-expired", handleAuthExpired);
+  // Restore /auth/me first: on a hard refresh auth.user starts as null, so a
+  // synchronous check would skip the DingTalk profile resync entirely.
+  if (auth.token && !auth.user) await auth.restore();
+  await syncDingTalkUser();
+});
 onUnmounted(() =>
   window.removeEventListener("risk-auth-expired", handleAuthExpired),
 );

src/api/dingtalk.ts

@@ -3,14 +3,43 @@ import dd from "dingtalk-jsapi";
 import { getDingTalkConfig, loginWithDingTalk } from "@/api/auth";
 import type { AuthTokenData } from "@/types/auth";
 
+declare global {
+  interface Window {
+    dingtalk?: { platform?: { invokeAPI?: unknown } };
+    DingTalkJSBridge?: unknown;
+  }
+}
+
 export function isDingTalkContainer() {
-  return (
-    typeof navigator !== "undefined" && /DingTalk/i.test(navigator.userAgent)
+  if (typeof window === "undefined" || typeof navigator === "undefined")
+    return false;
+  const userAgent =
+    navigator.userAgent ||
+    (navigator as Navigator & { swuserAgent?: string }).swuserAgent ||
+    "";
+  return Boolean(
+    /DingTalk|dingtalk-win|dd-web/i.test(userAgent) ||
+      window.DingTalkJSBridge ||
+      window.dingtalk?.platform?.invokeAPI ||
+      // DingTalk desktop can expose its container identity through window.name
+      // even when the embedded browser omits DingTalk from userAgent.
+      /dingtalk/i.test(window.name || ""),
   );
 }
 
+export async function waitForDingTalkContainer(timeoutMs = 5000) {
+  if (isDingTalkContainer()) return true;
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+    if (isDingTalkContainer()) return true;
+  }
+  return false;
+}
+
 export async function authenticateWithDingTalk(): Promise<AuthTokenData> {
-  if (!isDingTalkContainer()) throw new Error("请从钉钉工作台打开此应用");
+  if (!(await waitForDingTalkContainer()))
+    throw new Error("请从钉钉工作台打开此应用");
   const configResponse = await getDingTalkConfig();
   const config = configResponse.data.data;
   if (!config) throw new Error("钉钉免登配置不完整");

src/pages/LoginPage.vue

@@ -9,7 +9,7 @@ import {
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 
-import { isDingTalkContainer } from "@/api/dingtalk";
+import { waitForDingTalkContainer } from "@/api/dingtalk";
 import { useAuthStore } from "@/stores/auth.store";
 
 const auth = useAuthStore();
@@ -19,6 +19,7 @@ const useDevelopmentLogin = ref(true);
 const username = ref("local-admin");
 const password = ref("risk-admin-2026");
 const autoDingTalkAttempted = ref(false);
+const autoDingTalk = ref(false);
 
 // 登录后的统一落点是智能对话页，避免从其他受保护页面跳转到登录后
 // 又回到原页面，保证用户进入系统后先看到对话工作台。
@@ -49,11 +50,14 @@ async function submitDingTalk() {
   }
 }
 
-onMounted(() => {
-  if (!isDingTalkContainer() || autoDingTalkAttempted.value) return;
+onMounted(async () => {
+  if (autoDingTalkAttempted.value) return;
+  const inDingTalk = await waitForDingTalkContainer();
+  if (!inDingTalk || autoDingTalkAttempted.value) return;
   autoDingTalkAttempted.value = true;
+  autoDingTalk.value = true;
   mode.value = "dingtalk";
-  void submitDingTalk();
+  await submitDingTalk();
 });
 </script>
 
@@ -144,6 +148,7 @@ onMounted(() => {
           }}
         </p>
         <button
+          v-if="!autoDingTalk || auth.error"
           class="login-submit"
           type="button"
           :disabled="auth.loading"

src/stores/auth.store.ts

@@ -61,7 +61,7 @@ export const useAuthStore = defineStore("auth", () => {
     }
   }
 
-  async function dingTalkLogin() {
+  async function dingTalkLogin(preserveSessionOnFailure = false) {
     loading.value = true;
     error.value = null;
     try {
@@ -69,7 +69,7 @@ export const useAuthStore = defineStore("auth", () => {
       saveToken(response.accessToken);
       user.value = response.user;
     } catch (reason) {
-      clear();
+      if (!preserveSessionOnFailure) clear();
       error.value = reason instanceof Error ? reason.message : "钉钉免登失败";
       throw reason;
     } finally {