Laravel API - L'authentification fonctionne juste après le rechargement de la page

Question

J'essaye de construire une application de page unique (SPA) en utilisant VueJS comme frontal et Laravel comme back-end.
J'utilise laravel's passport pour gérer les jetons d'authentification, etc.

---

Le problème: Après connexion je dois recharger la page à authentifier avec succès.

---

Connexion méthode

data() { 
    return { 
     email: '', 
     password: '', 
    } 
}, 
methods: { 
    login() { 
     var data = { 
      client_id: 2, 
      client_secret: '****************************', 
      grant_type: 'password', 
      username: this.email, 
      password: this.password 
     } 
     // send data 
     this.$http.post('oauth/token', data) 
      .then(response => { 
       // authenticate the user 
       this.$store.dispatch({ 
        type: 'authenticate', 
        token: response.body.access_token, 
        expiration: response.body.expires_in + Date.now() 
       }) 
       // redirect after successful login 
       if (this.$route.query.from) 
        this.$router.push(this.$route.query.from) 
       else 
        this.$router.push('/feed') 
       }) 
     } 
    } 

Obtenez les informations utilisateur du back-end (fonctionne tout simplement après avoir rafraîchi la page)

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 
       }) 
      }) 
    } 
} 

Vuex magasin

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 }) 
    } 
}) 

---

itinéraire Laravel

Route::group(['middleware' => 'auth:api'], function() { 
    Route::get('/users', 'UsersController@users'); 
}); 

fonction Laravel

public function users(Request $request) 
{ 
    return $request->user(); 
} 

---

Le message d'erreur


Lorsque je recharge la page, le message d'erreur disparaît et je suis authentifié avec succès.

---

Je serais très heureux pour toute sorte d'aide!

Answer 1

Grâce à Frank Provost, j'ai trouvé la réponse. Au cas où quelqu'un d'autre rencontre le même problème:

Je ne passais pas le jeton à chaque demande.

je devais changer cette

Vue.http.headers.common['Authorization'] = 'Bearer ' + Vue.auth.getToken() 

à cette

Vue.http.interceptors.push((request, next) => { 
    request.headers.set('Authorization', 'Bearer ' + Vue.auth.getToken()) 
    request.headers.set('Accept', 'application/json') 
    next() 
}) 

Maintenant, tout fonctionne comme prévu - pas besoin de rafraîchir l'URL.