vue-router 中 Javascript 函數的問題

Question

我有一個function給用戶授權，所以用戶對某些組件有限制。 function 與'beforeEnter'導航守衛配合得很好。 如何在每個 router-guard 之前在路由器中使用/寫入相同的 function？

我嘗試在 beforeEach 中編寫 function，但 javascript 函數（forEach、includes、..）在router.beforeEach中不起作用。

這是function授權

function authorizeUser(to) {
  const currentUser = store.getters["auth/isCurrentUser"];
  console.log(currentUser);
  currentUser.teams.forEach((team) => {
    const validPermissions = team.permissions.filter((item) => { return to.meta.neededPermissions.includes(item.permissionType); }); //returns array of objects
    const mappedValidPermissions = validPermissions.map((item) => { return item.permissionType;  });// returns array with permissionType
    // returned matched permissions
    console.log(
      JSON.stringify(to.meta.neededPermissions),
      JSON.stringify(mappedValidPermissions),  
    );
    if (!to.meta.neededPermissions.every(i=>mappedValidPermissions.includes(i))) {
      router.push({ path: "/:notFound(.*)" });     
    }  
  });
}

這是router.beforeEach nav-guard-

router.beforeEach((to, from, next) => { 
  if (to.meta.requiresAuth && !store.getters["auth/isLoggedIn"]) {
    next({
      name: "Authentication",
      params: {
        desiredRoute: to.fullPath,
      },
    });
  } else {
    next();
  }
});

如何利用上面的 function 以及 beforeEach 中的if condition ，以便我可以在授予訪問權限之前檢查每個路由器鏈接？

Answer 1

您使用的是什么版本的 vue-router。 當前版本的beforeEach簽名已更改。 您可以選擇返回false或路由位置 object，而不是調用next 。