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
    Commented el 20 ene. 2018 a las 10:36
  • Muchas gracias por tu respuesta Marcos, he editado la pregunta.
    – DVertel
    Commented 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
    Commented 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
    Commented el 20 ene. 2018 a las 19:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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