如何从Laravel后端向Vue前端传递CSRF Token？

嘿，针对你的Vue独立客户端 + Laravel后端API的CSRF防护需求，我来给你梳理几个实用的方案，顺便聊聊你提到的「定时推送Token」思路的可行性：

Laravel本身已经做了很多CSRF防护的优化，大部分场景下根本不需要定时推送Token，这几种方案更省心：

1. 利用Laravel自动设置的XSRF-TOKEN Cookie（同/子域名场景） #

Laravel默认会在用户首次访问时，自动给客户端设置名为XSRF-TOKEN的Cookie，值就是当前有效的CSRF Token。如果你的Vue和Laravel是同域名（或配置了正确Cookie域的子域名），直接让请求库自动读取这个Cookie并携带对应Header即可：

比如用axios的话，只需要在Vue项目里加这段配置：

import axios from 'axios';

// 让axios自动读取Cookie里的XSRF-TOKEN，放到请求头的X-XSRF-TOKEN里
axios.defaults.xsrfCookieName = 'XSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';

之后所有axios请求都会自动带上正确的CSRF Header，完全不用手动管理Token，这是最推荐的方案。

2. 初始请求获取Token（跨域名/完全独立部署场景） #

如果Vue和Laravel是完全跨域名的，Cookie无法直接共享，那可以做一个专门的Token接口：

• Laravel端：新增一个/api/csrf-token路由，返回当前的CSRF Token，同时这个接口要排除CSRF验证（因为还没拿到Token呢）：

  // routes/api.php
  Route::get('/csrf-token', function () {
      return response()->json(['csrf_token' => csrf_token()]);
  });
  
  // app/Http/Middleware/VerifyCsrfToken.php
  protected $except = [
      '/api/csrf-token', // 把这个路由加入排除列表
  ];
  

• Vue端：在应用初始化时（比如main.js里）调用这个接口，把Token存在内存或localStorage里，之后所有请求都在Header里带上X-CSRF-TOKEN：

  // 初始化时获取Token
  axios.get('/api/csrf-token').then(res => {
      window.csrfToken = res.data.csrf_token;
  });
  
  // 后续请求携带Header
  axios.post('/api/xxx', data, {
      headers: {
          'X-CSRF-TOKEN': window.csrfToken
      }
  });
  

也可以把Token挂到Vue原型上，方便全局调用。

这个方案并非完全不可行，但大部分场景下没必要，先给你分析清楚：

实现思路 #

两种方式可以实现：

• 定时AJAX请求：每隔N秒调用一次上面的/api/csrf-token接口，更新本地存储的Token
• WebSocket推送：用Laravel Echo配合WebSocket服务，后端主动给客户端推送新的Token

优劣势分析 #

• 优点：能保证Token始终处于最新状态，适合session有效期极短（比如几分钟），或者有特殊业务需求需要实时更新Token的场景
• 缺点：
  • 增加不必要的请求开销：Laravel的CSRF Token默认和Session有效期一致（默认2小时，可配置），只要用户Session没过期，Token就有效，完全没必要频繁更新
  • 复杂度提升：WebSocket方案需要额外配置服务，定时请求则会增加后端的无意义请求量
  • 冗余操作：用户Session过期后，Token本身就失效了，此时用户需要重新登录，登录过程中会自动获取新的Token，定时推送完全是多此一举

优先选择「利用XSRF-TOKEN Cookie自动携带Header」的方案，这是最贴合Laravel设计、最省心的方式；跨域名场景用「初始请求获取Token」即可。定时推送Token只在非常特殊的业务场景下才需要考虑，一般不推荐。

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