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

Does this.user.append("email", this.form.email); throw any error in javascript? — Donkarnash
– Donkarnash, Commented Dec 24, 2020 at 23:35
there is not,the code runs without errors but the API looks like it's not being accessed — justinus andreas
– justinus andreas, Commented Dec 24, 2020 at 23:40

darkylmnx · Accepted Answer · 2020-12-24 23:45:41Z

2

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( ... )

answered Dec 24, 2020 at 23:45

darkylmnx

2,1215 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

justinus andreas Over a year ago

Hi,thank you for your quick respons the code its working now!! thanks a lot man,you are my lifesafer.XD

darkylmnx Over a year ago

Glad I could help, please note my answer as resolved for the next people that come accros this question.

Collectives™ on Stack Overflow

How to access laravel API with VUE JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related