Bienvenida e Introducción

1

Bienvenida y Presentación del proyecto: PlatziRooms

2

Creación y configuración inicial del proyecto utilizando VUE CLI 3

3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

4

¿Que son las Render Functions y JSX?

5

Preparando nuestro entorno para un prototipo

6

Creación de un componente con createElement

7

Utilizando JSX para la creación de un componente

8

Utilizando Slots con Render Functions y JSX

9

Creando un Modal de Login para PlatziRooms

10

Creando la lógica general de nuestros modales con Vuex

11

Creando el contenido de nuestro modal

Componentes controlados y uso de librerías externas

12

Componentes Controlados y Variables Personalizadas

13

Construcción del componente de Recordar Contraseña

14

Creación de un componente Slider utilizando la librería tiny-slider

High Order Functions

15

¿Qué son las High Order Functions? - Crea tu primera HOF

16

Vuex

17

Obtener datos usando Vuex

18

Crea un getter dinámico en Vuex utilizando HOF

19

Creación de la vista para creación de publicaciones

20

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

21

Instalación y Configuracion de Firebase Realtime Database

22

Obteniendo los datos desde Firebase Realtime Database

23

Agregando la consulta de usuarios

24

Almacenando nuevas publicaciones en Firebase Realtime Database

25

Perfeccionando el flujo de navegación de nuestra App

Autenticación con Firebase

26

Configuracion Inicial para trabajar con Firebase Authentication

27

Agregando nuevos usuarios en firebase autentication

28

Inicio de sesión de usuario

29

Cierre de sesión de usuario

30

Protegiendo páginas utilizando Navigation Guards

Scoped Slots

31

¿Qué son los Scoped Slots? Dónde utilizarlos y por qué

32

Integración de Scoped Slots en Platzi Rooms

Deploy

33

Creando y desplegando nuestra app en Heroku

34

Conclusiones y Despedida

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Protegiendo páginas utilizando Navigation Guards

30/34
Recursos

Las Navigation Guards de Vue Router nos ayudan a proteger ciertas rutas de nuestra aplicación con redirecciones o cancelaciones. Podemos conectarnos al conjunto de funciones que se ejecutan antes (con router.beforeEach), durante y después (con router.afterEach) del proceso de navegación de diferentes maneras: de forma global global, por rutas o por componentes.

Para indicarle a Vue Router que nuestras rutas deben ser protegidas debemos añadir la siguiente información:

{
        path: '...',
        name: '...',
        component: '...',
        meta: {
                requiresAuth: true,
        }
}

Aportes 7

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Interesante uso del metodo some, es algo nuevo para mi!!,

Notas:

  • to: Es el objecto de tipo Router que representa la ruta de llegada.

  • to.matched: Es una propiedad de tipo arreglo que esta compuesta por la ruta actual y todas sus rutas hijas.

  • some: Es un método de los arreglos que los recorre y retorna true si alguna condición se cumple.

  • to.matched.some(route => route.meta.requiresAuth) : Finalmente evaluamos si la ruta en to o alguna de sus rutas hijas requieren auth para entrar.

Hay un error en la app.
Si bien las rutas están protegidas, cuando se encuentra logeado el usuario si puede acceder a crear una nueva room desde el boton de add en el header, pero si quiere ir a su perfil, es necesario colocar la ruta en la barra de navegación del browser y al dar enter, lo redirecciona a home, y después de unas centesimas de segundo lo vuelve a reconocer como autenticado.

en el condicional de store.state.authId me da null, pero cuando lo imprimo en consola si aparece, alguna ayuda?

Esto es raro, pero a mi no me deja acceder a la ruta aunque esté autenticado… si uso la navegación con el router si puedo, pero si pongo directo la url no me deja:/

Es de mucha utilidad usar Navigation Guards, sin ello se pueden generar unas incongruencias bien prronas uwu

En Nuxt habría que hacer un middleware?