Seguridad en las rutas con vue js

vue-router

#1

Hola, estoy intentando hacer la autenticación por token, el problema es que cuando el usuario se LOGUEA y vuelve a dar atras, se le muestra nuevamente el formulario de login.
Puedo agregar metódos que váliden eso, pero solo funcionan al recargar la página, por lo tanto cuando el usuario le da flecha atrás le vuelve a mostrar el formulario o cualquier pagina que haya escrito.
EJEMPLO;
Ruta -> /dashboard
Si ‘api_token’ no esta, lo regrese a ‘/home’ -> pero solo funciona al recargar la página.
Después de esto si el usuario le da flecha atrás lo lleva a /dashboard como si nada
AYUDA POR FAVOR.

Vue CLI 3.0
API Laravel Lumen
El token lo guardo en el LocalStorage


#2

Hola Sebastian.

Tuve el mismo problema hace unos meses, pero es sencillo de resolver.
Recuerda que puedes hacer uso de las funciones dentro de ciclo de vida.

Cuando utilizas created, debes definir los encabezados por default, es decir el token.
Yo lo hago de esta manera.Utilizo la libreria vue-session para mantener las sesiones.
Entonces cada vez que se crea el componente, siempre a su vez agregara las cabeceras para tus peticiones.Asi cada vez que recargas, se mantiene el token en tus peticiones.

 created: function(){
this.axios.defaults.headers.common['Authorization'] = 'Bearer ' +this.$session.get("token")
}

Ahora, para que tu aplicacion no regrese a login, debes poner una condicional en tu router.

const router = new Router({..
})

router.beforeEach((to, from, next) => {
//Aqui checas, si tiene una sesion o un token y el usuario quiere ir a la ruta login, no lo permites //y lo mandas a la raiz
  if (to.name === 'login' && router.app.$session.exists()) {
    router.push('/')
  }
  next()
})

export default router

Espero sea de ayuda
Saludos :wink:


#3

Muchas gracias amigo, lo voy a probar y comentaré el resultado.


#4

No se suolucionó, el beforeEach me funciona solo si la página se recarga, pero al darle atrás muestra la vista ya que no se esta recargando el navegador.