Presentaci贸n

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • En esta lecci贸n del curso de Vue-Firebase implementaremos la protecci贸n de nuestras rutas con un "Router Guard" de Vue Router. Si esto de Vue Router es algo confuso para ti, no te preocupes, en Escuela Vue tienes un curso de Vue Router disponible 馃樇.
  • Primero, tenemos que designar cu谩l de las (dos por ahora) rutas requiere alg煤n tipo de autentificaci贸n. En nuestro caso, renombramos Home.vue a RoomsView.vue como portada del proyecto. Como el nombre indica, aqu铆 mostraremos las salas de conversaci贸n disponibles.
  • En router/index.js debemos indicar el nuevo nombre, y con los metadatos de las rutas expresar que requiere autentificaci贸n a trav茅s de la propiedad requiresAuth como true.
...
path: "/",
name: "home",
component: RoomsView,
meta: {
  requiresAuth: true
}
...
  • Ahora necesitamos crear un mecanismo para que, en el caso de que se intente acceder a / sin estar autentificado, el usuario/a sea redireccionado a /auth para mostrar la vista AuthView.vue. Conseguiremos esto en dos pasos.
  • El primero, creando una acci贸n en el m贸dulo user.js de Vuex que nos permita comprobar si hay un usuario validado a trav茅s del ya conocido m茅todo onAuthStateChanged que vimos en una lecci贸n anterior. Esta acci贸n, llamada getCurrentUser usar谩 Promises E6 (siento ser pesado, pero si no tienes claro lo que son las promesas, en Escuela Vue tienes un magn铆fico curso de JavaScript moderno donde te explico como funcionan).
getCurrentUser() {
  return new Promise((resolve, reject) => {
    const unsubscribe = auth.onAuthStateChanged(
      user => {
        unsubscribe();
        resolve(user);
      },
      () => {
        reject();
      }
    );
  });
},
  • Como ves, onAuthStateChanged retorna una funci贸n para anular la suscripci贸n al evento de cambio de auth, por lo si la guardamos en una variable, podemos ejecutarla para cancelar todo y no provocar errores de memoria. M谩s adelante usaremos un patr贸n similar con las escuchas a Cloud Firestore.
  • Si no hay error, resolvemos retornando el usuario (que puede contener informaci贸n o no, dependiendo si hay alguien autentificado) y anulamos la suscripci贸n. Si hay alg煤n error, rechazamos al promesa.
  • El segundo paso es implementar nuestra getCurrentUser de forma que sea consultado cada vez que cargamos una ruta. Para ello usaremos el guard beforeEach y establecemos condiciones en base a si la ruta requiere autentificaci贸n y/o el usuario/a est谩 autentiticado, y viceversa.
router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
  // Requires auth & no user
  if (requiresAuth && !(await store.dispatch("user/getCurrentUser"))) {
    next({ name: "auth" });
    // No requires auth and user (auth)
  } else if (!requiresAuth && (await store.dispatch("user/getCurrentUser"))) {
    next({ name: "home" });
  } else {
    // Anything else
    next();
  }
});
  • Con los dos pasos listos, si ahora intentamos acceder a / sin estar autentificados, nos devolver谩 a /auth. De igual manera, si queremos acceder a /auth estando autentificados, nos enviar谩 a /.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pru茅balo gratis.

C贸digo inicial
Aprende Firebase en Escuela Vue

驴Tienes alguna pregunta sobre esta lecci贸n de Curso Firebase para Web?

Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. 隆Te esperamos!.

Tras el registro (si no lo has hecho ya) ser谩s redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el d铆a a d铆a y todo lo relacionado con Escuela Vue a trav茅s de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podr谩s solucionar tus dudas y ayudar a otras personas como t煤 a solucionar las suyas.

Recibe novedades en tu 馃摤