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

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

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

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>

希望这会有所帮助