Vue 组件中的 Laravel CSRF 字段
Posted
技术标签:
【中文标题】Vue 组件中的 Laravel CSRF 字段【英文标题】：Laravel CSRF Field in Vue Component 【发布时间】：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>【问题讨论】：
这个问题似乎是***.com/questions/39938284/…的克隆 【参考方案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 !!
【讨论】：
以上是关于Vue 组件中的 Laravel CSRF 字段的主要内容，如果未能解决你的问题，请参考以下文章
带有 axios 和 vue 的 laravel 5.8 中的 CSRF
Vue Router Laravel 5.3 Vue 2 JS 上的 CSRF 令牌复制