VueコンポーネントのCSRFフィールド

私のvueコンポーネントにcsrf_field（）を追加するにはどうすればいいですか？エラーはVueコンポーネントのCSRFフィールド

プロパティまたはメソッド "csrfToken"がインスタンスで定義されていませんが、レンダリング中に参照されています。データオプションで無効なデータプロパティを宣言してください。

ここでは、コードです：

<script> 
 
export default { 
 
    name: 'create', 
 
    data: function(){ 
 
    return { 
 
     msg: '' 
 
    } 
 
    }, 
 
    props:['test'] 
 
} 
 
</script>

<template> 
 
    <div id="app"> 
 
    <form action="#" method="POST"> 
 
     {{csrfToken()}} 
 
     <div class="form-group"> 
 
     <label for="name">Name</label> 
 
     <input type="text" id="name" class="form-control"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="location">Location</label> 
 
     <input type="text" id="location" class="form-control"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="age">Age</label> 
 
     <input type="number" id="age" class="form-control"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input type="submit" class="btn btn-default"> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</template>

出典

2017-07-11 Clyde Dexter Santiago

この質問はクローンのようですhttps://stackoverflow.com/questions/39938284/how-to-pass-laravel-csrf-token-value-to-vue/47715332 –

私はあなたがこのようにそれを記述する必要があると思う：

{{ crsf_token() }}

はなく、このように：

{{ csrfToken() }}

は、

問題が解決しない場合は、多分これを試してみてください。

{!! csrf_token !!}

出典

2017-07-11 19:12:22

このお試しください：ちょうど

<input type="hidden" name="_token" :value="csrf" />

EDIT

を使用

<script> 
export default { 
    name: 'create', 
    data: function(){ 
    return { 
     msg: '', 
     csrf: window.Laravel.csrfToken 
    } 
    }, 
    props:['test'] 
} 
</script>

そして、あなたのマークアップを

ウサギの穴のビットですが、Vueの大きな特徴の1つは、AJAXとvue-resource拡張を使用してPOST、PATCHなどのリクエストを簡単に処理できることです。ここで<form>を使用する代わりに、Vueコンポーネントを使用してこのデータを処理することができます。このルートを使用する場合は、どのような方法であっても各リクエストとともに送信するようにデフォルトのヘッダーを設定できるので、いつでもCSRFトークンを送信できます。

exports deafult{ 
http: { 
    headers: { 
    'X-CSRF-TOKEN': window.Laravel.csrfToken 
    } 
} 
}

出典

2017-07-11 19:34:47

あなたは/resources/assets/js/bootstrap.jsを見れば、あなたはこれらの行

let token = document.head.querySelector('meta[name="csrf-token"]'); 

if (token) { 
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; 
} else { 
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); 
}

私はあなたの要求のためaxiosを使用していると考えているのでしょう。つまり、あなたの<head>タグに

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

を追加する必要があります。

出典

2017-07-12 04:00:41

私はすでにhereを書いたように、私は単にあなたのPHPファイルでこれを置くことをお勧めします：

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

あなたは簡単にJSの部分（この場合はヴュー）からあなたcsrfTokenをインポートすることができます。この方法。

さらに、このコードをPHPレイアウトファイルに挿入すると、windowがJSグローバル変数であるため、アプリケーションの任意のコンポーネントでトークンを使用できます。

出典：私はthis投稿からトリックを得ました。

出典

2017-12-08 13:49:12

VueコンポーネントのCSRFフィールド

答えて

関連する問題