2

This is the store.js which handle vuex store and login and logout functions,

actions:{

    login({ commit }, creds){
        commit(LOGIN);
        return new Promise((resolve) => {
            setTimeout(() =>{
                axios.post('/oauth/token', creds).then((response) =>{
                Vue.auth.setToken(response.data.access_token, response.data.expires_in + Date.now());
                commit(LOGIN_SUCCESS);
                });
                resolve();
            }, 3000);
        });
    },

    logout({commit}){
        return new Promise((resolve) => {
            setTimeout(() =>{
                Vue.auth.destroyToken();
                commit(LOGOUT);
                resolve();
            }, 3000);
        });
        console.log('Successfully logged out');

    }

}

and login component is this,

login(){
    try{
       this.$store.dispatch('login', {
       username: this.user.email,
       password: this.user.password,
       client_id: 2,
       client_secret: 'wcw9GkgKMHXUnyZavawJWXgE3GhSubOADO6tKw99',
       grant_type: 'password'
     })
    } catch(error) {
          console.log('error');
      }
      finally{
        alert('Router Push')
          this.$router.push('/dashboard');
          console.log('success')
      }
  }

the problem is no matter where i place router.push its not working, but alert and console.log is working fine but page is not pushing to a specified path, after page fresh it works. But not soon after the alert pops up. What's wrong here ? Thanks in advance.

here is navigation guard

router.beforeEach((to, from, next) =>{
 if(to.matched.some(record => record.meta.forVisitor)){
      if(Vue.auth.isAuthenticated())
      {
           next({
               path: '/dashboard'
           });
      } else {
           next();
      }
 } else if(to.matched.some(record => record.meta.isauth)){
      if( !Vue.auth.isAuthenticated())
      {
           next({
               path: '/login'
           });
      } else {
           next();
      }
 } else {
      next()

 }
});
Armali
  • 18,255
  • 14
  • 57
  • 171
PL_Pathum
  • 173
  • 1
  • 11
  • Nothing in this code waits for the dispatch promise to complete – Phil Jul 20 '18 at 05:30
  • Do you perhaps have a pending navigation guard that has not called `next()`, thus preventing the navigation? – Decade Moon Jul 20 '18 at 05:31
  • What's with the timeouts? Also, your `login` action will _resolve_ **before** the HTTP request completes. Is that intentional? – Phil Jul 20 '18 at 05:33
  • So you're attempting to navigate to `/dashboard` **before** you call `Vue.auth.setToken()` so presumably you are not authenticated at that stage and your navigation guard redirects you back to `/login`. See the linked duplicate post. Also, it's just awesome when you fix up somebody's code formatting so it's readable and they go and overwrite it again /s – Phil Jul 20 '18 at 05:38
  • @Phil no i just followed a tutorial and test it out, So if i place HTTP request after `resolve` would it works. – PL_Pathum Jul 20 '18 at 05:41
  • @ESYMASESYMAS no, it won't, because you never wait for the requests to complete / promises to resolve – Phil Jul 20 '18 at 05:42
  • 1
    @phil Thank you, i figured it out, – PL_Pathum Jul 20 '18 at 06:22
  • @ESYMASESYMAS best news I've heard all day. Congrats! – Phil Jul 20 '18 at 06:31

0 Answers0