Rutas con metadatos

Clase 12 de 17 • Curso de Vue.js: Navegación con Vue Router

Ameth Ordoñez Erazo

student•

Se puede guardar la ruta donde estaban para que los dirija a la vista de inicio de sesión, y luego de iniciar los regrese a la página que querian ver inicialmente:

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
				// si esta logueado...
    return {
      path: '/login',
      // se guarda la dirección que querian visitar para regresarse luego de iniciar sesión
      query: { redirect: to.fullPath },
    }
  }
})

Carlos Rodríguez

student•

La validación debe hacerse de la siquiente manera:

if (to.meta?.roles && to.meta?.roles.includes('admin')) {
    return { path: 'session' };
}

Ameth Ordoñez Erazo

student•

Corrección:

Para retornar la ruta utilizando el path, se debe indicar con el '/':

return {path: '/session'}

Sino, puedes utilizar el nombre de la ruta, si está definido:

return {name: 'sesion'}

Carlos Rodríguez

student•

@amethgabriel Correcto, gracias por la corrección, aquí la documentación: Route Meta Fields

Juan José Lockett

student•

estoy un poco confundido... las validaciones no deberían implementarse en el backend? digo de repente todo este código es al final del día editable por el usuario o me equivoco?

Diana Martinez

student•

Existen dos tipos de validaciones, las validaciones en el backend son para evitar que los usuarios den datos incorrectos, manipulados, inseguros, etc. Mientras que en frontend pueden ayudar a mejorar la experiencia del usuario, al validar la estructura y tipo de los mismos sin tener que llegar al submit del dato hacia el backend, ahorrando llamadas al mismo, además.

Un ejemplo es validar el rol de un usuario o si se encuentra logueado o no, para mostrar u ocultar sus datos y enlaces que solamente son relevantes según sus permisos, siendo algo de frontend, ui/ux, etc. Y muy aparte de las validaciones en backend que serían más para la seguridad y control de acceso.

Por otro lado, las validaciones de rutas pueden tomar ventaja de Server Side Rendering si se configuran correctamente, por lo que estas podrían ejecutarse en el backend.

Geraldine Diaz

student•

Hola @diananerd y comunidad, quisiera saber cómo puedo desde la vista de lógin cambiar el valor de requiresAuth por false para que me deje entrar a la página de chats cuando me he "logueado", gracias

Diana Martinez

student•

Hola, en este caso requiresAuth es un valor que le dice a la vista que solo puedes acceder si ya te has logueado, no sobre si ya te logueaste o no, para eso podrías utilizar almacenar el token de sesión en LocalStorage o utilizar una cookie y entonces basar tu condicional en eso.

Te recomiendo los cursos que continúan de este: Curso de Vue.js: Manejo del Estado con Vuex, Curso de Vue.js: Manejo del Estado con Pinia.

En esos dos cursos se habla más sobre esto y creo que justo se responde tu pregunta, además el proyecto es precisamente un ejemplo de eso.

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
				// si esta logueado...
    return {
      path: '/login',
      // se guarda la dirección que querian visitar para regresarse luego de iniciar sesión
      query: { redirect: to.fullPath },
    }
  }
})

Rutas con metadatos

Introducción

Introducción a Vue Router

Setup inicial

Definición de rutas

Definición de rutas

Parámetros

Rutas anidadas

API de navegación

Navegación programática

Rutas con nombre

Redirección y alias

Componentes y props

Modos de historia

Navegación avanzada

Guardas de navegación

Rutas con metadatos

Obtención de datos

Composition API

Coincidencia de rutas

Rutas dinámicas

Despedida

Despedida del curso