如何将Laravel CSRF令牌值传递给vue

问题描述

我有这种形式，用户只能在文本区域内键入文本:

I have this form where the user should only type text inside a text area:

            <form action="#" v-on:submit="postStatus">{{-- Name of the method in Vue.js --}}
                <div class="form-group">
                    <textarea class="form-control" rows="5" maxlength="140" autofocus placeholder="What are you upto?" required v-model="post"></textarea>
                </div>
                <input type="submit" value="Post" class="form-control btn btn-info">

                {{ csrf_field() }}

            </form>

然后，我有这个脚本代码，在其中我将vue.js与ajax一起使用，以便将该文本传递到控制器中，并最终将其保存到数据库中:

Then, I have this script code where I am using vue.js with ajax in order to pass that text into a controller and eventually save it into the database:

//when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
        },
        http    :   {
            headers: {
                'X-CSRF-Token': $('meta[name=_token]').attr('content')
            }
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                    }
                });
            }
        },
    });

但是，到目前为止这还行不通，因为存在此令牌不匹配异常.我不知道如何使它工作.如何将此令牌值传递给控制器​​.我尝试了以下方法:

However, this doesn't work so far, since there's this token mismatch exception. I don't know how to make it work. How to pass this token value to the controller. I have tried the following:

1)在表单内，我在令牌中添加了一个vue名称:

1) inside the form, I have added a vue name to the token:

<input type="hidden" name="_token" value="YzXAnwBñC7qPK9kg7MGGIUzznEOCi2dTnG9h9çpB" v-model="token">

2)我试图将此令牌值传递给vue:

2) I have tried to pass this token value into the vue:

//when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
            token   : '',
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                        '_token':   this.token,
                    }
                });
            }
        },
    });

...但是在控制台中，vue甚至没有捕获它:(

... but in the console, vue doesn't even catch it :(

这会导致以下错误:

我该如何解决?有什么想法吗?

How do I fix it? Any ideas?

推荐答案

我通过以下两个答案解决了该问题:

I solved it thanks to these two answers:

1)首先，我阅读了这个，这使我想到了

1) First I read this one, which led me to

2)这第二秒.

所以，在我的表格中，我保留了此内容:

So, in my form I keep this:

{{ csrf_field() }}

在js文件中，我仅添加以下内容(在Vue实例的外部和上方):

And inside the js file I only add the following (outside and above the Vue instance):

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

所以整个js代码是:

var csrf_token = $('meta[name="csrf-token"]').attr('content');
    /*Event handling within vue*/
    //when we actually submit the form, we want to catch the action
    new Vue({
        el      : '#timeline',
        data    :   {
            post    : '',
            token   : csrf_token,
        },
        methods : {
            postStatus : function (e) {
                e.preventDefault();
                console.log('Posted: '+this.post+ '. Token: '+this.token);
                $.ajax({
                    url         :   '/posts',
                    type        :   'post',
                    dataType    :   'json',
                    data        :   {
                        'body'  :   this.post,
                        '_token':   this.token,
                    }
                });
            }
        },
    });

这篇关于如何将Laravel CSRF令牌值传递给vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！