sch*_*4ok 3 php csrf vue.js laravel-5.3 vuejs2
我有集成了Vue.js的Laravel 5.3项目，我想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-从meta标签中的csrf-token名称中获取令牌<head>：
$('meta[name="csrf-token"]').attr('content')
2-将其作为道具传递给Vue组件：
<your-component :csrf-token="{{ csrf_token() }}"></your-component>
如果您在主模板中为 csrf 令牌编写了元标记，请尝试此操作。
<template>
<form action = "/user/checkout" method="POST">
<input type="hidden" name="_token" v-bind:value="csrf">
....
</form>
</template>
在组件的脚本标签中：
<script>
export default{
data(){
return {
//csrf token
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
}
}
</script>
定义 csrf 令牌的一种方法是将以下内容添加到head主刀片文件的部分：
<script>
var MyApp = {
csrfToken: "{{ csrf_token() }}"
}
</script>
或者，您可以使用导入类似cookie库之类的内容并使用xsrf令牌代替。
使用 npm：
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();
});
希望这可以帮助！