Vue 路由器重定向到 404 而不是登录页面 (Nuxt.js)

Question

我在带有 Vue 路由器的 Nuxt.js 项目中遇到了一个奇怪的行为：我正在尝试使用放置在 route.js 插件中的路由守卫，它在 nuxt.config.js 插件部分中注册，看起来像这：  app.router.beforeEach((to, from, next) => {    to.name !== "login" && app.store.getters["session/token"] === ""      ? next({ name: "login" })      : next();  });这个想法是，如果用户刷新页面，他会丢失存储在 Vuex 会话模块中的令牌，因此他应该被重定向到登录页面。奇怪的行为是——路由守卫实际上工作，它重定向到 /login url，但它显示 404 页面——如果我再次刷新页面，它正确地重定向到 /login url/页面。我也尝试过直接推送到登录页面app.router.push({ name: "login" })，但无济于事。我所做的解决方法是在 404 页面中添加重定向：  beforeCreate() {    this.$router.push({ name: "login" });  },但我对此并不满意...有谁知道发生了什么事？

Answer 1

前段时间，我在一个 Vue.JS 项目中创建了类似的行为。这是我的代码，也许它可以帮助您找到错误。

// checks if user is authenticated before displaying the page

// if not, reroutes to the login page

router.beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.requiresAuth)) {

    if (store.getters.isAuthenticated) {

      next();

      return;

    }

    next('/login');

  } else {

    next();

  }

});

元字段定义是否需要身份验证。在下面的代码片段中，您可以看到它是如何使用的。

const routes = [

  {

    path: '/',

    component: DashboardLayout,

    redirect: '/login',

    children: [

      {

        path: 'dashboard',

        name: 'Dashboard',

        component: Dashboard,

        meta: {

          requiresAuth: true,

        },

      }

    ]

  }

];

（希望括号是正确的）

Answer 2

在这一点上，我认为没有人有兴趣回答我的问题，所以我将只发布我所做的解决方法：

在应用程序的 404 页面中，注释掉整个模板内容（因此，如果用户连接速度慢并被重定向到 404，他将看不到任何内容）。我还在之前创建的生命周期挂钩中添加了一个重定向：

  beforeCreate() {
      this.$router.push({ name: "login" });
  },

这样，用户会自动重定向到登录名而不会出现任何问题。