当前位置：首页 > React

react实现登录注册功能

2026-01-27 17:55:58React

实现登录注册功能的步骤

创建React项目

使用Create React App或Vite初始化项目：

npx create-react-app auth-demo
cd auth-demo

安装必要依赖

安装路由和表单处理库：

npm install react-router-dom axios

创建页面组件

在src目录下创建Login.js和Register.js组件：

// Login.js
import { useState } from 'react';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理登录逻辑
  };

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

配置路由

在App.js中设置路由：

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

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

实现API请求

创建api.js处理HTTP请求：

react实现登录注册功能

import axios from 'axios';

const API = axios.create({
  baseURL: 'http://your-api-url.com'
});

export const login = (credentials) => API.post('/login', credentials);
export const register = (userData) => API.post('/register', userData);

添加表单验证

使用React Hook Form优化表单处理：

import { useForm } from 'react-hook-form';

function Login() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    // 处理提交
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      {errors.email && <span>Email必填</span>}
      <input {...register('password', { required: true })} />
      {errors.password && <span>密码必填</span>}
      <button type="submit">登录</button>
    </form>
  );
}

状态管理

使用Context或Redux管理用户状态：

// AuthContext.js
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

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

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

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

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

保护路由

创建受保护的路由组件：

react实现登录注册功能

// ProtectedRoute.js
import { Navigate } from 'react-router-dom';
import { useAuth } from './AuthContext';

function ProtectedRoute({ children }) {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" />;
}

实现持久化登录

使用localStorage保存token：

// 登录成功后
localStorage.setItem('token', response.data.token);

// 应用初始化时检查
const token = localStorage.getItem('token');
if (token) {
  // 验证token并设置用户状态
}

错误处理

在API请求中添加错误处理：

export const login = async (credentials) => {
  try {
    const response = await API.post('/login', credentials);
    return response.data;
  } catch (error) {
    throw new Error(error.response?.data?.message || '登录失败');
  }
};

样式优化

使用CSS模块或Styled-components添加样式：

// Login.module.css
.form {
  max-width: 400px;
  margin: 0 auto;
}

// Login.js
import styles from './Login.module.css';

function Login() {
  return (
    <form className={styles.form}>
      {/* 表单内容 */}
    </form>
  );
}