React根据用户登录状态切换导航栏链接显隐的实现求助

步骤1：完善Nav_Bar组件的用户状态管理 #

首先需要在组件初始化时验证用户身份，通过localStorage读取认证token并更新用户状态，同时用条件渲染控制链接显隐：

import React, { useState, useEffect } from 'react';
import "../App.css"
import UserContext from '../contexts/UserContext';

export function logout() {
  localStorage.clear();
  window.location.href = '/';
}

function Nav_Bar() {
  const [user, setUser] = useState(null);

  // 组件挂载时自动验证用户身份
  useEffect(() => {
    const verifyAuth = async () => {
      const token = localStorage.getItem('token');
      if (token) {
        try {
          // 调用后端验证接口
          const res = await fetch('/api/verify-user', {
            headers: { Authorization: `Bearer ${token}` }
          });
          const userData = await res.json();
          setUser(userData);
        } catch (err) {
          // 验证失败则清空token并重置用户状态
          localStorage.removeItem('token');
          setUser(null);
        }
      }
    };
    verifyAuth();
  }, []);

  return (
    <div>
      <UserContext.Provider value={{ user, setUser }}>
        <nav>
          <div className='Nav_bar'>
            <header>
              <img className="main_img" src="https://imgs.search.brave.com/3IR4GEec5MYEziiivB6mEehEmuE2CMoXU8YvwrjB_aM/rs:fit:768:451:1/g:ce/aHR0cHM6Ly9zaW1w/bGVjYXBhY2l0eS5j/b20vd3AtY29udGVu/dC91cGxvYWRzLzIw/MTQvMDYvMTctTW9z/dC1TdHVwaWQtUXVl/c3Rpb25zLVBvc3Rl/ZC1Pbi1Ud2l0dGVy/LmpwZw" alt='logo'/>
              <br></br>
              <a href="/signup">Sign Up</a>
              <span> | </span>
              
              {/* 未登录时显示Sign In */}
              {!user && (
                <>
                  <a href="/signin">Sign In</a>
                  <span> | </span>
                </>
              )}
              
              <a href="/postsList">All tweets</a>
              <span> | </span>
              <a href="/usersList">All users</a>
              <span> | </span>
              
              {/* 登录后显示Sign Out */}
              {user && <a href='/' onClick={logout}>Sign out</a>}
              
              <hr></hr>
              <hr></hr>
            </header>
          </div>
        </nav>
      </UserContext.Provider>
    </div>
  )
}

export default Nav_Bar;

步骤2：优化UserContext定义 #

为Context设置默认值，避免组件使用时出现未定义错误：

import React from "react";

const UserContext = React.createContext({
  user: null,
  setUser: () => {}
});

export default UserContext;

步骤3：登录组件同步更新用户状态 #

在登录成功后，将token存入localStorage并通过Context更新全局用户状态（示例登录组件逻辑）：

import React, { useContext, useState } from 'react';
import UserContext from '../contexts/UserContext';

function SignIn() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { setUser } = useContext(UserContext);

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      const data = await res.json();
      
      if (data.token) {
        localStorage.setItem('token', data.token);
        setUser(data.user); // 假设接口返回用户信息
        window.location.href = '/';
      }
    } catch (err) {
      console.error('登录失败', err);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="邮箱" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  );
}

export default SignIn;

核心说明 #

• 条件渲染：通过{!user && ...}和{user && ...}判断用户状态，控制对应链接的显示/隐藏。
• 身份验证：组件挂载时自动检查localStorage中的token，调用后端verifyUser接口验证身份，确保页面刷新后状态不丢失。
• 状态同步：将setUser传入Context，登录组件可直接更新全局用户状态，无需手动刷新页面。

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