Vue路由器上的CSRF令牌复制Laravel 5.3 Vue 2 JS

时间:2016-11-16 14:44:35

标签: laravel laravel-5 vue.js vue-router axios

所以我的问题是生成会话令牌。

以及我通过AJAX或AXIOS发送的令牌(导致我使用vue和vue路由器获取API)

正在变得不匹配

这是我在发布数据时得到的回复

ajax令牌等于主刀片模板的元标记中的令牌

使用此标记

app.blade.php中的元标记

<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

Axios的拦截器(目的是从元标记注入csrf_token)

Vue.axios.interceptors.request.use(function (config) {

    config.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
    console.log(config);
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

响应:

array:1 [
  "SessionToken" => "JfhmtCaTiQ49BtF2VK3TysvYnEQSE9n5i1uiHegO"
]
array:1 [
  "AjaxToken" => "WqKOiaunbvJbxIsnEjetFoCm1mvdUYESRqfXO2lv"
]

VerifyCSRFToken中间件方法:

  protected function tokensMatch($request)
    {
        $sessionToken = $request->session()->token();

        $token = $request->input('_token') ?: $request->header('X-CSRF-TOKEN');

        dd(['SessionToken' => $sessionToken],['AjaxToken' => $token]);
        if (! $token && $header = $request->header('X-XSRF-TOKEN')) {
            $token = $this->encrypter->decrypt($header);
        }

        if (! is_string($sessionToken) || ! is_string($token)) {
            return false;
        }

        return hash_equals($sessionToken, $token);
    }

所以我想出了这个想法,但它没有用,因为我从api获取的令牌是空的或空的

这是我的RegisterComponent.vue

中的方法
    submitForm() {
        this.axios.get('/token')
            .then(response => {
               this._token = response.data
                   this.axios.post('/register',this.data)
                        .then(responseNew => {
                            console.log(responseNew.data);
                        })
                        .catch(responseNew => {
                            this.errors = responseNew.data;
                        })
            });
    }

你可以看到我从路线文件夹中的api.php获取一个令牌

我也使用Laravel的身份验证api并将其放在api路由上

这是api.php

Route::group(['middleware' => 'web'], function() {
    Auth::routes();
});

Route::get('/token',function() {
   dd(csrf_field());
});
Route::get('/user', function (Request $request) {
    return $request->user();
})->middleware('auth:api');

Route::resource('/users','UserController');

Route::group(['middleware' => 'auth'], function () {


Route::resource('/stores','StoreController');

Route::resource('/items','ItemController');

Route::resource('/transactions','StoreController');

Route::resource('/managers','ManagerController');

Route::resource('/employees','EmployeeController');

Route::resource('/customers','CustomerController');

Route::resource('/tags','TagController');

});

那么如何防止它生成会导致不匹配的令牌呢?

任何回答此问题的人肯定会帮助我对SPA(单页应用程序)进行身份验证

它还给我回复状态302

1 个答案:

答案 0 :(得分:0)

你似乎有点误会。你有为axios配置的csrf令牌,所以每个请求都有一个包含令牌的头字段,那么你只需要确保每个请求在到达你的业务逻辑之前通过laravel的csrf令牌验证函数,&# 39;所有你需要做的就是防止csrf。 /token之前的csrf_field似乎没必要。

此外,谈论.php路由本身,<form>...<?=csrf_field()?>...</form>在这里是不合适的,因为它生成一个隐藏的表单字段(另一种方式发送csrf令牌,除了我们之前谈到的)嵌入在<form>...<input type="hidden" name="laravel_csrf_token" value="***">...</form> =&gt;中的csrf_field文件中ATCE=1,这使得通过xhr请求ATCE=0的结果毫无意义。