时间戳

首页 > 解决方案 > Nuxt - 防止直接访问页面目录 url

nuxt.js - Nuxt - 防止直接访问页面目录 url

问题描述

这是我的 Nuxt 的页面结构：

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

我已将布局和中间件设置users.vue为在其子页面中通用。
我不希望任何人直接访问users页面 url，当有人输入时example.com/users，我希望它返回 404 错误。
我只希望它的子页面可以访问。( example.com/users/login& ...)
我能做什么？
谢谢

标签： nuxt.js

解决方案

为获得最佳实践，请先不要直接使用 url 名称试试这个

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

现在制作一个中间件 guest.js

来宾.js

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

将此添加到登录页面

middleware: 'guest'

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

nuxt auth 模块 使默认 auth 模块

只需将其用于用户页面

middleware: 'auth'

或者您可以使用 make new middleware 作为名称进行自定义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>

希望这可以帮助

推荐阅读