CODEWITHSUNDEEP
nuxt.js
Saman
Saman

Reputation: 601

Nuxt - prevent direct access to page directory url

It's my Nuxt's page structure:

pages/
      users.vue
      users/
           login.vue
           register.vue
           forgot-password.vue

I have set layout and middleware in users.vue to be common in its sub pages.
I don't want anyone to direct access to users page url and when someone enter example.com/users , I expect it returns 404 error.
I only want it's sub pages to be accessible. (example.com/users/login & ...)
What can I do?
Thanks

Upvotes: 2

Views: 4797

Answers (1)

sid heart
sid heart

Reputation: 1149

for best practice don't make direct url name first try this

pages/
      users/
           index.vue //this will your user.vue
           login
              index.vue
           register
              index.vue
           forgot-password
              index.vue

now make a middleware guest.js

guest.js

export default function({ app, redirect }) {
  if (app.$auth.loggedIn) {
    return redirect('/');
  }
}

add this to login page

middleware: 'guest'

this will check if user already logged in redirect to '/' or you can edit route to any

nuxt auth module make default auth module

just use this to users page

middleware: 'auth'

or you can customize with make new middleware as name auth.js

export default function({ app, redirect }) {
  if (!app.$auth.loggedIn) {
    return redirect('/login');
  }
}

lets take a look on 404 page

you can make static page like /users but best practice make dynamic route /username

so your data structure looks like this

pages/
      _username
         index.vue // Dynamic Route
      users/
           index.vue //this will your user.vue
           login
              index.vue
           register
              index.vue
           forgot-password
              index.vue

now in your _username page

<template></template>

<script>
export default {
  asyncData({ $axios, params, error }) {
    return $axios
      .get(`/user/${params.username}`)
      .then(res => {
        return { user: res.data.data };
      })
      .catch(e => {
        error({ statusCode: 404, message: 'Page not found' });
      });
  },
};
</script>

<style>
</style>

Hope this helps

Upvotes: 4

Related Questions