que - input token laravel

Cómo pasar el valor del token CSRF de laravel a vue

Question

Tengo este formulario donde el usuario solo debe escribir texto dentro de un área de texto:

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

Luego, tengo este código de script donde estoy usando vue.js con ajax para pasar ese texto a un controlador y, finalmente, guardarlo en la base de datos:

//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,
                    }
                });
            }
        },
    });

Sin embargo, esto no funciona hasta ahora, ya que existe esta excepción de desajuste de token. No sé cómo hacer que funcione. Cómo pasar este valor de token al controlador. He probado lo siguiente:

1) dentro del formulario, he agregado un nombre de vue al token:

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

2) He intentado pasar este valor de token a 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,
                    }
                });
            }
        },
    });

... pero en la consola, vue ni siquiera lo atrapa :(

Esto me lleva al siguiente error:

TokenMismatchException en la línea 68 de VerifyCsrfToken.php:

¿Cómo lo arreglo? ¿Algunas ideas?

Answer 1

Lo resolví gracias a estas dos respuestas:

1) Primero leí este , que me llevó a

2) Este segundo .

Entonces, en mi formulario guardo esto:

{{ csrf_field() }}

Y dentro del archivo js solo agrego lo siguiente (fuera y encima de la instancia de Vue):

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

Así que todo el código js es:

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,
                    }
                });
            }
        },
    });

Answer 2

Mi solución a esto es que todos los componentes de vue obtienen el token csrf justo antes de realizar una solicitud. Puse esto en mi archivo bootstrap.js.

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

Entonces ten una clase CoolApp.php

    public function getScriptVariables()
    {
      return json_encode([
          ''csrfToken'' => csrf_token(),
      ]);
    }

Answer 3

Simplemente, sugeriría poner esto en su archivo PHP:

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

De esta manera, puede importar fácilmente su csrfToken desde la parte JS (Vue en este caso).

Además, si inserta este código en su archivo de diseño PHP, puede usar el token de cualquier componente de su aplicación, ya que window es una variable global de JS.

Fuente: Tengo el truco de this post.

Answer 4

Una forma mejor es simplemente pasar el token csrf a través de una ranura al componente vue.

En el archivo blade.php:

@extends(''layouts.app'')

@section(''content'')
          <my-vue-component>
            {{ csrf_field() }}
          </my-vue-component>
@endsection

En MyVueComponent.vue

   <form role="form">
       <slot>
         <!-- CSRF gets injected into this slot -->
       </slot> 
       <!-- form fields here -->
    </form>

Answer 5

Very Easy Solution Solo agregue un campo oculto dentro del formulario. Un ejemplo

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

Ahora agregue la variable csrf dentro del script en el archivo vue, como este. (Recuerda, debe estar dentro de los datos ).

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

NB Verás una etiqueta meta en tu archivo blade.php como este.

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

Si no hay nada como esto, debes colocarlo allí.