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/page。

我也尝试直接推送到登录页面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" });
  },

这样，用户会自动重定向到登录，没有任何问题。