- En esta lección del curso de Vue-Firebase crearemos los métodos en nuestro módulo Vuex para permitir al usuario crear una cuenta o hacer login si ya tiene credenciales.
- En nuestro archivo
store/user.js
debemos crear una acción por cada acción (valga la redundancia) requerida, además de una mutación que cambie las piezas del estado. En este caso la propiedad user
.
- En la maravillosa documentación de Firebase, hay una sección específica con todo lo que necesitamos para autentificar con usuario y contraseña. Se trata del método de Firebase Auth
createUserWithEmailAndPassword
para crear una cuenta, signInWithEmailAndPassword
para hacer login y signOut
para hacer logout.
- Primero crearemos la mutación
setUser
para mutar la pieza user
del estado.
setUser(state, user) {
state.user = user;
},
- Y ahora las acciones correspondientes
doRegister
, doLogin
y doLogout
.
async doRegister({ commit }, { name, email, password }) {
await auth.createUserWithEmailAndPassword(email, password);
const user = auth.currentUser;
await user.updateProfile({
displayName: name
});
commit("setUser", user);
},
...
- Ahora debemos conectar los métodos locales
doLogin
y doRegister
de nuestra vista AuthView
con las acciones Vuex.
redirect() {
this.$router.push({ name: "home" });
},
resetData() {
this.userData.name = this.userData.email = this.userData.password = "";
},
async doLogin() {
this.isLoading = true;
try {
await this.$store.dispatch("user/doLogin", {
email: this.userData.email,
password: this.userData.password
});
console.log("Logged in");
this.resetData();
this.redirect();
} catch (error) {
console.error(error.message);
} finally {
this.isLoading = false;
}
},
...
}
- Ahora nos queda conectar el método
doLogout
del componente NavBarComponent
con la acción doLogout
en Vuex. Podemos mostrar los botones de la derecha sólo si hay usuario autenficado, a través de el helper mapState
y la propiedad user
.
import { mapState } from "vuex";
...
methods: {
async doLogout() {
try {
await this.$store.dispatch("user/doLogout");
this.$router.push({ name: "auth" });
console.log("Logged out");
} catch (error) {
console.error(error.message);
}
}
},
computed: {
...mapState("user", ["user"])
}
...
- En la siguiente lección crearemos la funcionalidad para comprobar en tiempo real si el usuario está autentificado (o no) para mostrar u ocultar ciertas partes de nuestro proyecto.