Why does promise go into the .then() when the response is an error? - Laravel - laravel

Question

I am making a SPA in Laravel with vue.js and vuex and vue router. I made an action in my store for logging, but when I log in with invalid credentials something really strange happens. It works fine when I log in with the right credentials.
So it debugs the following
login
app.js:279 POST http://127.0.0.1:8000/api/auth/login 401
(Unauthorized)
app.js:58018 login succes
app.js:58023 login failed
app.js:43201 Uncaught (in promise) NavigationDuplicated {_name:
"NavigationDuplicated", name: "NavigationDuplicated", message:
"Navigating to current location ("/") is not allowed", stack: "Error↵
at new NavigationDuplicated (http://127.…)↵ at
http://127.0.0.1:8000/js/app.js:57159:12"} message: "Navigating to
current location ("/") is not allowed" name: "NavigationDuplicated"
_name: "NavigationDuplicated" stack: "Error↵ at new NavigationDuplicated (http://127.0.0.1:8000/js/app.js:43124:14)↵ at
HTML5History.confirmTransition
(http://127.0.0.1:8000/js/app.js:43240:18)↵ at
HTML5History.transitionTo (http://127.0.0.1:8000/js/app.js:43184:8)↵
at HTML5History.push (http://127.0.0.1:8000/js/app.js:43515:10)↵ at
http://127.0.0.1:8000/js/app.js:43929:22↵ at new Promise
()↵ at VueRouter.push
(http://127.0.0.1:8000/js/app.js:43928:12)↵ at
http://127.0.0.1:8000/js/app.js:57159:12"
proto: Error
The thing that is crazy to me is that the promise goes into the .then() and console.logs "login succes"? It shouldn't ever get in the .then() right? Because the credentials are wrong, so it should just go for the .catch(). But what is even more strange is that it does nog debug the second console.log(response.data) in the .then()???? Also I do not understand the Navigation Duplicated.
Credentials is just an {username, password}. I am using JWT and the /login route leads to the standard jwt authcontroller login method.
Login.vue component method
methods: {
login() {
this.$store
.dispatch("tryLogin", this.form)
.then(response => {
this.$router.push({ path: "/home" });
})
.catch(error => {
this.logginError = error;
});
}
}
Store action
tryLogin(context, credentials) {
context.commit("login");
console.log("login");
return new Promise((resolve, reject) => {
axios
.post("/api/auth/login", credentials)
.then(response => {
console.log("login succes");
console.log(response.data);
context.commit("loginSucces", response.data);
resolve(response.data);
})
.catch(error => {
console.log("login failed");
context.commit("loginFailed", error);
reject(error);
});
});
}
AuthController login function
/**
* Get a JWT via given credentials.
*
* #return \Illuminate\Http\JsonResponse
*/
public function login()
{
$credentials = request(['email', 'password']);
if (!$token = auth('api')->attempt($credentials)) {
return response()->json(['error' => 'Unauthorized'], 401);
}
return $this->respondWithToken($token);
}

Answer 1

Ok, I will try to explain (sorry for my english) The following is working fine, when you login with wrong credential it will return a nice JSON response:
if (!$token = auth('api')->attempt($credentials)) {
return response()->json(['error' => 'Unauthorized'], 401);
}
That is is not a failure, for that reason it enters to .then and print 401 (Unauthorized)
then it print console.log("login succes") and then when it try to call the context.commit("loginSucces", response.data); it fails and will go to the catch and say app.js:58023 login failed.
You can fix this just asking in the .then
axios
.post("/api/auth/login", credentials)
.then(response => {
if (response.data.status === "error") {
console.log(response.data);
}
else{
context.commit("loginSucces", response.data);
resolve(response.data);
}
})