fix：splash 界面重定向界面问题

2026-06-11 16:06:36 +08:00
parent a6bc6941d4
commit e3d549d660
6 changed files with 30 additions and 66 deletions
@@ -15,8 +15,8 @@
 *
 * 跳转时序：
 *   1. 派发事件（如 `AuthGuestLoginSubmitted`）
- *   2. auth machine 进 loading state → API 调用 → onDone → state.isSuccess = true
- *   3. useEffect 监听到 isSuccess → 调 chat/user store 初始化 + router.replace("/chat")
+ *   2. auth machine 进 loading state → API 调用 → onDone → loginStatus 更新
+ *   3. useEffect 监听到 isSuccess (= loginStatus !== "notLoggedIn") → 调 chat/user store 初始化 + router.replace("/chat")
 */
 import { useRouter } from "next/navigation";
 import { useEffect, useRef } from "react";
@@ -47,17 +47,10 @@ export function SplashButton() {

  // 邮箱/OAuth/游客登录成功跳 /chat + 通知 chat/user 初始化
  useEffect(() => {
-    // DEBUG：isSuccess 状态透明化
-    console.log("[splash-button] useEffect state.isSuccess", {
-      isSuccess: state.isSuccess,
-      wasSuccess: wasSuccess.current,
-      willRedirect: state.isSuccess && !wasSuccess.current,
-    });
    if (state.isSuccess && !wasSuccess.current) {
      wasSuccess.current = true;
      chatDispatch({ type: "ChatAuthStatusChanged" });
      userDispatch({ type: "UserInit" });
-      console.log("[splash-button] useEffect → router.replace(/chat) [via isSuccess]");
      router.replace(ROUTES.chat);
    }
  }, [state.isSuccess, chatDispatch, userDispatch, router]);
@@ -22,9 +22,6 @@ export function SplashScreen() {
  //   - 都没有 → 留在 splash（**不**自动创建游客账号 —— 见 auth-machine.ts 的 checkAuthStatusActor）
  //
  // proxy 读不到 localStorage（Edge runtime），所以这条 fallback 必须在 Client 侧。
-  //
-  // DEBUG：client 端**不**用 Logger（pino 引入会爆 client bundle），改用 console.log
-  //   临时调试，bug 修完即删。
  useEffect(() => {
    let cancelled = false;
    void (async () => {
@@ -40,15 +37,7 @@ export function SplashScreen() {
        (loginTok != null && loginTok.length > 0) ||
        (guestTok != null && guestTok.length > 0);

-      console.log("[splash] useEffect token check", {
-        loginToken: loginTok ? `${loginTok.slice(0, 8)}...` : null,
-        guestToken: guestTok ? `${guestTok.slice(0, 8)}...` : null,
-        hasAny,
-        willRedirect: hasAny && !cancelled,
-      });
-
      if (!cancelled && hasAny) {
-        console.log("[splash] useEffect → router.replace(/chat)");
        router.replace(ROUTES.chat);
      }
    })();
@@ -23,9 +23,6 @@
 *   - 函数导出名建议为 `proxy`（可默认导出）。
 *
 * 用 `src/` 时 proxy 必须放在 `src/` 内（参见 `src-folder.md`）。
- *
- * DEBUG：每条请求都打日志（`hasSession` / `isAuthOnly` / `isProtected` + 决策），
- *   用于排查"进入 /splash 后仍自动跳 /chat"类路由 bug。bug 修完可考虑保留 INFO 级别 + 删 DEBUG。
 */

 import { NextResponse } from "next/server";
@@ -45,7 +42,7 @@ const SESSION_COOKIE_NAMES = [
  "__Secure-next-auth.session-token",
 ];

-/** proxy 入口日志（Node.js runtime 跑，pino 兼容） */
+/** proxy 入口日志（Node.js runtime 跑，pino 兼容）—— 排查 / 监控路由用 */
 const log = new Logger("Proxy");

 function isAuthOnlyRoute(pathname: string): boolean {
@@ -66,17 +63,9 @@ export function proxy(request: NextRequest) {
  const hasSession = SESSION_COOKIE_NAMES.some(
    (name) => Boolean(request.cookies.get(name)?.value),
  );
-  const isAuthOnly = isAuthOnlyRoute(pathname);
-  const isProtected = isProtectedRoute(pathname);
-
-  // DEBUG：每条请求都打（区分 path 1=proxy 跳 vs path 2=splash useEffect 跳）
-  log.info(
-    { pathname, hasSession, isAuthOnly, isProtected },
-    "[proxy] request",
-  );

  // 已登录访问未登录专属页 → /chat
-  if (hasSession && isAuthOnly) {
+  if (hasSession && isAuthOnlyRoute(pathname)) {
    log.info(
      { pathname, target: ROUTES.chat, reason: "logged-in → auth-only" },
      "[proxy] redirect",
@@ -87,7 +76,7 @@ export function proxy(request: NextRequest) {
  }

  // 未登录访问登录态专属页 → /splash（首界面）
-  if (!hasSession && isProtected) {
+  if (!hasSession && isProtectedRoute(pathname)) {
    log.info(
      { pathname, target: ROUTES.splash, reason: "not-logged-in → protected" },
      "[proxy] redirect",
@@ -97,7 +86,6 @@ export function proxy(request: NextRequest) {
    return NextResponse.redirect(url, 308);
  }

-  log.info({ pathname }, "[proxy] pass-through");
  return NextResponse.next();
 }

@@ -32,6 +32,14 @@ interface AuthState {
  confirmPassword: string;
  isLoading: boolean;
  errorMessage: string | null;
+  /**
+   * 字段名 `isSuccess` 保留（接口兼容），语义改为：
+   *   true  = 用户**已登录**（loginStatus ∈ {email, google, facebook, apple, guest}）
+   *   false = 未登录（loginStatus === "notLoggedIn"）
+   *
+   * 之前用 `state.matches("success")` 当信号 —— 但 status check 流也会误入
+   * success，触发 splash-button 误跳 /chat。现改用 `loginStatus` 判定。
+   */
  isSuccess: boolean;
  loginStatus: MachineContext["loginStatus"];
 }
@@ -62,7 +70,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
        state.matches("loadingOAuth") ||
        state.matches("loadingGuestLogin"),
      errorMessage: state.context.errorMessage,
-      isSuccess: state.matches("success"),
+      // 改用 loginStatus 判断"已登录"（避开 success state 误触发）
+      isSuccess: state.context.loginStatus !== "notLoggedIn",
      loginStatus: state.context.loginStatus,
    }),
    [state],
@@ -150,6 +150,11 @@ const checkAuthStatusActor = fromPromise<LoginStatus, void>(async () => {

 // ============================================================
 // Machine
+//
+// 设计：所有登录/同步流跑完都回 `idle`（带正确 `loginStatus`）。
+// **不**再设 `success` state —— 之前曾用 "success" 当"刚成功"信号，
+// 但 status check 流也会误入 success，触发 splash-button 误跳 /chat。
+// 现在改用 `loginStatus !== "notLoggedIn"` 作为"已登录"信号（见 auth-context.tsx）。
 // ============================================================
 export const authMachine = setup({
  types: {
@@ -220,7 +225,7 @@ export const authMachine = setup({
      invoke: {
        src: "checkAuthStatus",
        onDone: {
-          target: "success",
+          target: "idle", // ← status check 完回 idle（**不**再假冒 success）
          actions: assign({
            loginStatus: ({ event }) => event.output,
            errorMessage: null,
@@ -241,7 +246,7 @@ export const authMachine = setup({
      invoke: {
        src: "guestLogin",
        onDone: {
-          target: "success",
+          target: "idle", // ← 改自 "success"
          actions: assign({
            loginStatus: ({ event }) => event.output,
            errorMessage: null,
@@ -266,7 +271,7 @@ export const authMachine = setup({
          return { email: event.email, password: event.password };
        },
        onDone: {
-          target: "success",
+          target: "idle", // ← 改自 "success"
          actions: assign({
            loginStatus: ({ event }) => event.output,
            errorMessage: null,
@@ -296,7 +301,7 @@ export const authMachine = setup({
          };
        },
        onDone: {
-          target: "success",
+          target: "idle", // ← 改自 "success"
          actions: assign({
            loginStatus: ({ event }) => event.output,
            errorMessage: null,
@@ -343,7 +348,7 @@ export const authMachine = setup({
          return { idToken: event.idToken };
        },
        onDone: {
-          target: "success",
+          target: "idle", // ← 改自 "success"
          actions: assign({
            loginStatus: ({ event }) => event.output,
            errorMessage: null,
@@ -368,7 +373,7 @@ export const authMachine = setup({
          return { accessToken: event.accessToken };
        },
        onDone: {
-          target: "success",
+          target: "idle", // ← 改自 "success"
          actions: assign({
            loginStatus: ({ event }) => event.output,
            errorMessage: null,
@@ -383,10 +388,6 @@ export const authMachine = setup({
        },
      },
    },
-
-    success: {
-      // 终态：业务层通过 state.matches("success") 判断
-    },
  },
 });

@@ -10,10 +10,10 @@
 *   → 业务 token 写入本地 storage
 *
 * 此组件**无可见 UI**（返回 null），仅作为 NextAuth session 与 auth state
- * machine 之间的桥接器。挂在 RootProviders 内、AuthProvider 之后。
- *
- * DEBUG：client 端**不**用 Logger（pino 引入会爆 client bundle），改用 console.log
- *   临时调试，bug 修完即删。
+ * machine 之间的桥接器。挂在 RootProviders 内、AuthProvider 之后：
+ *   <AuthProvider>     ← 提供 useAuthState / useAuthDispatch
+ *     <OAuthSessionSync />  ← 用上面两个 hook
+ *   </AuthProvider>
 */
 import { useEffect } from "react";
 import { useSession } from "next-auth/react";
@@ -26,22 +26,6 @@ export function OAuthSessionSync() {
  const { loginStatus } = useAuthState();

  useEffect(() => {
-    // DEBUG：每条 session 变化都打（区分 OAuth 残留 session 是否触发 sync）
-    console.log("[OAuthSessionSync] session change", {
-      status,
-      hasSession: !!session,
-      provider: session?.provider,
-      idToken: session?.idToken ? `${session.idToken.slice(0, 8)}...` : null,
-      accessToken: session?.accessToken
-        ? `${session.accessToken.slice(0, 8)}...`
-        : null,
-      loginStatus,
-      willDispatch:
-        status === "authenticated" &&
-        !!session?.provider &&
-        loginStatus !== session.provider,
-    });
-
    // 1) NextAuth 还没就绪
    if (status !== "authenticated" || !session) return;