I’m developing Laravel 9 and Vue.js 3 app (a simple social network) at the moment. I have a problem described in the title. The error itself:
Here are the pieces of code that might help you. And this is the link to the repository of my project on GitHub.
Login.vue
, if you will need it (the code is too long to paste here).
loginUser()
action:
loginUser(ctx, payload) {
return new Promise((resolve, reject) => {
ctx.commit('setInProcess', true, { root: true });
axios.post('api/login', payload).then(response => {
if (response.data.access_token) {
ctx.commit('setLoggedIn', true, { root: true })
localStorage.setItem('token', response.data.access_token);
ctx.commit('setToken', response.data.access_token, { root: true })
resolve(response);
router.push('/');
} else {
ctx.dispatch(
'setAndDisplayErrors',
[ctx.rootState.helper.undefinedErrorMessage],
{ root: true }
);
reject(response)
}
}).catch(error => {
console.log(error)
if (error.response.data.errors) {
ctx.dispatch(
'setAndDisplayErrors',
error.response.data.errors,
{ root: true }
);
} else {
ctx.dispatch(
'setAndDisplayErrors',
[ctx.rootState.helper.undefinedErrorMessage],
{ root: true }
);
}
reject(error);
}).finally(() => {
ctx.commit('setInProcess', false, { root: true });
})
})
},
/login
route:
Route::post("login", [AuthController::class, "login"]);
AuthController login() method:
public function login(LoginRequest $request) {
LoginAction::run($request);
}
LoginRequest:
<?php
namespace AppHttpRequests;
use IlluminateFoundationHttpFormRequest;
class LoginRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, mixed>
*/
public function rules()
{
return [
'email' => 'required|string|email|max:255',
'password' => 'required|between:8,255'
];
}
}
LoginAction:
<?php
namespace AppActionsAuth;
use IlluminateHttpRequest;
use LaravelPassportClient;
use LorisleivaActionsConcernsAsAction;
class LoginAction
{
use AsAction;
public function handle($formData)
{
$passwordGrantClient = Client::where('password_client', 1)->first();
$data = [
'grant_type' => 'password',
'client_id' => $passwordGrantClient->id,
'client_secret' => $passwordGrantClient->secret,
'username' => $formData->email,
'password' => $formData->password,
'scope' => '*'
];
$tokenRequest = Request::create('oauth/token', 'post', $data);
$tokenResponse = app()->handle($tokenRequest);
$contentString = $tokenResponse->getContent();
$tokenContent = json_decode($contentString, true);
if (!empty($tokenContent['access_token'])) {
return $tokenResponse;
} else {
return response()->json([
'errors' => ['Incorrect e-mail or password.']
], 401);
}
}
}
Thanks in advance! If you need something else to understand my question, feel free to ask!
2
Answers
My only mistake was that I forgot
return
beforeLoginAction::run($request)
atAuthController
login()
method, so it didn't return anything. Because of this, the response was empty. Thank you for paying attention to this question, @tao!AuthController
login()
method (new code):There’s nothing wrong with your request. It returns the result, as expected. The error happens in Vuex. And because it’s all wrapped in a promise, it’s an uncaught error.
To catch the error, I suggest the following syntax:
You’ll still get the error, but this time it won’t be uncaught, so you’ll have more details about it.