Why does promise go into the .then() when the response is an error? - 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);
}

Check your network request, are you sure server is responding with 401? — LiefdeWen, Oct 10 '19 at 12:31

score 0 · Accepted Answer · edited Oct 10 '19 at 13:54

0

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);
         }
})

edited Oct 10 '19 at 13:54

mousetail

7,009
4
25
45

answered Oct 10 '19 at 13:30

Alex Guerrero

229
2
8

I answered this earlier and turned out to be wrong! try this out and you'll see – Salim Djerbouh Oct 10 '19 at 13:54
My problem with this is that I will have to do error catching in ever .then(). Is it possible that my axios interceptor stops the response? So that the .then() will never be run? – anonymous-dev Oct 11 '19 at 08:57
Also if I check the response.data.status it will error directly and go into the catch because response.data is undefined. – anonymous-dev Oct 11 '19 at 12:41
https://stackoverflow.com/questions/50461746/axios-how-to-cancel-request-inside-request-interceptor-properly this solved my problem – anonymous-dev Oct 11 '19 at 13:18

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

1 Answers1