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" });
  },

這樣，用戶會自動重定向到登錄，沒有任何問題。