SPAを使用したCSRFトークン

Question

SPAにはVue jsを、バックエンドにはLaravelを使用しています。それはすべて正常に動作しますが、一度フォームが提出されれば明らかにcrsfトークンがリフレッシュされていないので、別のフォームを送信するとTokenMismatchExceptionと表示されます。

フォームがvue内のコンポーネントであるためレンダリングしようとすると、vueがエラーをスローするため、csrfトークンをフォームに挿入できません。

vueのデフォルトの共通ヘッダーを使用して、最初のリクエストでは動作しますが、現在ログインしているユーザーが最近トークンを使用したため、LaravelがTokenMismatchExceptionを返した後に、すべてのリクエストに対してname=_tokenを検索してアクセスできます。

トークンをページをリフレッシュせずにリフレッシュできるようにするには、SPAではない方法を見つけ出す必要があります。

ご協力いただければ幸いです。

ありがとうございました。 2番目の文は少しオフになっているようファンキー

Answer 1

何かが、Vueの持ついくつかの設定おそらく、あなたのセットアップの中で起こっている：

私は名前を検索 によってVUEのデフォルト共通ヘッダを使用してCSRFトークンにアクセスすることができます= _token最初のリクエストでは動作しますが、 には、現在ログインしているユーザーが最近 トークンを使用しているため、LaravelがTokenMismatchExceptionを返した後にリクエストが発生します。

ログアウトして再度ログインしない限り、上記のようなことは起こりません。そうしないと、同じトークンを引き続き使用できます。

私は現時点でバックエンドとしてLaravelを使用していくつかのSPAを構築しています。実際の伝統的なフォームの提出は、ログインまたはログアウトシーケンス（完全なページリフレッシュ）中です。残りの時間は、同じトークンを使用するページと同じです。

Answer 2

あなたはCSRFトークン値をローカル変数を作成しますので、（あなたのメインのレイアウトブレードファイルで）のようなウィンドウに割り当てることができます。

<script> 
window.AppSettings = { 
    csrfToken: "{{ csrf_token() }}" 
} 
</script> 

は、あなたのaxios/VUE-リソース要求でそれを使用します：

axios.post("/some/path", { my: data, _token: AppSettings.csrfToken }) 
    .then(response => { 
     console.log(response.data); 
    }) 

他の回避策（すべてではお勧めしませんが）

app/Http/Middleware/VerifyCsrfToken.php

であなたのミドルウェアでそれを無効にすることです

protected $except = [ 
    "your/path/to/ignore" 
]; 

しかし、私は最初のオプションを使用します。