判断用户是否登录 hooks 封装

31 min read
import { useState, useEffect } from 'react';

const useAuth = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 检查本地存储或 API 来更新登录状态
    const token = localStorage.getItem('authToken');
    if (token) {
      // 假设存在一个函数来验证 token 并返回用户信息
      validateToken(token).then(userData => {
        setIsLoggedIn(true);
        setUser(userData);
      }).catch(() => {
        // 处理 token 无效的情况
        localStorage.removeItem('authToken');
        setIsLoggedIn(false);
        setUser(null);
      });
    }
  }, []);

  return { isLoggedIn, user };
};

export default useAuth;

// 假设的 validateToken 函数
const validateToken = async (token: string) => {
  // 实现 API 调用或其他逻辑来验证 token
  // 返回用户数据或抛出错误
};
  1. 状态管理：通常，登录状态可以通过一个标志（如 token 或 user 对象）来管理，这些标志存储在状态管理库（如 Redux）或组件状态（如 React 的 useState）中。
  2. 身份验证逻辑：您需要实现逻辑来检查用户是否登录。这通常涉及到检查本地存储（如 localStorage 或 sessionStorage）中的认证令牌或者通过 API 调用验证令牌的有效性。
  3. React 钩子：useAuth 将是一个自定义的 React 钩子，它可以返回用户的登录状态和相关数据。
import React from 'react';
import useAuth from './useAuth'; // 假设 useAuth.ts 在同一目录下

const MyComponent = () => {
  const { isLoggedIn, user } = useAuth();

  if (!isLoggedIn) {
    return <p>请登录查看内容。</p>;
  }

  return (
    <div>
      <h1>欢迎, {user.name}!</h1>
      {/* 这里可以添加更多根据用户状态变化的内容 */}
    </div>
  );
};

export default MyComponent;