Where to install Navigation Guards. Before Enter, Before Each, and After Each

[TomT15]

Right now I use the three navigation guards and since I'm trying to use the router/auto-routes im not sure how to implement them.

Originally they were added as such

{
          path: '/dealer',
          name: 'DealerDashboard',
          beforeEnter: (to, from) => {
            const jwtStore = useJWT();
            if (jwtStore.tokenPayload.Role === 'Admin') {
              return true
            };
            return { name: "UserDashboard", path: "/UserDashboard" }
},

but after some testing i learned if i add anything to my router/index.ts file it would completely break out how router/auto worked.

If possible a small example and explaining on where this code will go would be very appreciated. Thank you

[posva]

• beforeEnter(): https://uvr.esm.is/guide/extending-routes.html#definepage
• beforeEach() and afterEach() goes where you define the router instance

[TomT15]

Thank you for clarifying that.

I had tried some things out and ran into issues so originally I thought i was doing it wrong. Right now im having issues trying to access my store in the beforeEnter

definePage({
  beforeEnter: () => {
    const jwtStore = useJWT();
    if (jwtStore.tokenPayload?.Role === 'Admin') {
      return true;
    };
    return { name: "DealerDashboard", path: "/DealerDashboard" }
  }
})

Do you have any suggestions?

Right now its just saying useJWT is not defined

i did double check and make sure all the necessary imports were there.

[posva]

It’s not supported yet #317
Although you could use a dynamic import within the beforeEnter and that would work

[userquin]

@posva how about using another script with options api? should it work? script + script setup with beforeEach() and afterEach() guards in the script (I used this approach with vue 2 + antfu vue 2 script setup lib and is working)

[posva]

That works too