Vue路由器Laravel 5.3 Vue 2 JS上的CSRF令牌复制 [英] CSRF Token Duplication on Vue Router Laravel 5.3 Vue 2 JS
问题描述
所以我的问题是会话令牌已生成.
So my problems is that the session token is generated.
以及我通过AJAX或AXIOS发送的令牌(因为我使用vue和vue路由器获取API)
and the token that i've sent via AJAX or AXIOS (cause im using vue and vue router for fetching API)
不匹配
这是我发布数据时得到的答复
This is the response i got when posting data
ajax令牌等于主刀片模板的meta标记中的令牌
The ajax token is equal to the token in the meta tag of the main blade template
使用此标记
app.blade.php中的元标记
Meta Tag in app.blade.php
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
Axios的拦截器(目的是从meta标签注入csrf_token)
Interceptor of Axios (purpose is to inject the csrf_token from the meta Tag)
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中间件方法:
VerifyCSRFToken middleware method:
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获取的令牌为null或为空
So i came up with this idea but its not working because its the token that im getting from the api is null or empty
这是我RegisterComponent.vue中的方法
Here is the method from my 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获取令牌
as you can see im getting a token from my api.php in routes folder
并且我还使用Laravel的身份验证api并将其也放置在api路由上
and im also using the authentication api of Laravel and put it on the api routes too
这是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');
});
那么我如何防止它生成会导致不匹配的令牌?
So how can i prevent it from generating that token that will cause mismatch?
回答此问题的任何人肯定会帮助我的SPA(单页应用程序)进行身份验证
Anyone answering this will surely help the authentication of my SPA ( Single Page App)
，它的响应状态也为302
and its also giving me response status 302
推荐答案
您似乎有点误会.您已经为axios配置了csrf令牌，因此每个请求都将包含一个包含该令牌的标头字段，然后只需确保每个请求在到达您的业务逻辑之前都要通过laravel的csrf令牌验证功能，这就是您需要做的一切防止csrf. post('/register')之前的get('/token')似乎不必要.
You seem to have a bit misunderstanding. You have the csrf token configured for axios, so every request will have a header field containing the token, then you just need to make sure every request goes through laravel's csrf token validation function before it reaches your business logic, that's all you need to do to prevent csrf. The get('/token') before post('/register') seems unnecessary.
另外，在谈论/token路由本身时，csrf_field在这里不合适，因为它会生成一个隐藏的表单字段(除了我们之前讨论的内容之外，它是一种发送csrf令牌的另一种方式)，该字段将嵌入在.php文件，例如<form>...<?=csrf_field()?>...</form> => <form>...<input type="hidden" name="laravel_csrf_token" value="***">...</form>，这使得通过xhr请求csrf_field的结果毫无意义.
Also, talking about the /token route itself, csrf_field is not appropriate here, since it generates a hidden form field (another way to send csrf token apart from what we talked about earlier) to be embedded in a .php file like <form>...<?=csrf_field()?>...</form> => <form>...<input type="hidden" name="laravel_csrf_token" value="***">...</form>, which makes it meaningless to request csrf_field's result via xhr.
这篇关于Vue路由器Laravel 5.3 Vue 2 JS上的CSRF令牌复制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
