如何在 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

如果您的 header（视图）

的元标记中有令牌

<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

我是这样使用它的：

{!! csrf_field() !!}

将其填写到您的表单中。

在你的 vue 脚本中你可以简单地

methods: {
                submitForm: function(e) {

                  var form = e.target || e.srcElement;
                  var action = form.action;

获取表单和他的操作，那么数据值将是：

data: $(form).serialize()

这对我来说非常有效，完全没有错误。

Answer 3

如果您将 axios 与 Vue2 一起用于您的 ajax 请求，您只需添加以下内容（通常在您的 bootstrap.js 文件中）：

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

Answer 4

您可以使用这个包：npm install vue-laravel-csrf

用法：<form v-csrf-token>

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

How to refer laravel csrf field inside a vue template

laravel

vue.js

laravel-blade