EDIT:
So I just got this working by changing the axios get call to a post call, same with the route, any idea why did this work???
from:
javascript
axios.get('/globals/get-logged-user')
and
php
Route::get('/globals/get-logged-user','GlobalsController@getLoggedUser');
to:
javascript
axios.post('/globals/get-logged-user')
and
php
Route::post('/globals/get-logged-user','GlobalsController@getLoggedUser');
I'm trying to get current authenticated user (if exists) for my Header vue component, I'm also using vuex store modules to keep my code organized and decoupled.
The proccess goes like this:
When the header component is mounted() I dispatch the action getLoggedUser.
Now inside the Globals store I make axios get call to route /globals/get-logged-user
If the call is succesfull I update the state, now my Header component should be able to access thelogged user data with the help of mapState vuex helper.
Now what actually happens:
The axios get call is done, it returns a positive 200 status code but the response is blank, nothing gets sent back from the backend.
This is my network tab:
https://i.imgur.com/hlD9bAY.png
As you can see the other ajax requests return actual data but the get call returns nothing, I also noticed the type of the GET call is html, could it be this?
My component:
<template>
<header class="header_maincontainer">
<div class="header_small_container">
<span>{{ loggedUser.email }}</span>
</div>
</header>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'MainHeader',
computed: {
//...mapState('Globals', ['allGlobals', 'loggedUser', 'globals']),
...mapState('Globals', [ 'loggedUser']),
},
mounted() {
console.log(this.$options.name+' component successfully mounted');
this.getLoggedUser();
},
methods:{
//component actions declaration
...mapActions('Globals', ['getLoggedUser']),
}
};
</script>
<!--STYLES-->
<style scoped>
</style>My Globals vuex module:
import axios from 'axios'
//STATE
const state = {
loggedUser:'',
loadingStatus:0
}
//GETTERS
const getters = {
}
//ACTIONS
const actions = {
getLoggedUser ({ commit }) {
commit( 'SET_LOAD_STATUS', {status: 1} );
axios.get('/globals/get-logged-user')
.then((response) => {
commit('GET_LOGGED_USER', { loggedUser: response.data.loggedUser })
console.log(response.data.loggedUser);
commit( 'SET_LOAD_STATUS', {status: 2} );
},
(error) => {
console.log(error);
commit( 'SET_LOAD_STATUS', {status: 3} );
})
},
}
//MUTATIONS
const mutations = {
GET_LOGGED_USER (state, loggedUser) {
state.loggedUser = loggedUser;
},
}
export default {
namespaced: true, state, getters, actions, mutations
}And my laravel backend:
<?php
namespace App\Http\Controllers;
use App\Models\Globals;
use Illuminate\Http\Request;
class GlobalsController extends Controller
{
public function getLoggedUser(){
$loggedUser = Auth::user();
return response()->json([
'loggedUser' => $loggedUser
]);
}
}Please help me, I'm still stuck with this after all these days.
</div>
