Thanks for the great tutorial. Would it make sense to do another dispatch in the login() method in login.vue, to a '/me' Laravel endpoint, and store some user information in Vuex, to use throughout the app? Any thoughts / best practices on that? (Replicating the Nuxt auth module a bit)
I would just directly return the user from the login route in Laravel along wiith the token, that way I wouldn't need to send two requests, one for the token and another for the user.
My response would look something like this
returnresponse(['user'=>$user,// or even better wrap it in resource'token'=>$token,'expiresIn'=>$expiresIn,'message'=>'You have been logged in'],200);
Awesome, thanks for the advice. I'm a bit of a noob with Vue/Nuxt, maybe there's a cleaner way to do it, but something like this seems to work (setting user on login, clearing user on logout).
Thanks for the great tutorial. Would it make sense to do another dispatch in the login() method in login.vue, to a '/me' Laravel endpoint, and store some user information in Vuex, to use throughout the app? Any thoughts / best practices on that? (Replicating the Nuxt auth module a bit)
I would just directly return the user from the login route in Laravel along wiith the token, that way I wouldn't need to send two requests, one for the token and another for the user.
My response would look something like this
Awesome, thanks for the advice. I'm a bit of a noob with Vue/Nuxt, maybe there's a cleaner way to do it, but something like this seems to work (setting user on login, clearing user on logout).
Authcontroller.php
return response([
'user' => $user->name,
'token' => $resp->access_token,
'expiresIn' => $resp->expires_in,
'message' => 'You have been logged in',
], 200);
Added the user in store/index.js
export const state = () => ({
token: null,
user: null,
});
Added Vuex mutations:
SET_USER(state, user) {
state.user = user;
}
REMOVE_USER(state, user) {
state.user = null;
},
Added Vuex actions:
setUser({commit}, user) {
commit('SET_USER', user);
},
removeUser({commit}) {
commit('REMOVE_USER');
}
Changed logout method
logout: function() {
this.$axios.post('/api/logout')
.then(resp => {
this.$store.dispatch('removeUser');
this.$store.dispatch('logout');
this.$router.push('/login');
})
.catch(errors => {
console.log(errors);
});
}
Login.vue, login() method:
login() {
this.$axios.$post('/api/login', this.form)
.then(({token, expiresIn, user}) => {
this.$store.dispatch('setToken', {token, expiresIn});
this.$store.dispatch('setUser', user);
this.$router.push('/');
})
.catch(errors => {
console.log(errors);
})
}