如何在 vue 模板中引用 laravel csrf 字段

Question

我有一个包含表单的 vue 模板：

<form id="logout-form" :action="href" method="POST" style="display: none;">
{{ csrf_field() }}
</form>

在 laravel 中，表单必须定义 csrf_field((。但是在 vue 组件中，语句{{ csrf_field() }}意味着我的 vue 实例中有一个名为csrf_field的方法，我正在调用它。

在这种情况下如何添加csrf_field？

Answer 1

如果标头的元标记中有令牌(视图(

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

您可以使用以下方法访问令牌

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

并在表单中添加一个隐藏的输入字段，并将 csrf 属性绑定到值，如下所示：

<form id="logout-form" :action="href" method="POST" style="display: none;">
<input type="hidden" name="_token" :value="csrf">
</form>

Answer 2

如果你在 ajax 请求中使用 axios 和 Vue2，你可以添加以下内容(通常在引导.js文件中(：

window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
};

Answer 3

您可以使用此软件包：npm install vue-laravel-csrf

用法：<form v-csrf-token>

Answer 4

这是我如何使用它：

{!! csrf_field() !!}

把它放在你的表格中。

在你的 Vue 脚本中，你可以简单地

methods: {
submitForm: function(e) {
var form = e.target || e.srcElement;
var action = form.action;

获取表单和他的操作，则数据值将为：

data: $(form).serialize()

这对我来说非常有效，根本没有错误。