How to redirect in nuxt3 refore routing completed

Question

I'm trying to setup a boilerplate in nuxt3 which checks before each request if the access to the current path/route is allowed.

Currently I've tested two different approches but both didn't work as expected:

1. using a middleware/test.ts file and calling it with middleware: ["test"].
2. using a composables/useFoo.ts file and calling it with const foo = useFoo() inside of app.vue

Both solutions have an empty exported default function which only contains a console.log statement. The statement will be printed to the console at the initial load but not before/after change the route after clicking a NuxtLink. Is there any other solution to validate if the requested path is allowed including navitation with NuxtLink?

Answer 1

Im having a similar problem and looking for the same solution i guess , extending pages with (hooks) is the only thing i found that can meddle with the routes

hooks: {
    'pages:extend' (pages) {
      pages.push(
        {
          "name": "index",
          "path": "/",
          "children": [],
          "file": resolve(__dirname, 'pages/test.vue')
        },
      )
    }
  },

First thing i noticed is this can overtake behaviour nuxts own vue-router thats automatically build-up using my pages directory. But the second thing i noticed is unlike exendRoutes i wont take the following parameter: "beforeEnter: [fn()],

So i still can't figure out how to match or redirect in the routing lifecycle....

But my issue was the same as yours i need to guard navigation... in my case. I got nested pages e.g. :

• [_Category] > [_BRAND] > products
• [_Category] > [_GROUP] > products

Vue-Router automatic router setup allways takes me to brand... I need a way to check the param and navigate to the corresponding route brand/group.

This seemed like a solution : defineNuxtRouteMiddleware, addRouterMiddleWare, definepagemeta. But i couldnt import addRouterMiddleWare, definepagemeta.

Maybe one of you has more luck ..