feat: Improve user authorization and navigation flow

src/components/auth/user-authorize.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { signIn } from "@/actions/user-authorize";
+import { useSession } from "next-auth/react";
 
 interface UserAuthorizeProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>;
@@ -14,6 +16,8 @@ export function UserAuthorize({
 }: UserAuthorizeProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<Error | unknown>(null);
+  const { update } = useSession();
+  const router = useRouter();
 
   const signInCallback = useCallback(async () => {
     if (isLoading) {
@@ -22,19 +26,22 @@ export function UserAuthorize({
     setIsLoading(true);
     try {
       await signIn({ ...data, redirectTo: "/dashboard" });
+      // 更新 session
+      await update();
+      router.push("/dashboard");
       setIsLoading(false);
     } catch (error) {
       setError(error);
       setIsLoading(false);
     }
-  }, []);
+  }, [data, isLoading, update, router]);
 
   useEffect(() => {
     const timer = setTimeout(signInCallback, 5);
     return () => {
       clearTimeout(timer);
     };
-  }, []);
+  }, [signInCallback]);
 
   return (
     <>

src/components/layout/nav-bar.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { User } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 
@@ -18,9 +20,15 @@ import {
 } from "../ui/dropdown-menu";
 
 export function NavBar() {
-  const { data: session } = useSession();
+  const { data: session, status } = useSession();
+  const router = useRouter();
   const user = session?.user;
 
+  const handleSignOut = async () => {
+    await signOut({ redirect: false });
+    router.push("/");
+  };
+
   return (
     <nav className="sticky top-0 z-10 bg-white shadow-md dark:bg-gray-800">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -36,7 +44,16 @@ export function NavBar() {
 
           <div className="flex items-center space-x-4">
             <ThemeToggle />
-            {user ? (
+            {status === "loading" ? (
+              <Button
+                variant="outline"
+                size="icon"
+                className="relative h-9 w-9 overflow-hidden rounded-full"
+                disabled
+              >
+                <User className="h-5 w-5" />
+              </Button>
+            ) : user ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
@@ -75,7 +92,7 @@ export function NavBar() {
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
                     className="text-red-600 dark:text-red-400"
-                    onClick={() => signOut()}
+                    onClick={handleSignOut}
                   >
                     退出登录
                   </DropdownMenuItem>