Nâng CaoVue.js iconVue.js

Nuxt 3 middleware — route middleware vs server middleware?

Nuxt 3 có hai loại middleware khác nhau:

Route Middleware (client + server): chạy khi navigating, kiểm soát routing:

typescript
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const { loggedIn } = useAuth()
  if (!loggedIn.value && to.meta.requiresAuth) {
    return navigateTo('/login')
  }
})

// Dùng trong page
// pages/dashboard.vue
definePageMeta({ middleware: 'auth' })

// Inline middleware
definePageMeta({
  middleware: [
    async (to) => {
      if (!canAccess(to)) return abortNavigation()
    }
  ]
})

Server Middleware (server-only): chạy trên server trước mọi request, giống Express middleware:

typescript
// server/middleware/logger.ts
export default defineEventHandler((event) => {
  console.log(`[${event.method}] ${event.path}`)
  // Không return gì → tiếp tục pipeline
})

// server/middleware/rate-limit.ts
export default defineEventHandler(async (event) => {
  const ip = getRequestIP(event)
  const count = await redis.incr(`rate:${ip}`)
  if (count > 100) {
    throw createError({ statusCode: 429, message: 'Too Many Requests' })
  }
})

Xem toàn bộ Vue.js cùng filter theo level & chủ đề con.

Mở danh sách Vue.js