Fixed the problem of synchronization of home page authentication status after login: Add delay to ensure cookies take effect and optimize user status check

Author: Mrkk1

app/(main)/page.tsx

@@ -379,24 +379,37 @@ IMPORTANT: Apart from the initial <think>...</think> block, do NOT use markdown
     // 获取用户信息
     const fetchUser = async () => {
       try {
-        const response = await fetch('/api/auth/me');
+        const response = await fetch('/api/auth/me', {
+          credentials: 'include',
+          cache: 'no-cache'
+        });
         if (response.ok) {
           const userData = await response.json();
           setUser(userData);
+        } else {
+          console.log('用户未登录或登录已过期');
+          setUser(null);
         }
       } catch (error) {
         console.error('获取用户信息失败:', error);
+        setUser(null);
       }
     };
 
-    fetchUser();
+    // 添加短暂延迟，确保从登录页跳转过来时 cookie 已经生效
+    const timer = setTimeout(() => {
+      fetchUser();
+    }, 100);
 
     // Simulate loading time
-    const timer = setTimeout(() => {
+    const loadingTimer = setTimeout(() => {
       setIsLoading(false)
     }, 1250)
 
-    return () => clearTimeout(timer)
+    return () => {
+      clearTimeout(timer);
+      clearTimeout(loadingTimer);
+    }
   }, [])
 
   // 加载项目版本历史

components/login-form.tsx

@@ -19,7 +19,10 @@ export default function LoginForm() {
   useEffect(() => {
     if (loginSuccess && redirectTo) {
       toast.success("Login successful");
-      window.location.href = redirectTo;
+      // 添加短暂延迟确保 cookie 设置生效
+      setTimeout(() => {
+        window.location.href = redirectTo;
+      }, 150);
     }
   }, [loginSuccess, redirectTo, router]);
 

lib/db.ts

@@ -1,30 +1,41 @@
 import mysql from 'mysql2/promise';
 
-// Check required environment variables
-const requiredEnvVars = ['DB_HOST', 'DB_PORT', 'DB_USER', 'DB_PASSWORD', 'DB_NAME'];
-for (const envVar of requiredEnvVars) {
-  if (!process.env[envVar]) {
-    throw new Error(`Missing required environment variable: ${envVar}`);
+// Check required environment variables (only when actually using the database)
+function checkRequiredEnvVars() {
+  const requiredEnvVars = ['DB_HOST', 'DB_PORT', 'DB_USER', 'DB_PASSWORD', 'DB_NAME'];
+  for (const envVar of requiredEnvVars) {
+    if (!process.env[envVar]) {
+      throw new Error(`Missing required environment variable: ${envVar}`);
+    }
   }
 }
 
-// Database connection configuration (excluding database name)
-const dbConfig = {
-  host: process.env.DB_HOST,
-  port: parseInt(process.env.DB_PORT || '3306'),
-  user: process.env.DB_USER,
-  password: process.env.DB_PASSWORD
-};
+// Get database connection configuration (excluding database name)
+function getDbConfig() {
+  checkRequiredEnvVars();
+  return {
+    host: process.env.DB_HOST,
+    port: parseInt(process.env.DB_PORT || '3306'),
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD
+  };
+}
 
-// Database name
-const DATABASE_NAME = process.env.DB_NAME;
+// Get database name
+function getDatabaseName() {
+  checkRequiredEnvVars();
+  return process.env.DB_NAME!;
+}
 
 // Global connection pool instance
 let poolInstance: mysql.Pool | null = null;
 
 // Create database and initialize tables
 export async function initDatabase() {
   try {
+    const dbConfig = getDbConfig();
+    const DATABASE_NAME = getDatabaseName();
+    
     // Create connection pool without specifying database
     const pool = mysql.createPool(dbConfig);
     const connection = await pool.getConnection();
@@ -219,6 +230,9 @@ export async function initDatabase() {
 // Get database connection pool (used for database operations in the application)
 export function getPool() {
   if (!poolInstance) {
+    const dbConfig = getDbConfig();
+    const DATABASE_NAME = getDatabaseName();
+    
     poolInstance = mysql.createPool({
       ...dbConfig,
       database: DATABASE_NAME,

next.config.js

@@ -15,10 +15,11 @@ const nextConfig = {
     serverActions: true,
     serverComponents: true,
     typedRoutes: true,
-    // 启用新的 params 行为
-    serverComponentsExternalPackages: ['@prisma/client', 'mysql2', 'canvas']
   },
 
+  // 将过时的配置移到新位置
+  serverExternalPackages: ['@prisma/client', 'mysql2', 'canvas'],
+  
   // 配置图片处理
   images: {
     unoptimized: true, // 禁用图片优化，支持所有域名

package-lock.json

@@ -52,6 +52,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.4",
+    "coffee-script": "^1.12.7",
     "date-fns": "^4.1.0",
     "dom-to-image-more": "^3.6.0",
     "dotenv": "^16.5.0",