如何在 beforeRouterEnter 守衛中調用 next()

Question

我已經被這個問題困了幾個小時了。 我正在使用 Vue3

我正在嘗試使用beforeRouterEnter守衛來檢查當前登錄的用戶角色，並基於此將用戶重定向到適當的路線。

提交登錄表單（從登錄頁面）后， userRoleId存儲在 vuex 中，我被重定向到主頁。 主頁有以下腳本：

beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$store.getters.userRoleId == USER) {
        next("/us");
        return;
      }
      if (vm.$store.getters.userRoleId == ADMIN) {
        next("/ad");
        return;
      }
      if (vm.$store.getters.userRoleId == SUPER_ADMIN) {;
        next("/sa");
        return;
      }
        next();
    });
  },

我不斷收到警告“從“/”到“/”時，在一個導航守衛中多次調用“下一個”回調。 它應該在每個導航守衛中被調用一次。 這將在生產中失敗。

錯誤出現在：我沒有登錄並被移動到 else 塊（只要到達next()行），或者當我登錄並從內部登錄時， if語句next()為 true 時立即next()到達 - 導致重定向不起作用。

Answer 1

在next回調中調用next是錯誤的。 那個時候導航已經完成了，這應該是用router.push重定向，這種邏輯屬於組件mounted （ next回調在它之后運行）而不是路由器保護。

這里不應該有重定向，因為它們是不必要的。 存儲是全局的，可以直接導入而不是在vm訪問。

它應該是：

import store from '...';
...
beforeRouteEnter(to, from, next) {
  if (store.getters.userRoleId == USER) {
    next("/us");
  } else if ... {
    ...
  } else {
    next();
  }
},