BÀI 21: MIDDLEWARE NÂNG CAO – PHÂN QUYỀN VÀ REDIRECT THÔNG MINH

Tiếp theo là Bài 21 – Middleware nâng cao: phân quyền và redirect thông minh trong NuxtJS. Đây là phần rất quan trọng khi bạn xây dựng hệ thống có người dùng đăng nhập, nhiều vai trò như admin, editor, user thông thường. Middleware giúp kiểm soát quyền truy cập từng trang theo logic của bạn.

---

1. Tình huống thực tế

Bạn có hệ thống gồm các khu vực:

• /admin: chỉ dành cho admin
• /editor: dành cho admin và editor
• /dashboard: cho mọi user đã đăng nhập

Bạn cần kiểm tra vai trò (role) của user → nếu không đủ quyền → redirect sang trang phù hợp.

---

2. Giả lập lưu role vào cookie sau khi đăng nhập

Sau khi user đăng nhập thành công:

📋 CopyuseCookie('auth_token').value = 'abc123'
useCookie('user_role').value = 'admin' // hoặc 'editor', 'user'

---

3. Tạo middleware kiểm tra quyền hạn

File: middleware/role-check.ts

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

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

  // Bảo vệ /admin – chỉ cho admin
  if (to.path.startsWith('/admin') && role !== 'admin') {
    return navigateTo('/unauthorized')
  }

  // Bảo vệ /editor – cho admin và editor
  if (to.path.startsWith('/editor') && !['admin', 'editor'].includes(role)) {
    return navigateTo('/unauthorized')
  }
})

---

4. Áp dụng middleware cho từng trang

Trong pages/admin/index.vue:

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

Hoặc nếu layout admin.vue bao quanh nhiều trang:

📋 Copy<script setup>
definePageMeta({
  layout: 'admin',
  middleware: 'role-check'
})
</script>

---

5. Tạo trang /unauthorized.vue

Khi người dùng không đủ quyền, redirect đến đây:

📋 Copy<template>
  <div class="unauthorized">
    <h1>403 – Không có quyền truy cập</h1>
    <NuxtLink to="/">Quay về trang chủ</NuxtLink>
  </div>
</template>

---

6. Redirect thông minh sau login

Khi login thành công, redirect dựa theo role:

📋 Copyconst role = 'editor'

if (role === 'admin') {
  router.push('/admin')
} else if (role === 'editor') {
  router.push('/editor')
} else {
  router.push('/dashboard')
}

---

7. Nâng cao: Middleware gắn cho layout

Nếu tất cả các trang /admin/** dùng layout admin.vue, bạn có thể kiểm tra role ngay trong layout:

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

→ Tự động áp dụng middleware cho toàn bộ vùng admin

---

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

• Tạo middleware kiểm tra token & role
• Gắn middleware cho từng trang hoặc toàn layout
• Redirect đến /unauthorized nếu không đủ quyền
• Xử lý phân quyền: admin, editor, user
• Điều hướng thông minh sau khi đăng nhập

---

Bài tập mở rộng

1. Tạo thêm role guest và phân quyền rõ ràng
2. Thêm trạng thái loading khi middleware đang kiểm tra
3. Tạo route /editor/index.vue có sidebar riêng
4. Viết middleware riêng cho mỗi vai trò nếu cần