Vuex und Routing - Umleitung nach dem Anmelden

Question

Ich benutze Vuex und Laravel als Backend für mein Projekt.
Umleitung nach dem Anmelden funktioniert nicht. hier ist mein Code:

methods: { 
    submit() { 
     this.$validator.validateAll() 
     if (!this.errors.any()) { 
     this.$store.dispatch('SIGNIN', this.user) 
     this.$router.push({name: 'chat'}) 
     } 
    } 
} 

Für Vuex:

actions: { 
    SIGNIN (context, user) { 
     context.commit('handleLoader') 
     Vue.http.post(apiDomain + signInUrl, user, {headers: getHeaders}) 
     .then(response => { 
     if (response.status === 200) { 
      Vue.auth.setToken(response.body.token) 
      Vue.auth.setAuth(response.body.user) 
      context.commit('handleLoader') 
      // context.commit('navigateAfterSignIn') 
     } 
     }) 
    } 
} 

Und meine Mutation

mutations: { 
    signin (state) { 
     state.isLoggedIn = true 
    } 
    } 

Meine Routen:

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'chat', 
     component: Chat, 
     meta: { 
     forAuth: true 
     } 
    }, 
    { 
     path: '/signin', 
     name: 'signin', 
     component: Signin, 
     meta: { 
     forVisitors: true 
     } 
    }, 
    { 
     path: '/signup', 
     name: 'signup', 
     component: Signup, 
     meta: { 
     forVisitors: true 
     } 
    } 
    ], 
    mode: 'history' 
}) 

Und meine Prüfung für Routen Schutz

router.beforeEach(
    (to, from, next) => { 
    if (to.matched.some(record => record.meta.forVisitors)) { 
     if (Vue.auth.isAuthenticated()) { 
     next({ 
      path: '/' 
     }) 
     } else next() 
    } else if (to.matched.some(record => record.meta.forAuth)) { 
     if (!Vue.auth.isAuthenticated()) { 
     next({ 
      path: '/signin' 
     }) 
     } else next() 
    } else next() 
    } 
) 

Wie automatisch umleiten ??
Danke für Ihre Hilfe

Answer 1

Ich glaube nicht, dass die Nebenwirkung der Navigation ein Teil der Vuex Store Aktion sein sollte, sofern Sie zu 100% sicher, es wird immer im Rahmen dieser Aktion geschehen muß. Wo auch immer in der Anwendung Sie dies tun, sollte sich um diese Navigation kümmern. Um dies zu erreichen müssen Sie zwei Dinge

In Ihrer Aktion tun, bringen Sie das Versprechen, dass die Vue.http Sache ist

Griff Erfolg mit einem .then in der Komponente Sie fordern dies von

//Store action, note Vue.http.post MUST return a thenable (Promise) 
SIGNIN (context, user) { 
    context.commit('handleLoader') 
    return Vue.http.post(apiDomain + signInUrl, user, {headers: getHeaders}) 
    .then(response => { 
     handleSettingToken(response) 
     return response 
    }) 
    } 
} 

//Component 

methods: { 
    handleLogin() { 
    return store.dispatch(SIGNIN, user) 
     .then(response => doNavigationHere(response) 
    } 
}