Nuxt•3w ago

protect dynamic routes in the middleware

Hello! I want to protect routes such as /users/[id] in one middleware file, can I do it in a simple way? What I am doing is

export const uuidRegExp = /[0-9a-fA-F]{32}/


const routesRegExp = [
    new RegExp(`^/api/users/${uuidRegExp.source}/`)
  ]

  if (routesRegExp.some(regExp => regExp.test(event.path))) {
    await authorizeSelf(event)
  }

export const uuidRegExp = /[0-9a-fA-F]{32}/


const routesRegExp = [
    new RegExp(`^/api/users/${uuidRegExp.source}/`)
  ]

  if (routesRegExp.some(regExp => regExp.test(event.path))) {
    await authorizeSelf(event)
  }

But I don't really like this idea and I can't use getRouterParam(event, 'id') in the middleware. I'm looking for suggestions and ideas. Thanks! ✌️

6 Replies

kapa.ai•3w ago

Hi @Yandiro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To protect dynamic routes like /users/[id] in Nuxt 3, you can use route middleware. The typical approach is to define a middleware file (e.g., middleware/auth.ts) and apply it to the relevant pages or globally. In the middleware, you can access the route parameters directly using the to argument provided to defineNuxtRouteMiddleware, which is much simpler and more idiomatic than using regular expressions on the path. Here's a simple example of how you can protect all /users/[id] routes:

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  // Check if the route matches /users/[id]
  if (to.name === 'users-id') { // Adjust this to your actual route name
    const id = to.params.id
    // Perform your authorization logic here
    if (!isAuthorized(id)) {
      return navigateTo('/login')
    }
  }
})

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  // Check if the route matches /users/[id]
  if (to.name === 'users-id') { // Adjust this to your actual route name
    const id = to.params.id
    // Perform your authorization logic here
    if (!isAuthorized(id)) {
      return navigateTo('/login')
    }
  }
})

You can then apply this middleware to your dynamic user page:

// pages/users/[id].vue
definePageMeta({
  middleware: ['auth']
})

// pages/users/[id].vue
definePageMeta({
  middleware: ['auth']
})

This approach leverages Nuxt's routing and parameter extraction, so you don't need to manually parse the path or use regular expressions. If you want to protect multiple dynamic routes, you can expand the logic in your middleware to check for other route names or patterns as needed. If you want to apply the middleware globally, you can name your file auth.global.ts and place it in the middleware directory. This will run the middleware on every route navigation, and you can then selectively apply your logic based on the route name or params. Note: If you are working with API routes (in server/api/), route middleware does not apply—middleware only runs during page navigation (Vue Router), not for API routes. For API protection, you need to use event handlers or server middleware instead docs: clarify route middleware doesn't affect API routes. If you are using server middleware or API routes and need to extract parameters, you may need to continue using regular expressions or a custom parameter extraction utility, as the standard route middleware tools are not available in that context. In summary:
- For page routes, use defineNuxtRouteMiddleware and access to.params. - For API/server routes, your current approach (regex) is necessary, as Nuxt's route middleware does not run there. Let me know if you need a more specific example for API routes or further clarification! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@566848239761096730> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

YandiroOP•3w ago

How about server side/API routes? export default defineEventHandler(async (event) => { const { user } = await getUserSession(event) if (user) { // User is signed in, allow access return } /** Routes the user must be signed in to access. Profile selection is not required */ const routesRegExp: RegExp[] = [ new RegExp('/api/auth') ] if (routesRegExp.some(regExp => regExp.test(event.path))) { throw createError({ statusCode: 401, message: 'Unauthorized' }) } }) @kapa.ai Are you there?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To protect dynamic routes like /users/[id] in Nuxt, the recommended approach is to use route middleware and leverage the route parameters provided by Nuxt, rather than parsing the path with regular expressions. In Nuxt 3, you can define a middleware (e.g., middleware/auth.ts) and access the route parameters directly using the to argument in defineNuxtRouteMiddleware. For example:

export default defineNuxtRouteMiddleware((to, from) => {
  // Check if the route matches the dynamic user route
  if (to.name === 'users-id') { // Adjust this to your actual route name
    const id = to.params.id
    // Your authorization logic here
    if (!isAuthorized(id)) {
      return navigateTo('/login')
    }
  }
})

export default defineNuxtRouteMiddleware((to, from) => {
  // Check if the route matches the dynamic user route
  if (to.name === 'users-id') { // Adjust this to your actual route name
    const id = to.params.id
    // Your authorization logic here
    if (!isAuthorized(id)) {
      return navigateTo('/login')
    }
  }
})

You can then apply this middleware to your dynamic user page:

// pages/users/[id].vue
definePageMeta({
  middleware: ['auth']
})

// pages/users/[id].vue
definePageMeta({
  middleware: ['auth']
})

This method is simple and leverages Nuxt's built-in routing and parameter extraction, so you don't need to use regular expressions or manually parse the path. This approach is also highlighted in several community answers as the idiomatic way to handle route protection in Nuxt middleware, using to.params to access dynamic parameters directly How do I access useState inside middleware in Nuxt 3?. Note: If you are trying to protect API routes (e.g., in server/api/), Nuxt's route middleware does not apply—middleware only runs during page navigation, not for API routes docs: clarify route middleware doesn't affect API routes. For API routes, you will need to continue using your current approach or similar logic. If you need to protect dynamic page routes, using to.params in route middleware is the recommended and simplest way. If you need to protect API routes, your regex approach is necessary due to the lack of route parameter extraction in that context. If you need more details or a specific example for API routes, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@566848239761096730> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

YandiroOP•3w ago

Great answer for FE routes, not for BE routes 🙂

Gaming

Programming

protect dynamic routes in the middleware

Did you find this page helpful?