What is the right way to do pages structure on site with authorization?
I have a nuxt project with authorization, there is two middlewares auth
, no-auth
that redirect users to specified pages if they don't have an access to page where this middlewares are included
I have the following pages directory structure:
| pages
--| user
----| userPage.vue
--| guest
----| guestPage.vue
--| index.vue
In every page in user
directory there is middleware auth
and no-auth
in every page in guest
dir
So i added this to my nuxt.config.js
:
{
router: {
extendRoutes(routes, resolve) {
return parseRoutes(routes);
function parseRoutes(routes) {
routes.forEach((route) => {
route.path = route.path.replace(/\/(user|guest)\/?/, '/');
if (route.children) {
parseRoutes(route.children);
} else {
route.name = route.name.replace(/(user|guest)-/, '');
if (/^(user|guest)$/.test(route.name)) { route.name = 'index'; }
}
});
}
}
}
}
After that the routes are handled correct, and page /guestPage
is the page from /guest/guestPage
and doesn't available for registered users, and conversely /userPage
is tha page from /user/userPage
and doesn't available for guests.
But i feel that i do wrong and there is more easy solution, maybe even "out of the box" that allows to make something like that in automatic way, without adding middleware to each page inside of guest
or user
directory and extending route to make page /user/userPage.vue
be available as /userPage
etc.