vue 구성 요소의 Csrf 토큰

Vue.js가 통합 된 Laravel 5.3 프로젝트가 있고 내 양식에 CSRF-TOKEN을 사용하고 싶습니다. 양식 HTML 코드 내가이이vue 구성 요소의 Csrf 토큰

resources/assets/js/bootstrap.js

에서 뷰 구성 요소 파일에 있습니다 :

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

내가 주 VUE 파일 /resources/assets/js/app.js 있습니다

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

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

뷰에 내가 필요한 파일을 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>

내 뷰 템플릿 파일에 여기에서 MyApp.csrfToken 변수를 가져올 수 있습니까? , 또는

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

당신은 cookie 라이브러리 등의 수입 무언가를 사용하고 xsrf을 사용할 수 있습니다 : 당신이 토큰 CSRF 사용자가 정의 할 수

출처

2016-12-31 schel4ok

한 가지 방법은 메인 블레이드 파일의 사용자 head 섹션에 다음을 추가하는 것입니다 토큰 대신. 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(); 
});

희망!

출처

2017-01-02 14:51:58

나는이 모든있다. 하지만 나는 {!! csrf_field() !!} 모든 양식. 그렇지 않니? – schel4ok

Vue와 함께 제출하지 않으려는 경우 각 양식에 추가하기 만하면됩니다. 그렇지 않으면 항상 요청에 자동으로 추가됩니다. –

내 양식을 vue와 함께 제출해야합니다. 이 경우에 csrf_field를 추가 할 필요가없는 이유는 무엇입니까? – schel4ok

나는 같은 문제를 가지고 있으며 이렇게 풀었다.

을 app.blade.php

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

내 어떤 구성 요소/하위 구성 요소를 MyComponent에 : 나는 다음을 추가 더러운 전역

을 만들고있어 때문에 나는 매우 자랑스럽게 아니에요. 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>

출처

2017-08-08 14:00:55 koalaok

1 토큰 (F)를 가져옵니다 <head>의 내부 csrf-token 이름 롬 메타 태그 : 당신의 뷰 구성 요소에 소품으로

$('meta[name="csrf-token"]').attr('content')

2 패스를 :

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

출처

2017-10-29 11:57:09 YaserKH

이런 식으로 전역 변수를 정의하고 코드의 복잡성을 증가시킬 필요가 없습니다. – YaserKH

vue 구성 요소의 Csrf 토큰

답변

관련 문제