Question

这是我Nuxt的页面结构：

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

我在users.vue中设置了布局和中间件，使其在其子页面中很常见。
我不希望任何人直接访问users页面的网址，当有人输入example.com/users时，我希望它返回404错误。
我只希望它的子页面可访问。（example.com/users/login和...）
我该怎么办？
谢谢

Answer 1

为了获得最佳实践，请不要先输入直接的网址名称

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

现在创建一个中间件guest.js

guest.js

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

将此添加到登录页面

middleware: 'guest'

这将检查用户是否已经登录重定向到'/'，或者您可以编辑到任何一个的路由

nuxt身份验证模块设为默认身份验证模块

仅将其用于用户页面

middleware: 'auth'

或者您可以使用新的中间件作为名称auth.js

进行自定义

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

让我们看一下404页

您可以制作/users之类的静态页面，但最佳做法是制作动态路由/username

所以您的数据结构如下

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

现在在您的_username页面中

<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>

希望这会有所帮助

Nuxt-防止直接访问页面目录URL

1 个答案: