vueコンポーネントのCsrfトークン

Question

Vue.jsを統合したLaravel 5.3プロジェクトがあり、私のフォームにCSRF-TOKENを使用したいと思います。フォームのHTMLコードを、私はこの持ち

resources/assets/js/bootstrap.js

にVueのコンポーネントファイルにあります。そして、Vueのファイルに私が必要

require('./bootstrap'); 
Vue.component('callbackwindow', require('./components/callbackwindow.vue')); 

const app = new Vue({ 
    el: '#app', 
    data: { }, 
}); 

：その後、私はメインのVUEファイル/resources/assets/js/app.jsを持って

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

をcsrf_fieldを使用するには、標準のphp csrf_field()がVueコンポーネント内でレンダリングされないため、そこに取得する方法がわかりません私はMyApp.csrfTokenのインポート方法がわかりません。

<template> 
<div class="modal fade" > 
    <form @submit.prevent="submitForm" name="callback" method="POST" action="/" role="form" class="form-horizontal" enctype="multipart/form-data"> 
    {!! csrf_field() !!} 
    ...form code here... 
    </form> 
</div> 
</template> 
<script> 
    export default { } 
</script> 

それは私のVueのテンプレートファイルにここからMyApp.csrfToken変数をインポートすることは可能ですか？

<script> 
    var MyApp = { 
     csrfToken: "{{ csrf_token() }}" 
    } 
</script> 

また、あなたがcookieライブラリーのような輸入のものを使用してxsrfを使用することができます：あなたは、トークンがあなたのメインブレードのファイルのあなたのheadセクションに以下を追加することですCSRF定義することができ

Answer 1

一つの方法代わりにトークン。 NPMと

：糸と

npm install cookie 

：あなたのbootstrap.jsファイルで次に

yarn add cookie 

：

import cookie from "cookie"; 


Vue.http.interceptors.push((request, next) => { 
    request.headers.set('X-XSRF-TOKEN', cookie.parse(document.cookie)['XSRF-TOKEN']); 
    next(); 
}); 

は、この情報がお役に立てば幸い！

Answer 2

私は同じ問題を抱えており、このように解決しました。私のどんなコンポーネント/子コンポーネントMyComponentの中app.blade.php

<script> 
var Laravel = { 
      'csrfToken' : '{{csrf_token()}}' 
     }; 

で

：私は次のように追加することにより、汚れグローバルスコープ

を作っているので、私は非常に誇りに思っていませんよ。 VUE：別の方法として、

<form method="POST" action="/my/path" class="pull-right"> 
    <input type="hidden" name="_token" :value="csrf">  
    <input class="btn" type="submit" value="Modify" /> 
</form> 


<script> 
    export default{ 
     data() { 
      return { 
       csrf: "", 
      } 
     }, 
     mounted() { 
      this.csrf = window.Laravel.csrfToken; 
     } 
    } 
</script> 

Answer 3

：

1-トークンFを取得します私はこのすべてを持っている

<your-component :csrf-token="{{ csrf_token() }}"></your-component>