I have certain app routes that are supposed to be restricted to admins only. I've added requiresAdmin: true, to the meta of those routes, but for some reason it doesn't prevent other users from accessing them.
Code
Note: I've included comments in the code for better understanding.
const router = new VueRouter({
mode: "history",
routes: [
// ADMIN ROUTES
{
path: '/export',
name: 'ExportXML',
component: ExportXML,
meta: {
requiresAuth: true,
requiresAdmin: true, // only admins can see this page
layout: 'admin',
name: 'Export XML',
}
},
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isLoggedIn) {
next({
name: 'login'
})
} else {
next()
}
}
if (to.matched.some(record => record.meta.requiresAdmin)) {
// first make sure getter can get logged user data
if (store.getters.loggedUser && !store.getters.loggedUser === undefined) {
// then check if loged user "type" is admin (any other possebilities are denied)
if (!store.getters.loggedUser.type === 'admin' || store.getters.loggedUser.type === '' || store.getters.loggedUser.type === null || store.getters.loggedUser.type === undefined || store.getters.loggedUser.type === 'worker') {
next({
name: 'dashboard'
})
} else {
next()
}
}
}
else {
next()
}
});
router.afterEach((to, from) => {
Vue.nextTick(() => {
document.title = to.pageTitle || 'Testing Site';
});
});
export default router;
Can anyone explain why a user with the type of worker is still able to access the exports page, even though it is meant to be restricted to admins only?