当前位置：首页 > React

react实现登录校验

2026-01-27 02:15:26React

实现登录校验的基本流程

在React中实现登录校验通常涉及前端表单处理、后端API交互、状态管理以及路由保护。以下是关键步骤和代码示例：

创建登录表单组件

使用React的受控组件处理用户输入：

import { useState } from 'react';

function LoginForm({ onLogin }) {
  const [credentials, setCredentials] = useState({
    username: '',
    password: ''
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    onLogin(credentials);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={credentials.username}
        onChange={handleChange}
        placeholder="Username"
      />
      <input
        type="password"
        name="password"
        value={credentials.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

处理认证逻辑

与后端API交互并管理认证状态：

react实现登录校验

import { useState } from 'react';
import axios from 'axios';

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const login = async (credentials) => {
    setLoading(true);
    try {
      const response = await axios.post('/api/login', credentials);
      setUser(response.data.user);
      localStorage.setItem('token', response.data.token);
    } catch (err) {
      setError(err.response?.data?.message || 'Login failed');
    } finally {
      setLoading(false);
    }
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('token');
  };

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

创建受保护路由

使用React Router实现路由保护：

import { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from './AuthProvider';

function ProtectedRoute({ children }) {
  const { user } = useContext(AuthContext);

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

  return children;
}

使用示例

在应用入口处包裹AuthProvider：

react实现登录校验

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

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

持久化登录状态

应用启动时检查本地存储的token：

useEffect(() => {
  const token = localStorage.getItem('token');
  if (token) {
    // 验证token有效性
    axios.get('/api/validate', {
      headers: { Authorization: `Bearer ${token}` }
    })
    .then(response => setUser(response.data.user))
    .catch(() => localStorage.removeItem('token'));
  }
}, []);

错误处理和反馈

提供用户友好的错误提示：

function LoginForm({ onLogin, error, loading }) {
  return (
    <form>
      {/* ...表单字段... */}
      {error && <div className="error">{error}</div>}
      <button type="submit" disabled={loading}>
        {loading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
}