当前位置：首页 > React

simplejwt实现react前端登录

2026-01-27 10:57:49React

使用 SimpleJWT 实现 React 前端登录

安装依赖

确保后端已配置 Django SimpleJWT，前端 React 项目需安装 axios 和 react-router-dom。通过以下命令安装：

npm install axios react-router-dom

配置登录表单

创建一个登录表单组件，包含用户名和密码输入字段。使用 React 的 useState 管理表单状态：

simplejwt实现react前端登录

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

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

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://your-backend-url/api/token/', formData);
      localStorage.setItem('access_token', response.data.access);
      localStorage.setItem('refresh_token', response.data.refresh);
      // 跳转到受保护的路由
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

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

export default LoginForm;

处理令牌存储和刷新

将获取的访问令牌和刷新令牌存储在 localStorage 中。为实现自动刷新令牌，创建一个拦截器：

axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const refreshToken = localStorage.getItem('refresh_token');
      try {
        const response = await axios.post('http://your-backend-url/api/token/refresh/', {
          refresh: refreshToken,
        });
        localStorage.setItem('access_token', response.data.access);
        originalRequest.headers.Authorization = `Bearer ${response.data.access}`;
        return axios(originalRequest);
      } catch (err) {
        console.error('Token refresh failed:', err);
        // 清除令牌并跳转到登录页
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
        window.location.href = '/login';
      }
    }
    return Promise.reject(error);
  }
);

设置受保护路由

使用 react-router-dom 创建受保护的路由组件，检查用户是否已认证：

simplejwt实现react前端登录

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

const PrivateRoute = ({ element: Element, ...rest }) => {
  const isAuthenticated = localStorage.getItem('access_token');
  return isAuthenticated ? <Element {...rest} /> : <Navigate to="/login" />;
};

// 使用示例
<Route path="/dashboard" element={<PrivateRoute element={Dashboard} />} />

注销功能

实现注销功能，清除存储的令牌并重定向到登录页：

const handleLogout = () => {
  localStorage.removeItem('access_token');
  localStorage.removeItem('refresh_token');
  window.location.href = '/login';
};

后端配置注意事项

确保 Django 后端已正确配置 SimpleJWT，并允许跨域请求（CORS）。在 settings.py 中添加：

INSTALLED_APPS = [
    ...
    'rest_framework_simplejwt',
    'corsheaders',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ),
}

通过以上步骤，React 前端可以与 Django SimpleJWT 后端实现完整的登录认证流程。