Vue 组件中的 Laravel CSRF 字段答案

【问题标题】：Laravel CSRF Field in Vue ComponentVue 组件中的 Laravel CSRF 字段
【发布时间】：2017-12-15 23:56:59
【问题描述】：

我想问如何在我的 vue 组件中添加 csrf_field()。错误是

属性或方法“csrfToken”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

代码如下：

<script>
export default {
  name: 'create',
  data: function(){
    return {
        msg: ''
    }
  },
  props:['test']
}
</script>

<template>
  <div id="app">
    <form action="#" method="POST">
      {{csrfToken()}}
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="location">Location</label>
        <input type="text" id="location" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="age">Age</label>
        <input type="number" id="age" class="form-control"> 
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-default"> 
      </div>
    </form>
  </div>
</template>

【问题讨论】：

这个问题似乎是stackoverflow.com/questions/39938284/…的克隆

标签： laravel vue.js

【解决方案1】：

正如我已经写过here，我只是建议把它放在你的PHP文件中：

<script>
    window.Laravel = <?php echo json_encode(['csrfToken' => csrf_token()]); ?>
</script>

这样您就可以轻松地从 JS 部分（在本例中为 Vue）导入您的 csrfToken。

此外，如果您在 PHP 布局文件中插入此代码，您可以在应用程序的任何组件中使用该令牌，因为 window 是一个 JS 全局变量。

来源：我从this 帖子中得到了诀窍。

【讨论】：

【解决方案2】：

Laravel 5 或更高版本

首先，您需要将 CSRF 令牌 存储在标题中的 HTML 元标记中：

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

然后你可以将它添加到你的脚本中：

<script>
export default {
  name: 'create',
  data: function(){
    return {
        msg: '',
        csrf: document.head.querySelector('meta[name="csrf-token"]').content
    }
  },
  props:['test']
}
</script>

在模板中：

<template>
  <div id="app">
    <form action="#" method="POST">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="location">Location</label>
        <input type="text" id="location" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="age">Age</label>
        <input type="number" id="age" class="form-control"> 
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-default"> 
      </div>
      <input type="hidden" name="_token" :value="csrf">
    </form>
  </div>
</template>

【讨论】：

【解决方案3】：

试试这个：

<script>
export default {
  name: 'create',
  data: function(){
    return {
        msg: '',
        csrf: window.Laravel.csrfToken
    }
  },
  props:['test']
}
</script>

在你的标记中使用

<input type="hidden" name="_token" :value="csrf" />

编辑

有点像兔子洞，但 Vue 的一大特点是它可以使用 AJAX 和 vue-resource 扩展轻松处理 POST、PATCH 等请求。您可以使用 Vue 组件处理这些数据，而不是在这里使用 <form>。如果您要采用此路线，则可以设置默认标头以随每个请求发送，无论它是什么方法，因此您始终可以发送您的 CSRF 令牌。

exports deafult{
 http: {
  headers: {
   'X-CSRF-TOKEN': window.Laravel.csrfToken
  }
 }
}

【讨论】：

【解决方案4】：

如果您查看/resources/assets/js/bootstrap.js，您会发现这些行

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: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 }

我相信您正在使用 axios 来处理您的请求。这意味着您需要添加

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

在您的<head> 标签中。

【讨论】：

【解决方案5】：

在 vue v-for 循环中构建多个表单时遇到了这个问题。

添加到数据中；

csrf: document.head.querySelector('meta[name="csrf-token"]').content,

添加了隐藏的表单元素

<input type="hidden" name="_token" :value="csrf" />

【讨论】：

【解决方案6】：

我认为你需要这样写：

{{ crsf_token() }}

不是这样的：

{{ csrfToken() }}

如果这不起作用，也许试试这个：

{!! csrf_token !!}

【讨论】：