Question

我想问一下如何在我的vue组件中添加csrf_field（）。错误是

属性或方法“csrfToken”未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

以下是代码：

<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>

Answer 1

试试这个：

<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 } } }

Answer 2

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

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

通过这种方式，您可以轻松地从JS部件导入csrfToken（在本例中为Vue）。

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

来源：我从this发帖获得了这个技巧。

Answer 3

我认为你需要这样写：

{{ crsf_token() }}

而不是这样：

{{ csrfToken() }}

如果这不起作用，可以试试这个：

{!! csrf_token !!}

Answer 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>标记中。

Answer 5

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>

Answer 6

解决这个问题，同时在vue v-for循环中构建多种形式。

添加到数据中

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

添加了隐藏的表单元素

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

Vue组件中的Laravel CSRF字段

6 个答案:

Laravel 5或更高版本