Is It Okay to Have Multiple beforeEach Guards ?

[loic-bellinger]

Hi

I'm working on a Vue/Vite/Vue router project where I need to perform multiple tasks in my beforeEach guards, such as setting page metadata and handling authentication using Keycloak. I want to make the guards efficient, especially avoiding unnecessary checks in non-production environments. Here's my current approach:

if (import.meta.env.PROD) {
  router.beforeEach(async (to) => {
    if (!router.keycloak.authenticated) {
      await router.keycloak.login()
    }
  })
}

router.beforeEach(async (to) => {
  setPageTitle(to.meta.title)
  setPageDescription(to.meta.description)
})

My Questions:

• Is it okay to have multiple beforeEach guards? Does Vue Router handle these sequentially without any performance or logical issues?
• Are there better patterns to ensure the guard is only active in production without duplicating unnecessary logic in development?

I don't think combining all logic into a single beforeEach guard with conditional branches would be more efficient or readable, but i'd like to have your opinion.

Thanks!

[Deckluhm]

Is it okay to have multiple beforeEach guards? Does Vue Router handle these sequentially without any performance or logical issues?

From the docs:

Global before guards are called in creation order, whenever a navigation is triggered.

https://router.vuejs.org/guide/advanced/navigation-guards.html#Global-Before-Guards

Are there better patterns to ensure the guard is only active in production without duplicating unnecessary logic in development?

I'm not sure I understand what you mean by "without duplicating unnecessary logic in development"? You mean using another approach than the if (import.meta.env.PROD) condition?

To my knowledge this is the most standard approach for this, and this is pretty efficient from a performance standpoint because most bundlers will remove that code if condition is false (so here in development environment).

I don't think combining all logic into a single beforeEach guard with conditional branches would be more efficient or readable, but i'd like to have your opinion.

I think it's personal preference and both can be pretty readable as long as you just have simple function calls (and not verbose, complex, hard-to-read code).

Regarding the performance impact of using a single vs multiple beforeEach... there probably is an extremely tiny one but so small that it's not worth considering. Code readability is way more important than this small performance differences.

--

So to make it short:

• beforeEach guards are resolved sequentially (according to documentation)
• import.meta.env.PROD condition is the most standard way to do it
• Single vs multiple beforeEach... choose the one you find the most readable

[posva]

My only addition is that I personally prefer having multiple guards for readability.

[loic-bellinger]

Great answer. Thanks a lot.