Static GitHub Issues

[2656] The right way to do pages structure on site with authorization

prev: AWS Failed to execute 'setRequestHeader' on 'XMLHttpRequest' with Evaporate.js
next: Accessing css links on html template

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.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2311">#c2311</a>)</em></sub></div>