如何使用 VUE JS 访问 laravel API？

Question

所以我想使用 mylogin api 但它不工作，即使电子邮件和密码不正确，它也会将路由推送到仪表板 这是我的代码

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')
  }
},}

我的 laravel 路由接口

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

登录功能

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

对不起我的英语

Answer 1

这是因为你的 laravel 应用总是返回 200 HTTP 响应，这导致前端的 .then( ... ) 总是被执行。

在.then( ... ) 中检查您的 Laravel 设置的响应的 success 值，如下所示：

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

或者，您也可以在 Laravel 中抛出 401 或 400 响应以表示登录失败，这将在前端抛出异常，您可以使用 .then( ... ).catch( ... ) 捕获。

这是最干净的方式，因为不再需要发送'success' => true true，因为 HTTP 代码将成为所发生事情的真相来源。

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

最后一点，我不明白this.user.append("email", this.form.email); 是如何工作的，因为this.user 似乎只是一个简单的对象，所以上面没有任何append 方法。

因此，除非我在这里遗漏了什么，否则最好的办法就是这样做：

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