React项目Token存在时Logout按钮不显示及控制台输出undefined问题排查

问题原因分析 #

• Cookie读取失败：控制台输出undefined，说明Cookies.get("token")未获取到对应值，大概率是Cookie未正确设置，或者键名和登录逻辑中的不一致（注意Cookie键名区分大小写）。
• 状态同步不及时：组件初始token状态为undefined，且useEffect仅在挂载时执行一次，如果tokenCookie是在组件挂载后才设置的（比如登录完成后跳转回来），组件不会自动重新读取Cookie更新状态。

修复方案 #

1. 确认Cookie设置正确性 #

检查登录逻辑中设置Cookie的代码，确保键名是**token**（和Header中读取的键名完全一致），示例代码：

// 登录成功时设置Cookie的正确写法
Cookies.set("token", userToken);

2. 优化状态初始化与同步 #

• 直接从Cookie初始化token状态，避免初始undefined导致的显示异常：

  // 替换原useState初始化代码
  const [token, setToken] = useState(Cookies.get("token"));
  

• 监听路由变化（可选）：如果存在其他页面修改tokenCookie的场景，添加路由监听，确保Cookie变化时组件能同步更新：

  import { useLocation } from "react-router-dom";
  
  const Header = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const [token, setToken] = useState(Cookies.get("token"));
  
    // 路由变化时重新读取Cookie
    useEffect(() => {
      setToken(Cookies.get("token"));
    }, [location]);
  
    // 其余代码保持不变
  };
  

3. 完善登出逻辑 #

登出时手动更新组件状态，避免跳转前的显示延迟：

const handleLogout = () => {
  Cookies.remove("token");
  setToken(null); // 手动清空token状态
  navigate("/login");
};

验证方法 #

1. 打开浏览器开发者工具（F12），切换到Application标签页，查看当前站点的Cookies列表，确认token是否存在、值是否有效。
2. 测试完整流程：登录成功后检查Header是否显示Logout按钮；登出后检查Cookie是否被删除、Header是否切换为Login按钮。

内容的提问来源于stack exchange，提问作者Sebastianohansen