React导航栏根据用户认证状态切换图标与链接问题求助

核心问题分析 #

1. 状态分散不同步：LoginPage维护了独立的isAuthenticated状态，而Navbar依赖的是App.js中的全局状态，两者未联动。
2. 页面刷新状态丢失：App.js初始化时未从localStorage读取已有认证状态，刷新后状态会重置为false。
3. 登出逻辑不完整：仅修改状态未清除localStorage中的认证token，导致刷新后状态异常回滚。

分步修复方案 #

1. 修复App.js：统一全局认证状态管理

修改App.js，增加初始化时读取localStorage的逻辑，完善登出操作：

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const navigate = useNavigate();

  // 组件挂载时从localStorage读取认证状态
  useEffect(() => {
    const token = localStorage.getItem('USER_KEY');
    if (token && token.startsWith('Bearer ')) {
      setIsAuthenticated(true);
    }
  }, []);

  const handleLogin = () => {
    setIsAuthenticated(true);
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
    localStorage.removeItem('USER_KEY'); // 清除认证token
    navigate('/LoginPage'); // 登出后跳转到登录页
  };

  return (
    <div className="App">
      <Router>
        <Navbar isAuthenticated={isAuthenticated} handleLogout={handleLogout} />
        <Routes>
          {/* 确保LoginPage能接收handleLogin等必要props */}
          <Route path="/LoginPage" element={<LoginPage handleLogin={handleLogin} />} />
          {/* 其他路由配置 */}
        </Routes>
      </Router>
    </div>
  );
}

2. 修复LoginPage：移除冗余状态，完善登录逻辑

删除LoginPage内的独立isAuthenticated状态，登录成功后将token存入localStorage：

const LoginPage = ({ loading, error, handleLogin, setUser, loginFailure, ...props }) => {
  const navigate = useNavigate(); 

  const [values, setValues] = useState({
    userName: '',
    password: ''
  });

  const handleSubmit=(evt)=>{
    evt.preventDefault();
    props.authenticate();

    userLogin(values).then((response)=>{
      console.log("Response:", response);
      if (response.status === 200) {
        // 根据接口返回格式调整token存储逻辑，这里假设需要添加Bearer前缀
        const token = `Bearer ${response.data.token}`;
        localStorage.setItem('USER_KEY', token); // 存储认证token
        props.setUser(response.data);
        handleLogin(); // 通知App更新全局状态
        navigate('/dashboard');
      } else {
        console.log("Error status:", response.status);
        props.loginFailure('Something Wrong! Please Try Again');
      }
    })
    .catch((err) => {
      console.error("Error:", err);
      if (err && err.response) {
        switch (err.response.status) {
          case 401:
            props.loginFailure("Authentication Failed. Bad Credentials");
            break;
          default:
            props.loginFailure('Something Wrong! Please Try Again');
        }
      } else {
        props.loginFailure('Something Wrong! Please Try Again');
      }
    });
  };

  const handleChange = (e) => {
    e.persist();
    setValues(values => ({
      ...values,
      [e.target.name]: e.target.value
    }));
  };

  const handleSuccessfulLogin = () => {
    navigate('/dashboard');
  };
  
  console.log('Loading ', loading);
  
  // 保留原组件返回结构，此处省略
};

3. 优化Navbar：确保登出逻辑正确

调整Navbar中的登出点击逻辑，避免路由跳转与状态更新冲突：

export default function Navbar({ isAuthenticated, handleLogout }) {
  return (
    {/* 保留原导航栏结构，替换用户操作区的认证按钮部分 */}
    <div className="user_option">
      {isAuthenticated ? (
        <a href="/logout" className="user_link" onClick={(e) => {
          e.preventDefault();
          handleLogout();
        }}>
          <i className="fa fa-sign-out" aria-hidden="true"></i>
        </a>
      ) : (
        <Link to="/LoginPage" className="user_link">
          <i className="fa fa-user" aria-hidden="true"></i>
        </Link>
      )}
      {/* 保留购物车、搜索、在线下单等元素 */}
    </div>
    {/* 保留原结构剩余部分 */}
  );
}

验证要点 #

1. 登录成功后，检查localStorage是否存在USER_KEY，导航栏是否切换为登出图标。
2. 点击登出按钮，检查localStorage的USER_KEY是否被清除，导航栏是否切换为登录图标。
3. 刷新页面，导航栏状态应与localStorage中的认证状态保持一致。

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