Vue 라우터의 CSRF 토큰 복제 Laravel 5.3 Vue 2 JS

Question

그래서 내 문제는 세션 토큰이 생성된다는 것입니다.

내가

(API를 가져 오는에 대한 VUE 및 VUE 라우터를 사용하여 원인 임) AJAX 또는 Axios의를 통해 전송 한 토큰이 일치하지

을 받고이 데이터

를 게시 할 때 내가 가진 응답입니다

아약스 토큰이 태그

메타 T를 이용하여 메인 블레이드 템플릿

의 메타 태그 토큰 같다 app.blade.php에서 AG

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

응답 :

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

VerifyCSRFToken 미들웨어있어서

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를 노선에

을 넣어 루트 폴더

및 메신저 내 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 토큰을 가지므로 모든 요청에는 토큰을 포함하는 헤더 필드가 있습니다. 그러면 비즈니스 로직에 도달하기 전에 모든 요청이 laravel의 csrf 토큰 검증 기능을 통과하는지 확인하면됩니다. csrf를 방지합니다. get('/token') 전에 post('/register')은 불필요한 것처럼 보입니다. 이 숨겨진 양식 필드 (우리가 이전 이야기 것과 토큰 떨어져 CSRF를 보낼 수있는 또 다른 방법) <form>...<?=csrf_field()?>...</form> 같은 .php 파일에 포함 할를 생성하기 때문에 /token 경로 자체에 대해 이야기 또한

는 csrf_field, 여기에 적합하지 않습니다 =><form>...<input type="hidden" name="laravel_csrf_token" value="***">...</form>, xhr을 통해 csrf_field 님의 결과를 요청하는 것은 의미가 없습니다.