I'm building a login/register system as part of an app. I'm using Firebase and Vuex to handle authentication and database information. I have some actions in Nuxt JS that create the user, sign them in and log them out.
I'm trying to implement a redirect after the user has been successfully registered / when they click login, my code is:
export const actions = {
/*
* Create a user
*/
createUser ({commit}, payload) {
this.$fireAuth.createUserWithEmailAndPassword(payload.email, payload.password).then(function(firebaseUser) {
commit('setUser', payload)
}).catch(function(error) {
console.log('error logging in' + error)
});
},
/*
* Log a user into Beacon
*/
login ({commit}, payload) {
this.$fireAuth.signInWithEmailAndPassword(payload.email, payload.password).then(function(firebaseUser) {
commit('setUser', payload)
}).catch(function(error) {
console.log('error logging in' + error)
});
},
/*
* Sign a user out of Beacon
*/
signOut ({commit}) {
this.$fireAuth.signOut().then(() => {
commit('setUser', null)
}).catch(err => console.log(error))
}
}
I'm using Nuxt JS 2.9.2, on Vue JS 2.6.10
I have a few modules.
I've tried using this.router.push('/')
and window.location.href
, but would like to retain the SPA functionality.
Nuxt automatically generates the vue-router configuration for you, based on your provided Vue files inside the pages directory. That means you never have to write a router config again!
A redirect means when the user visits /home , the URL will be replaced by / , and then matched as / . But what is an alias? An alias of / as /home means when the user visits /home , the URL remains /home , but it will be matched as if the user is visiting / .
You can use $router. push({ name: "yourroutename"}) or just router. push("yourroutename") now to redirect.
You have two ways to do it:
$nuxt.$router.push
in actionsthis.$router.push
as argument in your action, and call where you need.Hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With