[Vuejs]-VueJS: Redirecting between two pages

by

0👍

Take a look at the Per-Route Guards section of the docs: https://router.vuejs.org/en/advanced/navigation-guards.html

You might want to try something like the below. By putting the beforeEnter guard on the route, you are telling Vue to do that first. The next argument tells VueRouter what to do next, and can redirect if needed or continue on to the original route.

 beforeEnter(to, from, next) {
  if (this.$store.state.user.key === null) {
    next('/new')
  }
}

EDIT

You may also want to try using push instead of replace

0👍

As per the conversation we had in the comments looks like you require this:

store.dispatch can handle Promise returned by the triggered action handler and it also returns Promise. See docs.

So you can setup the login action to retirn a promise like this: 

a_logInUser: ({state, commit}, userInput) => {
    return new Promise((resolve, reject) => {
        firebase.auth().signInWithEmailAndPassword(userInput.email, userInput.paswword);
        resolve();
    });
}

Then in your authentication page where you tale the login input details and click the login button , set this up as the click handler of your login button

loginUser(){
    this.$store.dispatch('a_logInUser', {email: this.email, password: this.password})
        .then((result) => {
            this.$router.replace('/');
            }, (err) => {
                // stay on this pageS
                //handle login error                
        });
    }
}

Leave a comment