Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mirik-k opened this issue Jan 21, 2018 · 3 comments
Closed

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

mirik-k opened this issue Jan 21, 2018 · 3 comments
Labels

Comments

@mirik-k
Copy link

mirik-k commented Jan 21, 2018

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.

This question is available on Nuxt.js community (#c2311)
@BatuhanK
Copy link

BatuhanK commented Jan 21, 2018

I think you can add meta: { requiresAuth: true } to your authentication required pages (leave untouched at others) and add a global middleware like below

export default function ({ store, route }) {
  const requiresAuth = route.meta.some(metaData => metaData.requiresAuth)
  
  // check requiresAuth bool and your store (authentication data) and redirect accordingly
}

@mirik-k
Copy link
Author

mirik-k commented Jan 21, 2018

@BatuhanK thanks for suggestion

@clarkdo clarkdo closed this as completed Jan 29, 2018
@lock
Copy link

lock bot commented Nov 3, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 3, 2018
@danielroe danielroe added the 2.x label Jan 18, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

4 participants