Hola estoy desarrollando un dashborad gestionable.
Mi problema es que un usuario solo puede ver ciertos módulos. El que dice esto es el backend. Entonces al final:
- El usuario A tiene acceso a todo.
- El usuario B solo tiene acceso a las estadísticas.
Tengo para esto en vue router.
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
beforeEnter: AuthGuard.auth,
meta: {
layout: 'dashboard'
}
},
{
path: '/estadisticas',
name: 'estadisticas',
component: () => import('@/views/estadisticas.vue'),
meta: {
layout: 'dashboard',
auth: true
}
}
]
El problema que presento es que cuando el usuario hace login. El login le manda las rutas a las que tiene acceso. Si el usuario intentara pedir algo que a lo que no tiene permiso regresa el backend un error 401.
Sin embargo yo no se como hacer hacer que vue router solo tenga disponibles las rutas que le corresponden a un usuario.
Intente colocar las rutas en tiempo de ejecucion:
this.$router.options. routes.push({
omponent: "hola.js",
meta: { layout: "blank" },
name: "hole",
path: "/holi"
});
Pero esto no funciona.