VueルータのCSRFトークン複製Laravel 5.3 Vue 2 JS

Question

私の問題は、セッショントークンが生成されることです。

と私は

（APIをフェッチするVUEとVUEルータを使用して、原因イム）AJAXやAXIOSを経由して送信されてきたトークンが不一致

を取得しているこれは、データ

を投稿するとき私が得た応答があります

AJAXトークンは、このタグ

メタTを使用して、メインブレードテンプレート

のメタタグにトークンに等しいです

array:1 [ 
    "SessionToken" => "JfhmtCaTiQ49BtF2VK3TysvYnEQSE9n5i1uiHegO" 
] 
array:1 [ 
    "AjaxToken" => "WqKOiaunbvJbxIsnEjetFoCm1mvdUYESRqfXO2lv" 
] 

VerifyCSRFTokenミドルウェア方法：

app.blade.php

<meta name="csrf-token" content="{{ csrf_token() }}"> 
<script> 
    window.Laravel = <?php echo json_encode([ 
     'csrfToken' => csrf_token(), 
    ]); ?> 
</script> 

Axiosのインターセプタ（目的は、メタタグからcsrf_tokenを注入することである）

Vue.axios.interceptors.request.use(function (config) { 

    config.headers['X-CSRF-TOKEN'] = Laravel.csrfToken; 
    console.log(config); 
    return config; 
    }, function (error) { 
    // Do something with request error 
    return Promise.reject(error); 
}); 

応答中のAg

protected function tokensMatch($request) 
    { 
     $sessionToken = $request->session()->token(); 

     $token = $request->input('_token') ?: $request->header('X-CSRF-TOKEN'); 

     dd(['SessionToken' => $sessionToken],['AjaxToken' => $token]); 
     if (! $token && $header = $request->header('X-XSRF-TOKEN')) { 
      $token = $this->encrypter->decrypt($header); 
     } 

     if (! is_string($sessionToken) || ! is_string($token)) { 
      return false; 
     } 

     return hash_equals($sessionToken, $token); 
    } 

APIから取得イムそのトークンはここ

NULLまたは空であるので、だから私はこのアイデアを思い付いたが、その作業はありませんあなたが見ることができるように私RegisterComponent.vue

submitForm() { 
     this.axios.get('/token') 
      .then(response => { 
       this._token = response.data 
        this.axios.post('/register',this.data) 
         .then(responseNew => { 
          console.log(responseNew.data); 
         }) 
         .catch(responseNew => { 
          this.errors = responseNew.data; 
         }) 
      }); 
    } 

からの方法でありますイムapi.php

にもLaravelの認証APIを使用しており、ここでも、APIのルートで

をそれを置くルートフォルダ

とIMで私のapi.phpからトークンを取得しています

Route::group(['middleware' => 'web'], function() { 
    Auth::routes(); 
}); 

Route::get('/token',function() { 
    dd(csrf_field()); 
}); 
Route::get('/user', function (Request $request) { 
    return $request->user(); 
})->middleware('auth:api'); 

Route::resource('/users','UserController'); 

Route::group(['middleware' => 'auth'], function() { 


Route::resource('/stores','StoreController'); 

Route::resource('/items','ItemController'); 

Route::resource('/transactions','StoreController'); 

Route::resource('/managers','ManagerController'); 

Route::resource('/employees','EmployeeController'); 

Route::resource('/customers','CustomerController'); 

Route::resource('/tags','TagController'); 

}); 

どのようにして、トークンが生成されてミスマッチが発生するのを防ぐことができますか？これを答える

誰もがきっとあなたはビットの誤解を持っているように見える私のSPA（シングルページアプリケーション）の認証を助ける

とそのも私の応答ステータス302

Answer 1

を与えます。 csrfトークンをAxios用に設定しているので、すべてのリクエストにトークンを含むヘッダーフィールドが含まれているので、ビジネスロジックに達する前にすべてのリクエストがlaravelのcsrfトークン検証機能を通過するようにするだけで済みます。 csrfを防止する。 get('/token')の前にpost('/register')は不要です。

それは<form>...<?=csrf_field()?>...</form>よう.phpファイルに埋め込まれる隠しフォームフィールド（私たちはおよそ以前の話をしたものから、トークン離れCSRFを送信するための別の方法）を生成するのでまた、/tokenルート自体の話、csrf_fieldが、ここでは適切ではありません=><form>...<input type="hidden" name="laravel_csrf_token" value="***">...</form>、xhrでcsrf_fieldの結果をリクエストすることは無意味です。