如何使用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路由api

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应用程序总是返回200HTTP响应，这会导致前端的.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响应，说登录失败，这将在前端抛出一个exeception，你可以用.then( ... ).catch( ... )捕获它。

这是最干净的方式，因为不再需要发送'success' => truetrue，因为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( ... )