Comment passer laravel valeur du jeton CSRF à vue

j'ai ce formulaire où l'utilisateur doit uniquement type de texte à l'intérieur d'une zone de texte:

            <form action="#" v-on:submit="postStatus">{{-- Name of the method in Vue.js --}}
                <div class="form-group">
                    <textarea class="form-control" rows="5" maxlength="140" autofocus placeholder="What are you upto?" required v-model="post"></textarea>
                </div>
                <input type="submit" value="Post" class="form-control btn btn-info">

                {{ csrf_field() }}

            </form>

alors, j'ai ce code de script où j'utilise vue.js avec ajax afin de passer ce texte dans un contrôleur et éventuellement l'enregistrer dans la base de données:

//when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
        },
        http    :   {
            headers: {
                'X-CSRF-Token': $('meta[name=_token]').attr('content')
            }
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                    }
                });
            }
        },
    });

cependant, cela ne fonctionne pas jusqu'à présent, puisqu'il y a cette exception d'inadéquation des tokens. Je ne sais pas comment le faire fonctionner. Comment passer cette valeur de token au controller. J'ai essayé le code suivant:

1) dans le formulaire, j'ai ajouté un nom de vue au token:

<input type="hidden" name="_token" value="YzXAnwBñC7qPK9kg7MGGIUzznEOCi2dTnG9h9çpB" v-model="token">

2) j'ai essayé de passer cette valeur de jeton dans la vue:

//when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
            token   : '',
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                        '_token':   this.token,
                    }
                });
            }
        },
    });

... mais dans la console, vue ne l'attrape même pas: (

Ce qui m'amène à l'erreur suivante:

TokenMismatchException in VerifyCsrfToken.php ligne 68:

Comment puis-je résoudre ce problème? Des idées?

15
demandé sur Pathros 2016-10-09 02:04:12

4 réponses

Very Easy Solution Il suffit d'ajouter un champ caché à l'intérieur du formulaire. Un Exemple

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

Maintenant, ajouter csrf variable à l'intérieur de script au fichier vue, comme ceci. (Rappelez-vous, il doit être à l'intérieur ).

<script>
     export default {
        data: () => ({
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
          }),        
    }
</script>

N.B. Vous verrez une balise meta dans votre blade.php fichier comme ceci. 

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

S'il n'y a rien de tel, vous devez le placer là.

6
répondu Md. Harun Or Rashid 2018-03-08 20:39:42

simplement, je suggérerais de mettre ceci dans votre fichier PHP:

<script>
    window.Laravel = <?php echo json_encode(['csrfToken' => csrf_token()]); ?>
</script>

de cette façon vous êtes en mesure d'importer facilement votre csrfToken de la partie JS (Vue dans ce cas).

de plus, si vous insérez ce code dans votre fichier PHP layout, vous pouvez utiliser le token par n'importe quel composant de votre application, puisque window est une variable globale JS.

Source: j'ai reçu l'astuce de post.

1
répondu Jacopo Pace 2017-12-08 13:50:10

ma solution est que tous les composants d'Evi obtiennent un jeton csrf juste avant qu'une requête ne soit faite. J'ai mis ça dans mon bootstrap.fichier js.

Vue.http.interceptors.push((request, next) => {
   request.headers.set('X-CSRF-TOKEN', CoolApp.csrfToken);
   next();
});

alors avoir un CoolApp de classe.php

    public function getScriptVariables()
    {
      return json_encode([
          'csrfToken' => csrf_token(),
      ]);
    }
0
répondu Marcus 2017-10-01 14:18:07

je l'ai résolu grâce à ces deux réponses:

1) j'ai d'Abord lu celui-ci, qui m'a conduit à

2) Ceci second.

Donc, dans mon formulaire j'ai garder ceci:

{{ csrf_field() }}

Et dans le fichier js, je n'ajoute suivants (à l'extérieur et au-dessus de la Vue, par exemple:

var csrf_token = $('meta[name="csrf-token"]').attr('content');

Donc tout le code js:

var csrf_token = $('meta[name="csrf-token"]').attr('content');
    /*Event handling within vue*/
    //when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
            token   : csrf_token,
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                        '_token':   this.token,
                    }
                });
            }
        },
    });
0
répondu Pathros 2018-01-31 16:05:40