如何在VueJS登录表单中添加Laravel CSRF Token？

嘿，这个问题我之前做Laravel+Vue项目的时候也踩过坑！因为.vue文件是由Vue自己的编译器处理的，根本不会经过Laravel的Blade解析器，所以你写的@csrf自然就直接当成文本输出了，完全起不了作用。给你几个实用的解决办法，按需选就行：

方法1：手动在表单中添加CSRF Token隐藏字段 #

这个方法适合你用原生表单提交的场景：

1. 先在你的主Blade模板（比如resources/views/layouts/app.blade.php）的<head>标签里添加Meta标签，用来存储CSRF Token：

   <meta name="csrf-token" content="{{ csrf_token() }}">
   

2. 在Login.vue的表单里替换@csrf，改成手动生成隐藏字段，并用Vue绑定token值：

   <template>
     <div class="app">
       <form action="/login" method="post">
         <!-- 替换@csrf为这个隐藏字段 -->
         <input type="hidden" name="_token" :value="csrfToken">
         <input type="text" class="email" name="email">
         <input type="password" class="password" name="password">
         <input type="submit" value="登录">
       </form>
     </div>
   </template>
   

3. 在Login.vue的script部分，从Meta标签中获取token并赋值给data属性：

   export default {
     data() {
       return {
         csrfToken: document.querySelector('meta[name="csrf-token"]').content
       }
     }
   }
   

方法2：用Axios自动携带CSRF Token（推荐异步提交场景） #

如果你的项目是用Axios做异步表单提交（Vue项目大多这么干），那更简单：
Laravel默认在resources/js/bootstrap.js里已经帮你配置好了Axios的CSRF Token请求头，你只需要确保这段代码存在：

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
  console.error('CSRF token not found');
}

配置好之后，你用Axios提交请求时，会自动把X-CSRF-TOKEN请求头发送给Laravel，Laravel会自动验证这个token，你完全不用在表单里加任何隐藏字段。比如你的登录请求可以这么写：

// 在Login.vue的方法里
methods: {
  submitLogin() {
    axios.post('/login', {
      email: this.email,
      password: this.password
    })
    .then(response => {
      // 登录成功逻辑
    })
    .catch(error => {
      // 错误处理
    });
  }
}

方法3：全局注入CSRF Token到Vue原型（多表单场景） #

如果你的项目里有很多需要CSRF Token的表单，不想每个组件都重复获取token，可以在全局把token挂载到Vue原型上：
在resources/js/app.js里添加：

import Vue from 'vue';

// 从Meta标签获取token
const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
// 挂载到Vue原型
Vue.prototype.$csrfToken = csrfToken;

之后在任何Vue组件里，都可以直接用$csrfToken这个全局属性：

<input type="hidden" name="_token" :value="$csrfToken">

最后再提醒一句：别再想着在.vue文件里用Blade指令啦，两者的编译流程完全分开，Blade只认.blade.php文件里的指令哦～

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