知识库首页 模版 use-user.ts.md

use user.ts

本地来源：模版/template/模版文档对比说明/06-工具函数/use-user.ts.md

用户钩子 (hooks/use-user.ts) 逐行分析

文件概述

这是一个自定义的 React Hook，用于管理用户的登录状态和用户信息。它处理用户认证状态的变化，提供用户数据和加载状态。

导入语句分析

"use client";
  • 指示这是一个客户端组件
  • 确保在浏览器环境中执行
import { useEffect, useState } from "react";
  • 导入 React 的 Hook
  • useEffect 用于处理副作用
  • useState 用于管理组件状态
import { createClient } from "@/utils/supabase/client";
  • 导入客户端 Supabase 实例
  • 用于在客户端与 Supabase 交互
import { User } from "@supabase/supabase-js";
  • 导入 Supabase 的用户类型定义
  • 确保类型安全

Hook 定义分析

export function useUser() {
  • 定义并导出 useUser Hook
  • 遵循 React Hook 命名规范

状态管理

const [user, setUser] = useState<User | null>(null);
  • 定义用户状态
  • 初始值为 null
  • 类型为 User 或 null
const [loading, setLoading] = useState(true);
  • 定义加载状态
  • 初始值为 true（表示正在加载）
  • 布尔类型
const supabase = createClient();
  • 创建 Supabase 客户端实例
  • 用于认证和数据操作

副作用处理

useEffect(() => {
  // Get user on mount
  getUser();

  // Listen for changes on auth state (login, sign out, etc.)
  const {
    data: { subscription },
  } = supabase.auth.onAuthStateChange((_event, session) => {
    setUser(session?.user ?? null);
    setLoading(false);
  });

  return () => {
    subscription.unsubscribe();
  };
}, []);

初始化阶段

getUser();
  • 组件挂载时获取用户信息
  • 调用内部定义的 getUser 函数

认证状态监听

const {
  data: { subscription },
} = supabase.auth.onAuthStateChange((_event, session) => {
  setUser(session?.user ?? null);
  setLoading(false);
});
  • 监听认证状态变化
  • 使用解构赋值获取订阅对象
  • 回调函数接收事件和会话参数
  • 使用 _event 表示不使用该参数
  • 使用空值合并运算符 ?? 设置默认值
  • 状态变化时更新用户和加载状态

清理函数

return () => {
  subscription.unsubscribe();
};
  • 组件卸载时清理订阅
  • 防止内存泄漏
  • 停止监听认证状态变化

用户获取函数

async function getUser() {
  try {
    const {
      data: { user },
    } = await supabase.auth.getUser();
    setUser(user);
  } catch (error) {
    console.error("Error getting user:", error);
  } finally {
    setLoading(false);
  }
}

错误处理

try {
  const {
    data: { user },
  } = await supabase.auth.getUser();
  setUser(user);
} catch (error) {
  console.error("Error getting user:", error);
} finally {
  setLoading(false);
}
  • 使用 try-catch-finally 处理异步操作
  • 从 Supabase 获取用户信息
  • 使用解构赋值提取用户数据
  • 错误情况下输出错误信息到控制台
  • 无论成功或失败都要设置加载状态为 false

返回值

return { user, loading };
  • 返回用户数据和加载状态
  • 使用对象简写语法
  • 提供给组件使用的状态和标识

设计模式分析

自定义 Hook 模式

  • 封装用户相关的状态逻辑
  • 提供可重用的用户状态管理
  • 遵循 React Hook 规范

状态管理模式

  • 使用 useState 管理本地状态
  • 分离用户数据和加载状态
  • 提供清晰的状态更新逻辑

订阅模式

  • 监听认证状态变化
  • 自动更新用户状态
  • 正确处理订阅清理

错误处理模式

  • 使用 try-catch 处理异步错误
  • 提供错误日志记录
  • 确保状态一致性

用户体验考虑

加载状态管理

  • 提供加载指示器
  • 防止界面闪烁
  • 优化用户等待体验

实时状态更新

  • 自动响应登录/登出状态
  • 无需手动刷新页面
  • 提供流畅的用户体验

错误处理

  • 静默处理获取用户信息的错误
  • 避免用户看到技术错误信息
  • 保持应用稳定性

最佳实践总结

  1. Hook 设计：遵循 React Hook 命名和使用规范
  2. 状态管理：清晰的状态定义和更新逻辑
  3. 内存管理：正确清理事件监听器和订阅
  4. 错误处理：完善的异步错误处理机制
  5. 类型安全：使用 TypeScript 确保类型安全
  6. 性能优化：合理使用 useEffect 依赖数组
  7. 用户体验：提供加载状态和实时更新

使用示例

function UserProfile() {
  const { user, loading } = useUser();

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>Please log in</div>;

  return <div>Welcome, {user.email}!</div>;
}

这个 Hook 提供了完整的用户状态管理功能，是构建认证相关功能的基础组件。它展示了如何在 React 中正确处理异步状态、事件监听和错误处理。

本文档为站内渲染。原始文件本地路径：saas/source/templates/模版-template-模版文档对比说明-06-工具函数-use-user-ts-2deeb4.md（仅本地保留，不入库不部署）