Cannot catch error in promise chaining Larave-vue2 SPA authentication

Question

I try to authenticate in Laravel9 Sanctum a SPA using vue3 and vuex, not with the token authentification but with the SPA Authentication. I am not very used to the javascript language, and even less to promise chaining.

The first thing I am trying is registration. Here are my methods.

The backend registration method

public function register(Request $request)
{
    $request->validate([
        'name' => 'required|string',
        'email' => 'required|email|string|unique:users,email',
        'password' => [
            'required',
            'confirmed',
            Password::min(8)->mixedCase()->numbers()->symbols()
        ]
    ]);

    $user=User::create([
        'name' => $request['name'],
        'email' => $request['email'],
        'password' => bcrypt($request['password'])
    ]);
    return response (['user'=>$user]);
}

The frontend registration method in the register.vue

    //is actually the register form's data
const user = {
        name: "",
        email: "",
        password: "",
        password_confirmation: "",
};

function register(ev) {
        ev.preventDefault();
        store
        .dispatch("register", user)
        .then((data) => {
            console.log("data in vue");
            console.log(data);
            router.push({
                name: "Login",
            });
        })
        .catch((error) => {
                if (error.response.status === 422) {
                errors = error.response.data.errors;
                }
        });
} 

the actions method in the store/index.js actions: {

     register({ commit }, form) {
        console.log("in register of index");
         axiosClient.get("/sanctum/csrf-cookie");
        return axiosClient.post("/api/register", form).then(({ data }) => {
            console.log("data dans index");
            console.log(data);
            return data;
        });
    },
    ...
    

The registration is working fine but when I try an already existing email in the registration form, I get a status 422 as expected and this response from the axiosClient.post('/api/register',form):

{"message":"The email has already been taken.","errors":{"email":["The email has already been taken."]}}

I expect this error to be intercepted by the catch in the register view but it doesn't happen. Despite this error I continue to use the .then and to push the Login route which is not what I want.

Can somebody tell me where I am doing wrong ?

Answer 1

I completely forget that in my axios.js there were interceptors that triggered this wrong behavior. All is clear now.