0

I want to get the errors from the server in the client, show them on the page when there's some troubles during login or registration, I think it's ok in the backend, but I don't know why they're not returning.

How to get that error messages from the validator in Vue?

I'm using: vuex, vue-router

My vuex file for login and register

actions: {
        async login({ dispatch }, credentials) {
            
            await axios.post('http://127.0.0.1:8000/api/login', credentials)
            .then( res => {
                if (res.data.success) {
                    // controllo se il token è buono
                    return dispatch('attempt', res.data.token)
                } 
            })
            .catch( err => {
                console.log( err )
            })
        },

        async attempt({ commit, state }, token) {

            // blocco in caso ci fosse o meno il token
            // se c'è il token 
            if (token) {
                commit('SET_TOKEN', token)
            }

            // se non c'è
            if(!state.token) {
                return
            }
            // /blocco in caso ci fosse o meno il token

            // provo a gettare l'user 
            try {
                await axios.get('http://127.0.0.1:8000/api/user')
                    .then(res => {
                        commit('SET_USER', res.data)
                    })
            } catch (e) {
                commit('SET_TOKEN', null)
                commit('SET_USER', null)
            }
        },

        async register({ }, credentials) {
            await axios.post('http://127.0.0.1:8000/api/register', credentials)
            .then( () => {
               
            })
            .catch(err => {
                console.log(err)
            })
        },

        logoutAction({ commit }) {
            return axios.post('http://127.0.0.1:8000/api/logout')
                .then( () => {
                    commit('SET_TOKEN', null)
                    commit('SET_USER', null)
                })
        },

        
    }

My controller

public function register(Request $request) {

        $fields = $request->validate(
            [
                'name' => 'required|string',
                'email' => 'required|string|unique:users,email',
                'password' => 'required|string|confirmed'
            ]
        );

        $user = User::create([
            'name' => ucwords($fields['name']),
            'email' => $fields['email'],
            'password' => bcrypt($fields['password']),
        ]);   

        $token = $user->createToken('token')->plainTextToken;

        
        return response()->json(
            [
                'success' => true,
                'user' => $user,
                'token' => $token,
                'message' => 'Registered successfully'
            ], 201);

    }

    public function login(Request $request) {

        $fields = $request->all();

        $validator = Validator::make($fields, [
            'email' => 'required',
            'password' => 'required'
        ]);

        $user = User::where('email', $fields['email'])->first();

        if($validator->fails()) {
            return response()->json([
                'message' => 'You must fill in all the fields!',
                'errors' => $validator->errors()
            ], 401);
        }

        if(!$user || !Hash::check($fields['password'], $user->password)) {
            return response()->json([
                'message' => 'Invalid credentials.',
            ], 401);
        }

        $token = $user->createToken('token')->plainTextToken;

        return response()->json(
            [
                'success' => true,
                'user' => $user,
                'token' => $token,
                'message' => 'Logged in'
            ], 201);

    }

    public function logout(Request $request) {
        auth()->user()->tokens()->delete();

        return response()->json(
            [
                'message' => 'Logged out.'
            ]
        );
    }

Also I want to stop the user if the registration has empty fields, forcing him to stay in the register route, but with these settings down here the user will be redirected to the login page even if no registration fields are been typed in, as soon as I press enter or click 'register'.

p.s.: the 'home' route in which I'm pushing in the user is the page with the login form. So I want that the user will be redirect there only if the register form has been fulfilled.

submitRegistration() {
      this.register(this.form)
        .then(() => {
        

          this.$router.push({name:'home'})
        })
        .catch((err) => {
          // Ignore the vuex err regarding  navigating to the page they are already on.
          if (
            err.name !== "NavigationDuplicated" &&
            !err.message.includes(
              "Avoided redundant navigation to current location"
            )
          ) {
            // But print any other errors to the console
            console.log(err);
          }
        });
    },
6
  • put http://127.0.0.1:8000/ to env and then get url from it. Otherwise you will have to change this accross all the files once you moved to production Aug 23, 2021 at 16:46
  • 1
    Thanks, but the problem is different, however thanks for the tip!!
    – D.D.
    Aug 23, 2021 at 16:49
  • change to const {data} = await axios.post('127.0.0.1:8000/api/login', credentials) and share console.log(data)
    – lexisvar
    Aug 23, 2021 at 17:24
  • It returns me the user object, the same that returns with actual settings, it may be something in Laravel that is wrong?
    – D.D.
    Aug 23, 2021 at 19:44
  • your login looks correct, but you would want to use the same Validator class and not the Request->validate() on the register. does login return your errors if you leave email blank?
    – Cameron
    Aug 23, 2021 at 20:11

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.