Protegiendo páginas utilizando Navigation Guards

Clase 30 de 34 • Curso Avanzado de Vue.js 2 y Firebase por Bedu

Resumen

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,
        }
}

Juan Castro

teacher•

Jesús Miguel Quinto Teran

student•

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.

Alejandro González Reyes

student•

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.

Juan Castro

teacher•

¿Cómo lo solucionarias?

Omar Crespo

student•

yo he colocado un router-link en el header en el nombre del usuario

<router-link to="/user" class="text-black no-underline leading-none">
  {{ user.name }}
</router-link>

Pero este no seria la mejor solución ya que el usuario si esta logeado no deberia de poder interactuar con una app donde aparece como no logeado... Si mal adelante en el curso no solucionan esto lo hare yo con un loading screen que no deje hacer nada hasta que se sepa si el usuario esta autenticado... O guardare en cache las credenciales del usuario para que aparezcan directamente y después el servidor compruebe si el usuario debe de ser deslogeado

LUIS EDUARDO CASTILLO GARCIA

student•

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

LUIS EDUARDO CASTILLO GARCIA

student•

aca el codigo

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.requiresAuth)) {
    store.state.authId ? next() : next({ name: 'HomePage' });
  } else {
    next();
  }
});```

Fernanda Aragon

student•

Hola Luis, creo que tienes el condicional ternario alreves, supongo que debería ir de la siguiente manera.

store.state.authId ? next({ name: 'HomePage' }) : next();

Para que si el id existe lo redireccione al HomePage.

Carlos Eduardo Gomez García

teacher•

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:/

Jose Orlando Parra Soto

student•

me paso lo mismo, además cuando me devuelve al inicio me cierra la sesión

Francisco Sebastian Dueñas Caicedo

student•

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

Seba Cardoso

student•

En Nuxt habría que hacer un middleware?

Juan Castro

teacher•

:wink::point_right: Using Firebase Auth With Nuxt.js