0

Estoy haciendo una pequeña practica con Vue y Firebase, ya he logrado crear usuarios y configurar bien Firebase pero tengo un problema a la hora de restringir rutas con VueRouter, con lo que he leído debería bastar con la propiedad requiresAuth para restringirla si no hay usuario logueado, pero no funciona de esta forma:

{
  path: '/home',
  name: 'Home',
  component: Home,
  meta: { requiresAuth: true }
}

Pero la ruta sigue siendo accesible a pesar de que no haya iniciado sesión ningún usuario. ¿Hace falta alguna configuración extra?

Mi archivo de rutas es este:

Vue.use(Router)

export default new Router({
routes: [
{
  path: '*',
  redirect: '/'
},
{
  path: '/',
  name: 'Index',
  component: Index
},
{
  path: '/register',
  name: 'Register',
  component: Register
},
{
  path: '/home',
  name: 'Home',
  component: Home,
  meta: { requiresAuth: true }
}
]
})

Router.beforeEach((to, from, next) => {
let usuarioActivo = firebase.auth().currentUser;
let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

if (requiresAuth && !usuarioActivo) next('index')
else if (!requiresAuth && usuarioActivo) next('home')
else next()
})

Al agregar el beforeEach y preguntar si la ruta requiere autorizacion me tira este error:

introducir la descripción de la imagen aquí

2
  • ¿Podrías editar tu pregunta y mostrarnos el contenido del archivo donde has definido las rutas? Te recomiendo leer este articulo
    – Marcos
    el 20 ene. 2018 a las 10:36
  • Muchas gracias por tu respuesta Marcos, he editado la pregunta.
    – DVertel
    el 20 ene. 2018 a las 14:38

2 respuestas 2

0

El error lo recibes porque estas llamando al método beforeEach sobre el componente Router, cuando deberías hacerlo sobre instancia devuelta por new Router().

Solución:

  • Debes crear una instancia de router. Así por ejemplo, let router = new Router(...)

  • Sobre variable router es que debes llamar al método beforeEach

Ejemplo:

Vue.use(Router)

let router = new Router({
  routes: [{
    path: '*',
    redirect: '/'
  }, {
    path: '/',
    name: 'Index',
    component: Index
  }, {
    path: '/register',
    name: 'Register',
    component: Register
  }, {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true
    }
  }]
})

router.beforeEach((to, from, next) => {
  let usuarioActivo = firebase.auth().currentUser;
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !usuarioActivo) next('index')
  else if (!requiresAuth && usuarioActivo) next('home')
  else next()
})

export default router
1
  • Muchas gracias marcos, con tus correcciones ya no me tira el error, pero sigue sin bloquearme la entrada la ruta '/home', si la escribo en el navegador puedo seguir accediendo a ella.
    – DVertel
    el 20 ene. 2018 a las 19:04
0

El error es bastante claro. No existe la función beforeEach en Router. Debes acceder al método desde el objeto creado con new Router()

Puedes hacer:

const router = new Router(...)
router.beforeEach(...)
export default router

Nada te impide hacer esto:

const router = new Router(...)
export default router
router.beforeEach(...)

O también puedes hacer (La mejor opción en mi opinión):

export default router = new Router(...)
router.beforeEach(...)

Referencia de interés

1
  • Muchas, con tus correcciones ya no me tira el error, pero sigue sin bloquearme la entrada la ruta '/home', si la escribo en el navegador puedo seguir accediendo a ella.
    – DVertel
    el 20 ene. 2018 a las 19:04

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.