Vue Global Route Guard using beforeEach does not trigger

user_1526396 0
Viewed 835

I have a route guard that works when calling it per-route using beforeEnter but does not work when calling it as a global route guard using beforeEach.

In my code at the top you can see the example that works when calling the /dashboard redirect.

But if I try calling it globally on all routes down at the bottom of my code using beforeEach it does nothing.

What am I doing wrong?

P.S. I am using 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;
vue-router4 vue-router vuejs3 vue.js typescript
1 Answers

router.beforeEach(() => { Auth0.routeGuard; }) has no effect because the Auth0.routeGuard function is not actually being invoked in that statement. Functions are normally called with parentheses surrounding any arguments (e.g., Auth0.routeGuard(arg1, arg2, arg3)).

Solution

The route guard needs to be invoked with the navigation guard arguments from router.beforeEach:

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