BÀI 14: MIDDLEWARE & BẢO VỆ ROUTE TRONG NUXT

Tiếp theo là Bài 14 – Middleware và bảo vệ route trong NuxtJS. Middleware cho phép bạn kiểm soát luồng truy cập trang – ví dụ: kiểm tra đăng nhập, phân quyền, redirect nếu không đủ điều kiện.

---

1. Middleware là gì?

• Middleware là các hàm chạy trước khi trang được render
• Dùng để kiểm tra điều kiện → quyết định cho vào trang hay redirect
• Có thể áp dụng cho toàn trang (global) hoặc từng page riêng (route middleware)

---

2. Tạo middleware cơ bản

Tạo file: middleware/auth.global.ts

📋 Copyexport default defineNuxtRouteMiddleware((to, from) => {
  const isLoggedIn = useCookie('auth_token').value

  // Kiểm tra nếu user chưa login và đang truy cập /admin
  if (!isLoggedIn && to.path.startsWith('/admin')) {
    return navigateTo('/login')
  }
})

• useCookie() kiểm tra cookie đăng nhập
• navigateTo() để redirect
• Tên file có .global.ts để áp dụng cho mọi trang

---

3. Middleware áp dụng riêng từng trang

Nếu bạn chỉ muốn middleware cho một page, hãy:

Tạo file: middleware/only-admin.ts

📋 Copyexport default defineNuxtRouteMiddleware(() => {
  const token = useCookie('auth_token').value

  if (!token) {
    return navigateTo('/login')
  }
})

Sau đó trong pages/admin/index.vue:

📋 Copy<script setup>
definePageMeta({
  middleware: 'only-admin'
})
</script>

---

4. Middleware async

Bạn có thể gọi API, ví dụ kiểm tra token hợp lệ:

📋 Copyexport default defineNuxtRouteMiddleware(async () => {
  const token = useCookie('auth_token').value

  const valid = await $fetch('/api/validate-token', {
    method: 'POST',
    body: { token }
  })

  if (!valid) {
    return navigateTo('/login')
  }
})

---

5. Middleware client-only

Mặc định middleware chạy cả server & client. Nếu muốn chỉ chạy phía client:

📋 Copyexport default defineNuxtRouteMiddleware((to, from) => {
  if (process.client) {
    // logic client-side
  }
})

---

6. Dùng middleware để ngăn vào trang đã login

Ví dụ: Nếu đã login, không cho vào /login nữa

📋 Copyexport default defineNuxtRouteMiddleware(() => {
  const token = useCookie('auth_token').value
  if (token) {
    return navigateTo('/')
  }
})

Áp dụng cho pages/login.vue:

📋 Copy<script setup>
definePageMeta({
  middleware: 'guest-only'
})
</script>

---

7. Dùng nhiều middleware cùng lúc

📋 Copy<script setup>
definePageMeta({
  middleware: ['only-admin', 'other-check']
})
</script>

Nuxt sẽ chạy lần lượt các middleware được liệt kê.

---

Bạn đã học được

• Tạo middleware toàn cục hoặc riêng từng trang
• Kiểm tra cookie, gọi API trong middleware
• Redirect người dùng nếu chưa đăng nhập
• Bảo vệ các route như /admin khỏi truy cập trái phép
• Sử dụng nhiều middleware cùng lúc để phân quyền nâng cao

---

Bài tập mở rộng

1. Tạo middleware only-auth.ts → bảo vệ /admin
2. Tạo middleware guest-only.ts → chặn user đã login truy cập /login
3. Tạo cookie giả lập auth_token sau khi login thành công để test