Токен csrf в компоненте vue
У меня есть проект Laravel 5.3 с интегрированным Vue.js, и я хочу использовать CSRF-TOKEN в моей форме. HTML-код формы находится в файле компонента Vue в
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: { },
});
тогда в Vue файл мне нужно использовать 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 переменная отсюда в мой файл шаблона Vue?
Решение
Как альтернативные способы:
1- Получить токен из метатега с csrf-token имя внутри <head>:
$('meta[name="csrf-token"]').attr('content')
2- Передайте это как опору вашему компоненту Vue:
<your-component :csrf-token="{{ csrf_token() }}"></your-component>
Другие решения
Один из способов определить ваш токен csrf — добавить следующее в ваш head раздел вашего основного файла блейда:
<script>
var MyApp = {
csrfToken: "{{ csrf_token() }}"}
</script>
Кроме того, вы можете использовать импорт что-то вроде cookie библиотека и использовать xsrf токен вместо
с нпм:
npm install cookie
с пряжей:
yarn add cookie
Тогда в вашем bootstrap.js файл:
import cookie from "cookie";Vue.http.interceptors.push((request, next) => {
request.headers.set('X-XSRF-TOKEN', cookie.parse(document.cookie)['XSRF-TOKEN']);
next();
});
Надеюсь это поможет!
У меня была такая же проблема, и я решил так. Я не очень горжусь, потому что я пачкаю глобальный охват
Добавив следующее:
в 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>
Сделайте это в клинке:
<Example-component csrf="{{csrf_token()}}"></Example-component>
Сделайте это в Vue Component:
In form
<input type="hidden" name="_token" v-bind:value="csrf">
In Script
export default {
props: ['csrf', 'oldName']
}