当前位置：首页 > React

react实现登录源码

2026-01-26 18:00:07React

React 登录功能实现示例

以下是一个基于 React 的登录功能实现代码示例，包含表单处理、状态管理和简单的验证逻辑。

安装必要依赖

npm install react-router-dom axios

登录组件代码

import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!formData.email || !formData.password) {
      setError('请填写所有字段');
      return;
    }

    try {
      const response = await axios.post('/api/login', formData);
      localStorage.setItem('token', response.data.token);
      navigate('/dashboard');
    } catch (err) {
      setError(err.response?.data?.message || '登录失败');
    }
  };

  return (
    <div className="login-container">
      <h2>用户登录</h2>
      {error && <div className="error-message">{error}</div>}
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>邮箱</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </div>
        <div className="form-group">
          <label>密码</label>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
          />
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  );
};

export default Login;

路由配置

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './components/Login';
import Dashboard from './components/Dashboard';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/" element={<Login />} />
      </Routes>
    </Router>
  );
}

受保护路由实现

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const token = localStorage.getItem('token');

  if (!token) {
    return <Navigate to="/login" replace />;
  }

  return children;
};

// 使用方式
<Route path="/dashboard" element={
  <ProtectedRoute>
    <Dashboard />
  </ProtectedRoute>
} />

样式示例

.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

.error-message {
  color: red;
  margin-bottom: 15px;
}

后端API示例

虽然问题主要关注前端实现，但完整的登录功能需要后端支持。以下是一个简单的Node.js Express路由示例：

app.post('/api/login', async (req, res) => {
  const { email, password } = req.body;

  // 这里应该有实际的用户验证逻辑
  if (email === 'test@example.com' && password === 'password') {
    res.json({ token: 'fake-jwt-token' });
  } else {
    res.status(401).json({ message: '无效的凭证' });
  }
});

这个实现包含了React登录功能的核心要素：表单处理、状态管理、输入验证、API调用和路由保护。可以根据实际项目需求进行扩展和修改。

react实现登录源码