我正在尝试使用VueJS作为前端并使用Laravel作为后端来构建单页应用程序(SPA)。
我正在使用laravel's passport来管理身份验证令牌等。
setUser () {
// this route throws 'unauthenticated' error
// and works only after refreshing the page
this.$http.get('api/users/')
.then(response => {
this.$store.dispatch({
type: 'setUser',
id: response.body.id,
email: response.body.email,
name: response.body.name
})
})
}
}
从后端获取用户信息(仅在刷新页面后才有效)
export default new Vuex.Store({
state: {
isAuth: !!localStorage.getItem('token'),
user: {
id: localStorage.getItem('id'),
email: localStorage.getItem('email'),
name: localStorage.getItem('name')
}
},
getters: {
isLoggedIn(state) {
return state.isAuth
},
getUser(state) {
return state.user
}
},
mutations: {
authenticate(state, { token, expiration }) {
localStorage.setItem('token', token)
localStorage.setItem('expiration', expiration)
state.isAuth = true
},
setUser(state, { id, email, name }) {
localStorage.setItem('id', id)
localStorage.setItem('email', email)
localStorage.setItem('name', name)
state.user.id = id
state.user.email = email
state.user.name = name
}
},
actions: {
authenticate: ({ commit }, { token, expiration }) => commit('authenticate', { token, expiration }),
setUser: ({ commit }, { id, email, name }) => commit('setUser', { id, email, name })
}
})
Vuex商店
Route::group(['middleware' => 'auth:api'], function() {
Route::get('/users', 'UsersController@users');
});
<小时/> Laravel路线
public function users(Request $request)
{
return $request->user();
}
Laravel功能
{{1}}
<小时/> 错误消息
答案 0 :(得分:4)
感谢Frank Provost,我找到了答案。如果有其他人遇到同样的问题:
我没有在每次请求时都传递令牌。
我不得不改变这个
string
到这个
decimal
现在,一切都按预期工作 - 无需刷新网址。