Symfony 5 对接Vue.js前端时出现Invalid CSRF token错误及后续认证异常问题

看起来你遇到的核心问题是CSRF Token与会话的绑定不匹配，以及对Symfony CSRF防护机制的理解偏差，我来一步步帮你拆解和解决：

一、第一个错误："Invalid CSRF token"的原因 #

你在Vue中获取的CSRF Token，大概率没有和当前认证请求的会话关联起来。Symfony的CSRF Token是与用户会话强绑定的：

• 每个Token都对应一个会话，并且存储在会话中；
• 验证时，后端会拿请求中的Token与会话中存储的同ID Token做对比，不匹配就会抛出错误。

如果Vue前端获取Token时，没有带上Symfony的会话Cookie（比如跨域请求没开启withCredentials，或者获取Token的请求和登录请求不在同一个会话里），那么生成的Token属于另一个会话（甚至无会话），自然无法通过验证。

你的第一个认证器代码其实是正确的：

$passport->addBadge(new CsrfTokenBadge('authenticate', $request->get('_csrf_token')));

问题出在前端获取Token的方式，而非后端认证器。

二、第二个尝试的问题："Access denied, the user is not fully authenticated" #

你在认证器中自行生成CSRF Token并添加到Passport的做法，完全违背了CSRF防护的设计逻辑：

• CSRF Badge的作用是验证前端传来的Token，而非后端自己生成一个跳过验证；
• 这种方式虽然能通过CSRF检查，但会破坏认证流程的会话关联——前端没有传递合法的Token，Symfony的安全系统会认为这个认证请求存在风险，因此不会将用户的Authenticated Token存入Token Storage，导致后续路由访问时提示未认证。

这种做法不可取，应该放弃。

三、正确的解决方案：同步会话+正确获取传递Token #

1. 后端提供CSRF Token接口 #

创建一个无需认证的接口，在当前会话上下文下生成并返回CSRF Token：

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

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;

class CsrfTokenController extends AbstractController
{
    public function getAuthToken(CsrfTokenManagerInterface $csrfTokenManager): JsonResponse
    {
        // 这里的'id'要和认证器中CsrfTokenBadge的第一个参数一致
        $token = $csrfTokenManager->getToken('authenticate');
        
        return new JsonResponse([
            '_csrf_token' => $token->getValue()
        ]);
    }
}

在routes.yaml中配置路由：

get_csrf_token:
    path: /api/csrf-token
    controller: App\Controller\CsrfTokenController::getAuthToken
    methods: GET

2. 前端正确获取并传递Token #

在Vue中，先请求这个接口获取Token（确保请求携带会话Cookie），再提交登录表单：

// Vue登录组件示例
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      csrfToken: ''
    };
  },
  mounted() {
    // 页面加载时获取CSRF Token
    this.fetchCsrfToken();
  },
  methods: {
    async fetchCsrfToken() {
      const response = await axios.get('/api/csrf-token', {
        // 关键：携带会话Cookie，确保和后续登录请求同会话
        withCredentials: true
      });
      this.csrfToken = response.data._csrf_token;
    },
    async submitLogin() {
      await axios.post('/login', {
        username: this.username,
        password: this.password,
        _csrf_token: this.csrfToken
      }, {
        withCredentials: true
      });
    }
  }
};

3. 跨域场景补充配置 #

如果Vue和Symfony是跨域部署，还需要：

• 在Symfony中配置CORS，允许携带凭证（allow_credentials: true）；
• 确保axios全局配置withCredentials: true。

四、Twig的csrf_token('authenticate')为什么正常？ #

Twig的这个函数本质是调用CsrfTokenManagerInterface::getToken()，工作流程是：

1. 检查当前用户会话中，是否存在ID为authenticate的CSRF Token；
2. 如果不存在，生成一个随机字符串Token，并存入当前会话（存储键为_csrf_authenticate）；
3. 返回Token的字符串值。

当用Twig渲染表单时，生成的Token属于当前会话，提交表单时请求会携带会话Cookie，后端验证时就能从会话中取出对应Token对比，自然验证通过。

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