How to access laravel API with VUE JS?

Question

so i want to use mylogin api but its not working,it keep push the route to dashboard even the email and the password incorrect here is my code

export default {
data(){
  return{
    form: {
    email: null,
    password: null
  },
    user: {},
    error: false
  }
},
methods: {
  login() {
    this.user.append("email", this.form.email);
        this.user.append("password", this.form.password);
        this.axios.post('http://127.0.0.1:8000/api/login', this.user).then(response => {
          localStorage.setItem("Name", response.data.first_name);
          this.$router.push('/userDashboard/Dashboard')
        });
  
  },
  register() {
    this.$router.push('/RegisterPage')
  }
},}

my laravel route api

Route::post('/login', 'UserController@login');

Login function

public function login(Request $request, User $user)
{
    
 $email = $request->input('email');
 $password = $request->input('password');

 $user = User::where('email', '=', $email)->first();
 if (!$user) {
    return response()->json(['success'=>false, 'message' => 'Login Fail, please check email']);
 }
 if (!Hash::check($password, $user->password)) {
    return response()->json(['success'=>false, 'message' => 'Login Fail, pls check password']);
 }
    return response()->json(['success'=>true,'message'=>'success', 'data' => $user]);
}

sorry for my english

Answer 1

This is because your laravel app always return 200 HTTP responses and this causes the .then( ... ) in the frontend to always be executed.

Either in the .then( ... ) your check the success value on the response that your Laravel has set, like this:

 this.user.append("email", this.form.email);
 this.user.append("password", this.form.password);
 this.axios.post('http://127.0.0.1:8000/api/login', this.user).then(response => {
   if (response.data.success === false) {
     // handle the error and stop the code with a return
     this.handleError();
     return;
   }
   localStorage.setItem("Name", response.data.first_name);
   this.$router.push('/userDashboard/Dashboard')
 });

OR, you can also in Laravel throw a 401 or 400 response to say the login failed which will throw an exeception in the frontend, that you can catch with .then( ... ).catch( ... ).

That is the most clean way, because no need to send 'success' => true true anymore, since the HTTP code will be the source of truth with what happend.

public function login(Request $request, User $user)
{
    
 $email = $request->input('email');
 $password = $request->input('password');

 $user = User::where('email', '=', $email)->first();
 if (!$user || !Hash::check($password, $user->password)) {
    // never tell the person if it's email or password, always say it's one of both for security reasons
    return response(401)->json(['message' => 'Login Fail, please check email or password']);
 }

  return response()->json(['data' => $user]);
}

Last thing, I don't understand how this.user.append("email", this.form.email); works, because this.user seems to just be a simple object, so there isn't any append method on it.

So unless I'm missing something here, the best thing should just be to do:

const user = {
  email: this.form.email,
  password: this.form.password
}

// OR, make a copy
const user = { ...this.form }

// then send the user var to axios
this.axios.post('your url', user).then( ... )