如何在react中验证登录

import React, { useState } from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = () => {
    // 验证用户名和密码
    if (username === '' || password === '') {
      setError('用户名和密码不能为空');
      return;
    }

    // 发送登录请求
    // 这里可以使用axios、fetch等发送请求的库
    // 示例代码仅为演示，实际项目中需要替换为真实的接口地址和参数
    fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ username, password }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.success) {
          // 登录成功，跳转到其他页面
          window.location.href = '/dashboard';
        } else {
          // 登录失败，显示错误信息
          setError(data.message);
        }
      })
      .catch((error) => {
        console.error('登录请求失败:', error);
        setError('登录请求失败');
      });
  };

  return (
    <div>
      <h2>登录</h2>
      {error && <p>{error}</p>}
      <input
        type="text"
        placeholder="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

export default LoginForm;