web-dev-qa-db-ja.com

参照する方法laravel csrfフィールドa vueテンプレート内

私は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を追加するにはどうすればよいですか？

laravelvue.jslaravel-blade
9
Tanmay

ヘッダーのメタタグにトークンがある場合（ビュー）

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

これは私がそれを使う方法です：

{!! csrf_field() !!}

それをフォームに入れてください。

vueスクリプトでは簡単にできます

methods: {
                submitForm: function(e) {

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

フォームと彼のアクションを取得すると、データ値は次のようになります。

data: $(form).serialize()

これは私にとっては完璧に機能し、エラーはまったく発生しません。

0
Smokegun

AjaxリクエストにVue2でaxiosを使用している場合は、次のコードを追加できます（通常はbootstrap.jsファイルにあります）。

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