【发布时间】:2019-04-09 21:32:00
【问题描述】:
编辑:
所以我只是通过将 axios get 调用更改为 post 调用来实现此功能,与路由相同,知道为什么会这样吗?
来自:
javascript
axios.get('/globals/get-logged-user')
和
php
Route::get('/globals/get-logged-user','GlobalsController@getLoggedUser');
到:
javascript
axios.post('/globals/get-logged-user')
和
php
Route::post('/globals/get-logged-user','GlobalsController@getLoggedUser');
我正在尝试为我的 Header vue 组件获取当前经过身份验证的用户(如果存在),我还使用 vuex 存储模块来保持我的代码组织和解耦。
流程是这样的:
当 header 组件被 mount() 时,我调度操作 getLoggedUser。
现在在 Globals 商店中,我让 axios 调用路由 /globals/get-logged-user
如果调用成功,我会更新状态,现在我的 Header 组件应该能够在 mapState vuex helper 的帮助下访问记录的用户数据。
现在实际发生了什么:
axios get 调用完成,它返回一个积极的 200 状态码,但响应为空白,后端没有发回任何内容。
这是我的网络标签:
https://i.imgur.com/hlD9bAY.png
您可以看到其他 ajax 请求返回实际数据但 get 调用没有返回任何内容,我还注意到 GET 调用的类型是 html,会不会是这个?
我的组件:
<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>
我的全局 vuex 模块:
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
}
还有我的 laravel 后端:
<?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
]);
}
}
请帮助我,这些天后我仍然坚持这个。
【问题讨论】:
标签: javascript php laravel vue.js