Laravel API - 身份验证在重新加载页面后才起作用

时间:2017-09-08 09:01:20

标签: laravel vue.js vuejs2 vuex laravel-passport

我正在尝试使用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}}

<小时/> 错误消息

enter image description here
当我重新加载页面时,错误消息消失,我成功通过身份验证。

我会很高兴得到任何帮助!

1 个答案:

答案 0 :(得分:4)

感谢Frank Provost,我找到了答案。如果有其他人遇到同样的问题:

我没有在每次请求时都传递令牌。

我不得不改变这个

string

到这个

decimal

现在,一切都按预期工作 - 无需刷新网址。