web-dev-qa-db-fra.com

Comment faire référence à laravel champ csrf dans un modèle vue

J'ai un modèle vue qui contient un formulaire:

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

Dans laravel, les formulaires doivent avoir un champ csrf_field () défini. Mais dans un composant vue, l'instruction {{ csrf_field() }} signifie que j'ai une méthode nommée csrf_field Dans mon vue instance et je l'appelle.

Comment ajouter csrf_field dans cette circonstance?

laravelvue.jslaravel-blade
9
Tanmay

Si vous avez le jeton dans la balise META de votre en-tête (voir)

<meta name="csrf-token" content="{{ csrf_token() }}">

vous pouvez accéder au jeton en utilisant

data() {
        return {
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
}

Et ajoutez un champ de saisie masqué dans le formulaire et liez la propriété csrf à la valeur comme ceci:

<form id="logout-form" :action="href" method="POST" style="display: none;">
    <input type="hidden" name="_token" :value="csrf">
</form>
27
linktoahref

Voici comment je l'utilise:

{!! csrf_field() !!}

Mettez cela dans votre formulaire.

et dans votre script vue vous pouvez simplement

methods: {
                submitForm: function(e) {

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

obtenir le formulaire et son action alors la valeur des données sera:

data: $(form).serialize()

Cela fonctionne parfaitement pour moi et ne donne aucune erreur.

0
Smokegun

Si vous utilisez axios avec Vue2 pour vos demandes ajax, vous pouvez simplement ajouter ce qui suit (généralement dans votre fichier bootstrap.js):

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