Как указать поле laravel csrf внутри шаблона vue

У меня есть шаблон vue, содержащий форму:

<form id="logout-form" :action="href" method="POST" style="display: none;">
        {{ csrf_field() }}
</form>

В laravel для форм должен быть определен csrf_field (). Но внутри компонента vue выражение {{ csrf_field() }} означает, что у меня есть метод с именем csrf_field в моем экземпляре vue, и я вызываю его.

Как мне добавить csrf_field в этом случае?


vue.js laravel laravel-blade
person Tanmay    schedule 05.08.2017    source источник
comment
Вы можете отправить токен CSRF как заголовок headers['X-CSRF-TOKEN'], а также сохранить его в метатеге вашего приложения, а позже просто получить его, например, с помощью document.querySelector.   -  person Belmin Bedak    schedule 05.08.2017

Ответы (4)


arrow_upward
55
arrow_downward

Если у вас есть токен в метатеге вашего заголовка (просмотр)

<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>
person linktoahref    schedule 05.08.2017
comment
Я использовал document.head.querySelector('meta[name="csrf-token"]').content для получения данных csrf и теперь работаю! Большое спасибо. - person W. Dan; 07.12.2018

arrow_upward
2
arrow_downward

Если вы используете 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'
};
person omarjebari    schedule 05.03.2018
comment
Axios уже предоставляет это по умолчанию. Если вы используете axios и добавляете этот фрагмент, вы фактически нарушаете свои звонки, дублируя зашифрованный файл cookie токена csrf. - person henser; 13.02.2019

arrow_upward
1
arrow_downward

Вы можете использовать этот пакет: npm install vue-laravel-csrf

Использование: <form v-csrf-token>

person MohKoma    schedule 25.11.2020

arrow_upward
0
arrow_downward

Вот как я его использую:

{!! csrf_field() !!}

Поместите это в свою форму.

и в вашем сценарии vue вы можете просто

methods: {
                submitForm: function(e) {

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

получить форму и его действие, тогда значение данных будет:

data: $(form).serialize()

Это отлично работает для меня и вообще не дает ошибок.

person Smokegun    schedule 05.08.2017