如何使用Symfony 6与React JS构建认证功能？LexiJWTAuthenticationBundle使用问题排查

让我们一步步解决你遇到的问题，同时理清整个认证流程的逻辑：

一、解决404 Not Found错误 #

你收到404的核心原因是：LexikJWTAuthenticationBundle本身不提供默认的登录路由，你请求的/api/check_login根本不存在。

1. 编写登录控制器 #

首先需要创建一个处理登录请求的控制器，用来验证用户凭证并生成JWT Token：

// src/Controller/ApiLoginController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Core\Exception\BadCredentialsException;
use Symfony\Component\Security\Core\User\UserInterface;
use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;

class ApiLoginController extends AbstractController
{
    #[Route('/api/login', name: 'api_login', methods: ['POST'])]
    public function login(Request $request, AuthenticationUtils $authenticationUtils): JsonResponse
    {
        // 获取登录错误信息
        $error = $authenticationUtils->getLastAuthenticationError();
        if ($error) {
            return new JsonResponse(
                ['message' => $error instanceof BadCredentialsException ? '邮箱或密码错误' : $error->getMessage()],
                $error instanceof BadCredentialsException ? 401 : 400
            );
        }

        // 获取已认证的用户，生成Token
        $user = $this->getUser();
        if ($user instanceof UserInterface) {
            $token = $this->get('lexik_jwt_authentication.jwt_manager')->create($user);
            return new JsonResponse([
                'token' => $token,
                'user' => ['email' => $user->getUserIdentifier()]
            ]);
        }

        return new JsonResponse(['message' => '用户未认证'], 401);
    }
}

2. 验证路由是否存在 #

运行命令检查路由是否正确注册：

php bin/console debug:router

你应该能看到api_login路由，路径为/api/login。

3. 修正cURL请求 #

现在用正确的路由重新测试：

curl -X POST -H "Content-Type: application/json" https://localhost/api/login --data '{"email":"johndoe@gmail.fr","password":"test"}' -k

二、解决401 "JWT Token not found"错误 #

这个错误说明你的React前端没有在请求头中携带有效的JWT Token。正确的流程是：

1. 前端先获取Token #

首先调用登录接口拿到Token，并存入localStorage或状态管理工具：

import axios from 'axios';

const handleLogin = async (email, password) => {
  try {
    const response = await axios.post('https://localhost/api/login', { email, password }, {
      headers: { 'Content-Type': 'application/json' },
      withCredentials: false // 无状态API不需要携带Cookie
    });
    // 存储Token
    localStorage.setItem('jwt_token', response.data.token);
    // 登录成功后跳转到主页
    window.location.href = '/';
  } catch (error) {
    console.error('登录失败:', error.response.data.message);
  }
};

2. 后续请求携带Token #

所有需要认证的接口请求，都要在请求头中添加Authorization: Bearer <你的Token>。你可以封装Axios实例自动处理：

// src/services/api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://localhost/api',
  headers: { 'Content-Type': 'application/json' }
});

// 请求拦截器：自动添加Token
api.interceptors.request.use(config => {
  const token = localStorage.getItem('jwt_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => Promise.reject(error));

// 响应拦截器：处理Token过期
api.interceptors.response.use(response => response, error => {
  if (error.response.status === 401) {
    // Token无效或过期，清除存储并跳回登录页
    localStorage.removeItem('jwt_token');
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

export default api;

之后用这个封装好的实例请求接口：

import api from './services/api';

const fetchProtectedData = async () => {
  try {
    const response = await api.get('/api/protected-endpoint');
    console.log('受保护数据:', response.data);
  } catch (error) {
    console.error('请求失败:', error.response.data);
  }
};

三、理清LexikJWTAuthenticationBundle的运行逻辑 #

这个Bundle的核心是生成和验证JWT Token，它依赖Symfony Security完成用户认证，完整流程是：

1. 用户提交邮箱密码到你的登录端点（比如/api/login）
2. Symfony Security的json_login监听器验证凭证是否正确
3. 验证成功后，LexikJWT的认证成功处理器生成Token并返回给前端
4. 前端后续请求携带Token，LexikJWT的jwt监听器验证Token有效性，解析出用户信息完成认证

划重点：你必须自己编写登录控制器（或配置正确的json_login.check_path），Bundle不会自动创建登录路由。

四、Symfony 6 + React 完整认证配置步骤 #

后端配置（Symfony） #

1. 安装Bundle：

composer require lexik/jwt-authentication-bundle

2. 生成JWT密钥对：

php bin/console lexik:jwt:generate-keypair

3. 配置config/packages/security.yaml：

security:
    password_hashers:
        App\Entity\User:
            algorithm: auto

    providers:
        app_user_provider:
            entity:
                class: App\Entity\User
                property: email

    firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false
        api:
            pattern: ^/api/
            stateless: true
            json_login:
                check_path: /api/login  # 和你的登录路由一致
                success_handler: lexik_jwt_authentication.handler.authentication_success
                failure_handler: lexik_jwt_authentication.handler.authentication_failure
            jwt: ~

    access_control:
        - { path: ^/api/login, roles: PUBLIC_ACCESS } # Symfony 6.2+用PUBLIC_ACCESS，更早版本用IS_AUTHENTICATED_ANONYMOUSLY
        - { path: ^/api, roles: IS_AUTHENTICATED_FULLY }

4. 确保你的User实体实现UserInterface，并包含getUserIdentifier()方法：

// src/Entity/User.php
namespace App\Entity;

use Symfony\Component\Security\Core\User\UserInterface;

class User implements UserInterface
{
    // ... 你的实体字段

    public function getUserIdentifier(): string
    {
        return $this->email; // 用邮箱作为用户标识
    }

    // ... 实现UserInterface的其他方法
}

5. 手动添加用户时，务必存储哈希后的密码，可以用命令生成：

php bin/console security:hash-password

把生成的哈希值存入数据库的password字段。

前端配置（React） #

1. 实现登录表单，调用登录接口获取Token
2. 封装Axios实例自动携带Token（如前文示例）
3. 处理Token过期逻辑，比如401时清除Token并跳回登录页

常见问题排查 #

• 404错误：用php bin/console debug:router确认路由存在，请求路径和路由一致
• 401 "Invalid credentials"：检查密码是否是哈希后的，密码哈希器配置是否正确
• 401 "JWT Token not found"：确认请求头有Authorization: Bearer <token>，Token未过期
• Token验证失败：检查JWT密钥对是否生成，config/packages/lexik_jwt_authentication.yaml中的密钥路径是否正确

内容的提问来源于stack exchange，提问作者Noor Ha