Как передать Laravel CSRF токен значение VUE

Question

я иметь такую ​​форму, где пользователь должен ввести текст только внутри текстовой области:

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

Затем, у меня есть этот скрипт, где я использую vue.js с Ajax для того, чтобы передать этот текст в контроллер и в конечном итоге сохранить его в базу данных:

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

Однако, это не работает до сих пор, так как есть этот маркер исключение несоответствия. Я не знаю, как заставить его работать. Как передать это значение токена контроллеру. Я попытался следующие:

1) внутри формы, я добавил имя VUE к маркеру:

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

2) Я попытался передать это значение маркера в 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, 
        } 
       }); 
      } 
     }, 
    }); 

... но в консоли вю, даже не поймать :(

Это приводит меня к следующей ошибке:

TokenMismatchException in VerifyCsrfToken.php line 68:

Как исправить это? Есть идеи?

Answer 1

Мое решение состоит в том, что все компоненты vue получают токен csrf перед запросом. Я поместил это в свой файл bootstrap.js.

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

Тогда есть класс CoolApp.php

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

Answer 2

Просто, я хотел бы предложить, чтобы поместить это в PHP файл:

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

Таким образом, вы находитесь в состоянии легко импорта ваш csrfToken из части JS (Vue в этом случае).

Кроме того, если вы вставляете этот код в свой файл макета PHP, вы можете использовать токен любым компонентом своего приложения, так как является глобальной переменной JS.

Источник: У меня есть трюк от this почты.

Answer 3

Я решил это благодаря этим двум ответам:

1) Во-первых, я прочитал this one, что привело меня к

2) Этот second one.

Итак, в моей форме я держу это:

{{ csrf_field() }}

И внутри файла JS я только добавить следующее (вне и выше экземпляра Вью):

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

Таким образом, весь код 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, 
        } 
       }); 
      } 
     }, 
    }); 

Answer 4

Very Easy Solution Просто добавьте скрытое поле внутри формы. Пример

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

Теперь добавьте csrf переменную внутри сценария в файле вю, как это. (Помните, что он должен находиться внутри данных).

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

N.B. Вы увидите метатег в своем blade.php файле, подобном этому.

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

Если нет ничего подобного, вам нужно поместить его туда.