Tengo un enrutador vue como este:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) function guard (to, from, next) { if (localStorage.getItem('jwt')) { next() } else { next('/login') } } function admin (to, from, next) { if (localStorage.getItem('admin') && localStorage.getItem('admin') !== 'false' && localStorage.getItem('jwt')) { next() } else { next('/noadmin') } } export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', beforeEnter: guard, meta: { layout: 'default' }, component: () => import('@/components/dashboard.vue') }, { path: '/datacollector', name: 'datacollector', beforeEnter: guard, meta: { layout: 'default' }, component: () => import('@/components/datacollector.vue') }, { path: '/licensing', beforeEnter: admin, name: 'licensing', component: () => import('@/components/licensing.vue') }, { path: '*', name: '404', component: require('@/pages/404.vue').default } ] }) Mi problema ahora es el siguiente, si hay una entrada localStorage.getItem('datacollector') solo debería apuntar a la ruta /datacollector y /logout . Entonces, cuando inicia sesión, la página de inicio de sesión lo lleva a la ruta /datacollector . Pero también debería poder llamar a logout . Para los demás usuarios, debería ser que se les permita llamar a todo. ¿Cómo ajusto la guard de función? No importa lo que intente, siempre termino con un bucle. Gracias.
Suponiendo que desea enviar al usuario a la ruta /datacollector desde cualquier ruta, si hay una entrada para localStorage.getItem('datacollector') , excepto para la ruta /logout .
Simplemente puede verificar to.path y redirigir al usuario en consecuencia:
function guard (to, from, next) { if (localStorage.getItem('jwt')) { if (localStorage.getItem('datacollector')) { if (to.path != '/datacollector' && to.path != '/logout'){ next('/datacollector'); } else { next(); } } else { next(); } } else { next('/login') } }