Vue路由器授权的路由仅在第一个路由上起作用

Question

我已经设置了带有meta的Vue路由器，用于身份验证和授权。

我的路线：

{
      path: "/applicationmanagement",
      name: "applicationmanagement",
      component: ApplicationManagement,
      meta: {
        requiresAuth: true,
        authorizeRoles: ["AdminTier1", "AdminTier2"]
      }
    },
    {
      path: "/passwordmanagement",
      name: "passwordmanagement",
      component: PasswordManagement,
      meta: {
        requiresAuth: true,
        authorizeRoles: ["AdminTier1"]
      }
    }

我的中间件：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (!store.getters.authenticated) {
      console.log("next /login");
      return next("/login");
    } else {
      console.log(store.getters.authenticatedUserRoles);
      console.log(to.meta.authorizeRoles);
      if (
        store.getters.authenticatedUserRoles.filter(element =>
          to.meta.authorizeRoles.includes(element)
        ).length > 0
      ) {
        console.log("next");
        next();
      } else {
        console.log("next /unauthorized");
        next("/unauthorized");
      }
    }
    next();
  } else {
    if (to.path === "/login") {
      if (store.getters.authenticated) {
        console.log("next /");
        next("/");
      }
    }
  }
  next();
});

当我尝试访问url/passwordmanagement时，我将重定向到url/unauthorized，但这只是第一次，如果我第二次尝试访问它，就让我完成。

在开发人员控制台中查看以下日志：

["USER"]
["AdminTier1"]
next /unauthorized

["USER"]
["AdminTier1"]
next /unauthorized

控制台日志在两个请求上显示相同的行为，但是第二次显示passwordmanagement。

如何进一步解决此问题？