react项目登录功能实现

创建登录表单组件

在React项目中创建一个登录表单组件，包含用户名和密码输入框以及提交按钮。使用useState管理表单数据。

import React, { useState } from 'react';

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里添加登录逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名:</label>
        <input 
          type="text" 
          name="username" 
          value={formData.username} 
          onChange={handleChange} 
        />
      </div>
      <div>
        <label>密码:</label>
        <input 
          type="password" 
          name="password" 
          value={formData.password} 
          onChange={handleChange} 
        />
      </div>
      <button type="submit">登录</button>
    </form>
  );
}

export default LoginForm;

实现认证服务

创建认证服务处理登录请求，通常使用axios与后端API交互。将认证令牌存储在本地存储或cookie中。

import axios from 'axios';

const authService = {
  login: async (credentials) => {
    try {
      const response = await axios.post('/api/auth/login', credentials);
      localStorage.setItem('token', response.data.token);
      return response.data;
    } catch (error) {
      throw error;
    }
  },

  logout: () => {
    localStorage.removeItem('token');
  },

  getToken: () => {
    return localStorage.getItem('token');
  }
};

export default authService;

添加路由保护

使用React Router实现受保护路由，未登录用户尝试访问时重定向到登录页面。

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

function PrivateRoute({ children }) {
  const token = localStorage.getItem('token');
  return token ? children : <Navigate to="/login" />;
}

// 使用示例
<Routes>
  <Route path="/" element={<PrivateRoute><HomePage /></PrivateRoute>} />
  <Route path="/login" element={<LoginForm />} />
</Routes>

实现全局状态管理

使用Context API或Redux管理用户认证状态，使组件能响应登录状态变化。

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = async (credentials) => {
    const data = await authService.login(credentials);
    setUser(data.user);
  };

  const logout = () => {
    authService.logout();
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

处理登录成功后的重定向

登录成功后重定向用户到目标页面或默认首页。

function LoginForm() {
  const { login } = useAuth();
  const navigate = useNavigate();
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await login(formData);
      navigate('/dashboard');
    } catch (err) {
      setError('登录失败，请检查用户名和密码');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      {/* 表单内容 */}
    </form>
  );
}

添加表单验证

在提交前验证表单数据，确保用户名和密码符合要求。

const validateForm = () => {
  const errors = {};
  if (!formData.username) errors.username = '用户名不能为空';
  if (!formData.password) errors.password = '密码不能为空';
  return errors;
};

const handleSubmit = (e) => {
  e.preventDefault();
  const errors = validateForm();
  if (Object.keys(errors).length > 0) {
    setFormErrors(errors);
    return;
  }
  // 提交逻辑
};