Prechádzať zdrojové kódy

♻️ refactor(index): 重构首页用户认证逻辑

- 移除useLoad生命周期钩子,用户状态由useAuth自动管理
- 替换authManager为useAuth自定义hook,简化状态管理
- 删除手动检查登录状态的checkLoginStatus函数
- 将loading状态拆分为isLoading(认证加载)和logoutLoading(退出加载)
- 添加认证加载状态的骨架屏显示
- 优化代码注释,提高可维护性

✨ feat(index): 增强用户体验

- 实现登录状态自动管理,无需手动刷新
- 添加加载状态指示器,提升用户体验
- 优化页面显示时的日志输出,便于调试
yourname 4 mesiacov pred
rodič
commit
10a788f5bb
1 zmenil súbory, kde vykonal 23 pridanie a 24 odobranie
  1. 23 24
      mini/src/pages/index/index.tsx

+ 23 - 24
mini/src/pages/index/index.tsx

@@ -1,41 +1,28 @@
 import { View, Text, Button, Image } from '@tarojs/components'
-import { useLoad, useDidShow } from '@tarojs/taro'
+import { useDidShow } from '@tarojs/taro'
 import { useState } from 'react'
 import Taro from '@tarojs/taro'
-import { authManager, User } from '../../utils/auth'
 import './index.css'
+import { useAuth } from '@/utils/auth'
 
 export default function Index() {
-  const [user, setUser] = useState<User | null>(null)
-  const [loading, setLoading] = useState(false)
-
-  useLoad(() => {
-    console.log('Index Page loaded.')
-    checkLoginStatus()
-  })
+  const { user, isLoading, logout } = useAuth()
+  const [logoutLoading, setLogoutLoading] = useState(false)
 
   useDidShow(() => {
-    checkLoginStatus()
+    // 用户状态由useAuth自动管理,无需手动检查
+    console.log('页面显示,当前用户状态:', user ? '已登录' : '未登录')
   })
 
-  const checkLoginStatus = async () => {
-    if (authManager.isLoggedIn()) {
-      const userInfo = authManager.getUserInfo()
-      setUser(userInfo)
-    } else {
-      setUser(null)
-    }
-  }
-
   const handleLogin = () => {
     Taro.navigateTo({ url: '/pages/login/index' })
   }
 
   const handleLogout = async () => {
-    setLoading(true)
+    setLogoutLoading(true)
     try {
-      await authManager.logout()
-      setUser(null)
+      await logout()
+      // 退出成功后,useAuth会自动更新user状态
       Taro.showToast({
         title: '退出成功',
         icon: 'success'
@@ -43,7 +30,7 @@ export default function Index() {
     } catch (error) {
       console.error('Logout error:', error)
     } finally {
-      setLoading(false)
+      setLogoutLoading(false)
     }
   }
 
@@ -55,6 +42,18 @@ export default function Index() {
     Taro.navigateTo({ url: '/pages/register/index' })
   }
 
+  // 显示加载状态
+  if (isLoading) {
+    return (
+      <View className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
+        <View className="text-center">
+          <View className="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mx-auto mb-4"></View>
+          <Text className="text-gray-600">加载中...</Text>
+        </View>
+      </View>
+    )
+  }
+
   return (
     <View className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       {user ? (
@@ -96,7 +95,7 @@ export default function Index() {
               </Button>
               <Button
                 className="flex-1"
-                loading={loading}
+                loading={logoutLoading}
                 onClick={handleLogout}
               >
                 退出登录