El archivo de mi enrutador verifica qué rol está conectado:
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAdmin)) { if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "admin"){ next() return } next('/auth/login') }else if (to.matched.some(record => record.meta.requiresStaff)) { if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "staff"){ next() return } next('/auth/login') }else { next() } })y mi enrutador de administrador es:
const adminRoutes = [ { path: '/dashboard', name: 'admin.dashboard.index', component: () => import( /* webpackChunkName: "admin.dashboard.index" */ '@/views/administrator/dashboard/Index.vue'), meta: { requiresAdmin: true, requiresStaff: true, layout: 'default' }, /* Look At this Line */ }, // Article Route { path: '/article', name: 'admin.article.index', component: () => import( /* webpackChunkName: "admin.article.index" */ '@/views/administrator/article/Index.vue'), meta: { requiresAdmin: true, layout: 'default' }, }, ] Ya agregué requiresAdmin: true, requiresStaff: true , en el campo meta. Pero cuando inicio sesión con el administrador, funciona. Pero cuando inicio sesión con la cuenta del personal, no puedo acceder a la página del panel.
Intente puede probar con un rol para ambos:
else if (to.matched.some(record => record.meta.requiresAdminStaff)) { if(VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "staff" || VueJwtDecode.decode(localStorage.getItem('accessToken')).sub == "admin"){ next() return } next('/auth/login')luego en las rutas de administración:
{ path: '/dashboard', name: 'admin.dashboard.index', component: () => import( /* webpackChunkName: "admin.dashboard.index" */ '@/views/administrator/dashboard/Index.vue'), meta: { requiresAdminStuff: true, layout: 'default' }, /* Look At this Line */ },El problema es que cuando inicia sesión como personal y accede a la página del panel, esta condición sigue siendo cierta: if (to.matched.some(record => record.meta.requiresAdmin)) . Pero como tiene el staff de permisos, es redirigido a la página de inicio de sesión.
Una solución sería definir los roles permitidos por página de forma explícita.
const adminRoutes = [ { path: '/dashboard', name: 'admin.dashboard.index', component: () => import( /* webpackChunkName: "admin.dashboard.index" */ '@/views/administrator/dashboard/Index.vue'), meta: { roles: ['admin', 'staff'], layout: 'default' }, }, // Article Route { path: '/article', name: 'admin.article.index', component: () => import( /* webpackChunkName: "admin.article.index" */ '@/views/administrator/article/Index.vue'), meta: { roles: ['admin'], layout: 'default' }, }, ] router.beforeEach((to, from, next) => { const currentRole = VueJwtDecode.decode(localStorage.getItem('accessToken')).sub const hasPublicAccess = !record.meta.roles || record.meta.roles.length === 0 if (hasPublicAccess || to.matched.some(record => record.meta.roles.includes(currentRole)) { next() return } next('/auth/login') return })