Vue组件中的Laravel CSRF场

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

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

代码如下：

导出默认值{
名称：“创建”，
数据：函数（）{
返回{
消息：“”
}
},
道具：[“测试”]
}

{{csrfToken（）}}
名称
位置
年龄

我认为您需要这样写：

{{ crsf_token() }}

{{ csrfToken() }}

不是这样的：

{{ crsf_token() }}

{{ csrfToken() }}

如果不起作用，可以尝试以下方法：

{!! csrf_token !!}

试试这个：

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

---

如果您查看

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

在您的

标记中。

正如我已经写的那样，我建议您将其放在PHP文件中：

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

window.Laravel=

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

此外，如果您在PHP布局文件中插入此代码，您可以通过应用程序的任何组件使用令牌，因为

window

是一个JS全局变量

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

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>

导出默认值{
名称：“创建”，
数据：函数（）{
返回{
消息：“”，
csrf:document.head.querySelector（'meta[name=“csrf token”]”）。内容
}
},
道具：[“测试”]
}

在模板中：

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

名称
位置
年龄

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

添加到数据中

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

添加了隐藏表单元素

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

---

这个问题似乎是