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

【问题标题】：How to refer laravel csrf field inside a vue template如何在 vue 模板中引用 laravel csrf 字段
【发布时间】：2018-01-13 08:30:23
【问题描述】：

我有一个包含表单的 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？

【问题讨论】：

您可以将 CSRF 令牌作为标头 headers['X-CSRF-TOKEN'] 发送。也可以将其存储到应用程序的元标记中，稍后使用 document.querySelector 获取它。

标签： laravel vue.js laravel-blade

【解决方案1】：

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

用法：<form v-csrf-token>

【讨论】：

【解决方案2】：

如果您的标头（视图）的元标记中有令牌

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

【讨论】：

我使用document.head.querySelector('meta[name="csrf-token"]').content 获取csrf 数据，现在开始工作！非常感谢。

【解决方案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'
};

【讨论】：

Axios 已经默认提供了这个。如果你使用 axios 并添加这个 sn-p，你实际上会通过复制加密的 csrf 令牌 cookie 来中断你的调用。

【解决方案4】：

这就是我使用它的方式：

{!! csrf_field() !!}

把它放在你的表单中。

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

methods: {
                submitForm: function(e) {

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

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

data: $(form).serialize()

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

【讨论】：