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

原文由 Tanmay 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 linktoahref 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

用法： <form v-csrf-token>

原文由 MohKoma 发布，翻译遵循 CC BY-SA 4.0 许可协议