Vue Global Route Guard 使用beforeEach 不触发

Question

我有一个路由守卫在 calling it per-route using beforeEnter but does not work when calling it as a global route guard 使用 beforeEach 时工作。

在我顶部的代码中，您可以看到调用 /dashboard 重定向时有效的示例。

但是，如果我尝试使用 beforeEach 在代码底部的所有路由上全局调用它，它什么也不做。

我做错了什么？

P.S。我正在使用 TypeScript。

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import store from "@/store";
import { Mutations, Actions } from "@/store/enums/StoreEnums";
import { Auth0 } from "@/auth";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/dashboard",
    component: () => import("@/layout/Layout.vue"),
    //beforeEnter: Auth0.routeGuard, // <--- THIS WORKS
    children: [
      {
        path: "/dashboard",
        name: "dashboard",
        component: () => import("@/views/Dashboard.vue"),
      },
      {
        path: "/add-post",
        name: "add-post",
        component: () => import("@/views/Builder.vue"),
      },
    ],
  },
  {
    // the 404 route, when none of the above matches
    path: "/404",
    name: "404",
    component: () => import("@/views/crafted/authentication/Error404.vue"),
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/404",
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach(() => {

  store.commit(Mutations.RESET_LAYOUT_CONFIG);

  Auth0.routeGuard; // <--- THIS DOES NOT WORK

  store.dispatch(Actions.VERIFY_AUTH);

  // Scroll page to top on every route change
    setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100);

});

export default router;

Answer 1

router.beforeEach(() => { Auth0.routeGuard; }) 没有效果，因为 Auth0.routeGuard 函数实际上并未在该语句中被调用。调用函数时通常用括号括住任何参数（例如，Auth0.routeGuard(arg1, arg2, arg3)）。

解决方案

需要使用 navigation guard arguments from router.beforeEach:

调用路由守卫

import { RouteLocationNormalized } from 'vue-router'
⋮
router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: Function) => {
  ⋮
  Auth0.routeGuard(to, from, next)
  ⋮
})

Vue Global Route Guard 使用beforeEach 不触发

Vue Global Route Guard using beforeEach does not trigger

typescript

vue.js

vue-router

vuejs3

vue-router4

解决方案