Vuex and routing - Redirection after sign in

Question

I'm using vuex and laravel as backend for my project.
Redirection after signing in is not working. here is my code :

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

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

And my mutation

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

My routes :

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

And my check for routes protections

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

How to redirect automatically??
Thanks for your help

Are you using vueRouter if yes then can you put your router.js file? — Amresh Venugopal
– Amresh Venugopal, Commented Mar 3, 2017 at 0:52
But there is no edited tag on your question, are your sure? — Amresh Venugopal
– Amresh Venugopal, Commented Mar 3, 2017 at 4:59
It looks fine, is the control reaching the right if-else blocks? — Amresh Venugopal
– Amresh Venugopal, Commented Mar 3, 2017 at 5:40

Austio · Accepted Answer · 2017-08-15 16:26:09Z

3

I don't think that the side effect of navigation should be a part of the Vuex store action UNLESS you are 100% certain it will always need to happen as part of this action. Wherever in the application you are doing this from should take care of that navigation. To accomplish this you need to do two things

In your action, return the promise that is the Vue.http thing

Handle success with a .then in the component your are calling this from

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

edited Aug 15, 2017 at 16:26

answered Mar 3, 2017 at 1:57

Austio

6,0951 gold badge23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Beni Over a year ago

it works :) i have used 'Promise'. this is the link stackoverflow.com/questions/40390411/…

Collectives™ on Stack Overflow

Vuex and routing - Redirection after sign in

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related