Laravel-Vue如何从Vue更新用户表中的列

Question

我想从Vue向Laravel发送一个请求，为当前登录的用户更新一列。

到目前为止，我已经设置了Vuex，在那里我用axios发送了一个帖子请求。然而，我一直得到一个错误419。这显然意味着它是CSRF令牌问题。

1. 我该如何将CSRF令牌解析到我的后端？我的代码中的当前方法不起作用。

2. 有没有更容易的替代路线。

api.php 中的路由

Route::group(['middleware' => 'web'], function () {
Route::post('prequalify', 'OfferController@update');
});

控制器

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use IlluminateSupportFacadesAuth;
use AppUser;
class OfferController extends Controller
{
function update(Request $request){
$user = Auth::user();
return $user;
//Send Request to Majestic and get a response
$response = true;
if($response){
$user->is_qualified = true;
}else{
$user->is_qualified = false;
}
$user->save();

return $request;
}
}

Vue方法并且我能够获得CSRF令牌。

preQualify(){
let csrf= document.querySelector('meta[name="csrf-token"]').getAttribute('content')
this.$store.dispatch('prequalify',{csrf});
}

VUEX动作

import axios from 'axios';
let actions = {
prequalify({commit,state}, payload){
axios.defaults.headers.common['X-CSRF-TOKEN'] = payload.csrf;
axios.post('/api/prequalify',state.LoanCalculator)
.then(res => {
console.log(res);
})
}
}
export default actions

Answer 1

在您的api.php中，您使用的是web中间件，它检查VerifyCsrfToken中间件，该中间件负责验证CSRF令牌，并为您提供419，为了更简单，您需要删除web中间件

Route::group(['middleware' => []], function () {
Route::post('prequalify', 'OfferController@update');
});

在这种情况下，不需要在axios呼叫中发送X-CSRF-TOKEN。

注意-如果prequalify端点要求对用户进行身份验证，则需要使用与您正在使用的auth系统相对应的正确中间件，该中间件可以是passport或sanctum。

Answer 2

我像这样使用

在bootstrap.js中

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

则在axiosreq.中

axios.post('/api/prequalify',{_token:csrfToken,data:state.LoanCalculator})
.then(res => {
console.log(res);
})

可能有更好的方法，但我在应用程序中使用了这个，希望它能解决你的问题