Level 88
It's probably your return a regular response and not a JSON response. Try this
return response->json([], 401);
May 10, 2020
6
Level 4
Api Login Validation
I am trying to validate my API Login controller with Vuejs
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class SignInController extends Controller
{
use AuthenticatesUsers;
public function __invoke(Request $request)
{
$this->validate($request,[
'email' => 'required',
'password' => 'required'
]);
if (!$token = auth()->attempt($request->only('email', 'password'))) {
return response(null, 401);
}
return response()->json(compact('token'));
}
}
But it does not work when i enter wrong details, it does not validate.
What am i doing wrong?
Level 4
@bobbybouwmann got this error syntax error, unexpected '->' (T_OBJECT_OPERATOR), expecting ';'
After doing
if (!$token = auth()->attempt($request->only('email', 'password'))) {
return response->json([], 401);
}
Level 88
Aah sorry, it should be return response()->json([], 401);
You could have figured this out yourself, right? You already used this method!
1 like
Level 4
@bobbybouwmann it is not showing on the Vue App front end
<form @submit.prevent="submit">
<div class="form-group">
<input type="email" placeholder="Enter Your Email" class="form-control" :class="{ 'is-invalid': form.errors.has('email') }" v-model="form.email">
<span class="form_icon">
<i class="fa_icon form-envelope" aria-hidden="true"></i>
</span>
<has-error :form="form" field="email"></has-error>
</div>
<div class="form-group">
<input type="password" placeholder="Enter Your Password" class="form-control" :class="{ 'is-invalid': form.errors.has('password') }" v-model="form.password">
<span class="form_icon">
<i class="fa_icon form-lock" aria-hidden="true"></i>
</span>
<has-error :form="form" field="password"></has-error>
</div>
<div class="form-group">
<button :disabled="form.busy" class="reg_ms_btn" type="submit">Log In</button>
</div>
</form>
<script>
import { mapActions } from 'vuex'
import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
export default {
name: 'TheLog',
components: {
//
},
data () {
return {
form: new Form ({
email: '',
password: '',
remember: false
})
}
},
methods: {
...mapActions({
signIn: 'auth/signIn',
}),
submit () {
this.signIn(this.form);
window.$('#autoLogin').modal('hide')
}
</script>
Level 4
what is wrong?
Level 4
i did this
loginUser(){
this.$Progress.start();
this.form.post('auth/signin')
this.signIn(this.form)
.then(()=>{
this.form.reset()
window.$('#autoLogin').modal('hide')
if(this.$route.path !=='/')
this.$router.push('/')
this.$Progress.finish();
})
and it worked, does anyone know if this is a good way?
Please or to participate in this conversation.