Question

我已经集成了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模板文件？

Answer 1

作为替代方式：

1-从csrf-token内的<head>名称获取元标记中的令牌：

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

2-将它作为道具传递给你的Vue组件：

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

Answer 2

如果您已在主模板中为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>

Answer 3

在刀片中执行此操作：

<Example-component csrf="{{csrf_token()}}"></Example-component>

在Vue组件中执行此操作

In form
<input type="hidden" name="_token" v-bind:value="csrf">
In Script
export default {
        props: ['csrf', 'oldName']

   }

Answer 4

您可以定义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();
});

希望这有帮助！

Answer 5

我有同样的问题，我这样解决了。我不是很自豪，因为我弄脏了全球范围

添加以下内容：

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>

Answer 6

制作一个令牌然后分配它

<script>
export default {
    data() {
        return {
            token: '',

        }
    },
 async created() {
        this.token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
</script>

我使用的是 Iview，所以我就是这样使用的

:headers="{'x-csrf-token' : token}"

但通常你会使用

v-bind:value="token"

vue组件中的Csrf标记

6 个答案: