深入理解React useEffect与用户认证状态管理

useEffect(()=>{
  if(localStorage.getItem('token')){
    setIsLoggedIn(true);
  }
},[localStorage.getItem('token')]) // 这里的依赖项是问题所在

useEffect(() => {
  const intervalInstance = setInterval(() => {
    if(localStorage.getItem('token')) {
      setIsLoggedIn(true);
    } else {
      setIsLoggedIn(false);
    }
  }, 500); // 每500毫秒检查一次

  // 组件卸载时清除定时器，防止内存泄漏
  return () => { clearInterval(intervalInstance) }
},[]) // 依赖数组为空，只在组件挂载时执行一次

// context/user/UserState.js
import React, { useState, useEffect } from 'react';
import UserContext from './userContext'; // 假设你有一个UserContext

const UserState = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 在组件挂载时，检查localStorage来初始化isLoggedIn状态
  useEffect(() => {
    if (localStorage.getItem('token')) {
      setIsLoggedIn(true);
    } else {
      setIsLoggedIn(false);
    }
  }, []); // 依赖数组为空，只在组件挂载时执行一次

  // 提供一个登录函数，用于在用户成功登录后更新状态
  const loginUser = (token) => {
    localStorage.setItem('token', token); // 存储token
    setIsLoggedIn(true); // 更新React状态
    // 可能还需要解码token，获取用户信息等
  };

  // 提供一个登出函数
  const logoutUser = () => {
    localStorage.removeItem('token'); // 移除token
    setIsLoggedIn(false); // 更新React状态
    // 清除其他相关用户数据
  };

  return (
    <UserContext.Provider value={{ isLoggedIn, loginUser, logoutUser }}>
      {props.children}
    </UserContext.Provider>
  );
};

export default UserState;

// App.js
import React, { useContext, useEffect } from "react";
// ... 其他导入 ...
import UserContext from './context/user/userContext'; // 导入UserContext

function App() {
  const { isLoggedIn, loginUser, logoutUser } = useContext(UserContext); // 从Context获取状态和方法

  // 注意：这里的useEffect不再需要监听localStorage.getItem('token')
  // 因为isLoggedIn状态已经由UserState内部管理，并在登录/登出时被更新。
  // 如果你需要监听localStorage的'storage'事件，那是一个更复杂的场景，
  // 并且通常不直接用于auth token。

  return (
    <div className="App">
      <UserState> {/* UserState应该包裹所有需要访问其状态的组件 */}
        {/* ... 其他Context Providers ... */}
        <Navbar/>
        {isLoggedIn && <SideNavbar/>} {/* 根据isLoggedIn状态条件渲染 */}
        <div className="containerApp">
          <Routes>
            {/* ... 路由配置 ... */}
            <Route element={<Login/>} exact path='/login' />
          </Routes>
        </div>
        {/* ... 其他Context Providers ... */}
      </UserState>
    </div>
  );
}

export default App;

// Login.js (示例)
import React, { useState, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import UserContext from '../context/user/userContext'; // 导入UserContext

const Login = () => {
  const [credentials, setCredentials] = useState({ email: "", password: "" });
  const { loginUser } = useContext(UserContext);
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 假设这是一个API调用
    const response = await fetch("YOUR_LOGIN_API_ENDPOINT", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ email: credentials.email, password: credentials.password })
    });
    const json = await response.json();

    if (json.success) {
      loginUser(json.authToken); // 调用Context提供的登录方法，更新全局isLoggedIn状态
      navigate('/'); // 重定向到主页
    } else {
      alert("Invalid Credentials");
    }
  };

  const onChange = (e) => {
    setCredentials({ ...credentials, [e.target.name]: e.target.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* ... 登录表单 ... */}
      <button type="submit">Login</button>
    </form>
  );
};

export default Login;