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

Posted 2023-03-14

【中文标题】如何在 vue 模板中引用 laravel csrf 字段

【英文标题】：How to refer laravel csrf field inside a vue template

【发布时间】：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 获取它。

【参考方案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()

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