Question

我试图获取应用程序的Auth部分，我已经完成了。我使用Laravel 5.3和VueJs 2作为我的JS框架。在我的登录组件中，我有类似的内容。

<template>
    <form @submit="test" method="POST" action="/test">
        <input v-model='input' type='text'>
        <button type='submit'>Submit</button>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                data: {
                    input: "hello"
                }
            }
        },
        mounted() {
            console.log('Component ready.')
        },
        methods: {
            test: function() {
                this.$http.post('/test', {
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name=_token]').attr('content')
                    }
                })
                .then(res => {
                    console.log(res);
                })
                .catch(err => {
                    console.error(err);
                });
            }
        }
    }
</script>

我还在我的HTML文档的头部设置了CSRF令牌作为元数据。 <meta name="_token" content="{{ csrf_token() }}">

Laravel 5.3的Illuminate \ Foundation \ Http \ Middleware \ VerifyCsrfToken吐出错误，说有一个令牌不匹配。我目前正在var_dumping所有传递给这个类的$ request信息＆＃39; handle()功能。

public function handle($request, Closure $next)
    {
        var_dump($request);
        if (
            $this->isReading($request) ||
            $this->runningUnitTests() ||
            $this->shouldPassThrough($request) ||
            $this->tokensMatch($request)
        ) {
            return $this->addCookieToResponse($request, $next($request));
        }
        throw new TokenMismatchException;
    }

我没有看到CSRF令牌与我发送的ajax请求一起传递。奇怪的是，如果我不使用ajax并在表单标记内执行正常表单提交，例如{{csrf_field()}}，则中间件会成功验证令牌。这让我相信这是我使用的ajax / vue-resource的一个问题。我可能做错了什么，但我已经搜索了关于这个问题的google posts / stackoverflow / youtube视频，但没有解决错误。我已经完成了一个解决方法，我强制将XSRF-TOKEN cookie与令牌进行比较，但这让我思考安全问题以及当用户在使用应用程序时意外或不知不觉地删除cookie时会发生什么。不确定这是否会导致错误，但我已经与其他开发人员/工程师交谈，他们说强制在中间件而不是CSRF_TOKEN中比较cookie并不是一个好主意。

以下是我尝试过的其他一些事情。

//I've tried the vue.http.interceptors method that comes with the bootstrap.js file Laravel generates for vue js 2.
Vue.http.interceptors() //something along those lines
//Setting ajax setup in bootstrap.js as wel

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
    }
});

//I've also tried sending the token along with the vue-resource post request in the Vue component method as well.

methods: {
  test: function() {
    this.$http.post('/test', {headers: 'X-CSRF-TOKEN: $('meta[name='_token']'.attr('content')}
    ).then(response => console.log(response));
  }
}

//I've also tried using axios as my http client as well.

有关为何可能发生这种情况以及如何解决此问题的任何建议或见解？

Answer 1

我会安装Laravel Passport（https://laravel.com/docs/5.3/passport）

这实质上增加了通过前端Vue进行身份验证所需的一切。

它还为您的应用添加了oAuth支持，这意味着用户可以生成API密钥并使用他们自己的客户端来使用您的API（如果您想这样做的话）。

CSRF令牌不匹配错误，Laravel 5.3 / VueJS2

1 个答案: