Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • 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.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue