Vue组件中的CSRF令牌 [英] Csrf token in vue component
问题描述
我有一个集成了Vue.js的Laravel 5.3项目，我想在表单中使用 CSRF-TOKEN 。表单html代码位于Vue组件文件中
I have Laravel 5.3 project with Vue.js integrated and I want to use CSRF-TOKEN in my form. Form html code is in Vue component file in
资源/资产/js/bootstrap.js
我有这个：
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', MyApp.csrfToken);
next();
});
然后我有主Vue文件 / resources / assets / js / app。 js ：
then I have main vue file /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 。
then in Vue file I need to use csrf_field, but I don't know how to get it there, because standard php csrf_field() is not rendered inside Vue component and I don't know how to import 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
推荐答案
作为替代方法：
1-从< head> 中的 csrf-token 名称的元标记中获取令牌：
1- Get the token from meta tag with csrf-token name inside of <head>:
$('meta[name="csrf-token"]').attr('content')
2-将其作为道具传递给Vue组件：
2- Pass it as a prop to your Vue component:
<your-component :csrf-token="{{ csrf_token() }}"></your-component>
这篇关于Vue组件中的CSRF令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
