BÀI 15: ĐĂNG NHẬP – AUTH CƠ BẢN BẰNG COOKIE

Chúng ta đến với Bài 15 – Authentication cơ bản với Cookie trong NuxtJS. Đây là nền tảng để bạn xây dựng hệ thống người dùng: đăng nhập, kiểm tra trạng thái đăng nhập, bảo vệ route và xử lý logout.

---

1. Mục tiêu bài học

• Gửi thông tin đăng nhập đến API
• Nhận token → lưu vào cookie
• Kiểm tra trạng thái đăng nhập qua cookie
• Logout bằng cách xóa cookie

---

2. Tạo form đăng nhập (ví dụ dùng API reqres.in)

📋 Copy<script setup>
const email = ref('')
const password = ref('')
const message = ref('')
const router = useRouter()

async function login() {
  try {
    const res = await $fetch('https://reqres.in/api/login', {
      method: 'POST',
      body: {
        email: email.value,
        password: password.value
      }
    })

    // Lưu token vào cookie
    const cookie = useCookie('auth_token')
    cookie.value = res.token

    message.value = 'Đăng nhập thành công'
    router.push('/admin')
  } catch (err) {
    message.value = 'Sai thông tin đăng nhập'
  }
}
</script>

<template>
  <form @submit.prevent="login">
    <input v-model="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Mật khẩu" />
    <button type="submit">Đăng nhập</button>
    <p>{{ message }}</p>
  </form>
</template>

---

3. Kiểm tra đăng nhập trong middleware

Tạo middleware middleware/only-auth.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-auth'
})
</script>

---

4. Hiển thị tên người dùng / avatar (giả lập)

Giả sử bạn dùng useCookie('user') để lưu thông tin user:

📋 Copyconst user = useCookie('user')
user.value = { name: 'Johnny', avatar: 'https://i.pravatar.cc/40' }

→ Trong layout:

📋 Copy<script setup>
const user = useCookie('user')
</script>

<template>
  <div v-if="user">
    Xin chào, {{ user.name }}
    <img :src="user.avatar" />
  </div>
</template>

---

5. Logout – Xóa cookie

Tạo button logout ở bất kỳ đâu:

📋 Copy<script setup>
const router = useRouter()
function logout() {
  useCookie('auth_token').value = null
  useCookie('user').value = null
  router.push('/')
}
</script>

<template>
  <button @click="logout">Đăng xuất</button>
</template>

---

6. Cấu hình cookie nếu cần

Bạn có thể cấu hình cookie khi lưu:

📋 Copyconst token = useCookie('auth_token', {
  maxAge: 60 * 60 * 24, // 1 ngày
  path: '/',
  sameSite: 'lax'
})
token.value = res.token

---

7. Lưu ý bảo mật (trong thực tế)

• Token nên được lưu bằng HttpOnly cookie (phải xử lý từ server)
• Tránh lưu thông tin nhạy cảm (email, password) trên client
• Cần có route /api/logout ở backend để hỗ trợ xử lý bảo mật cao hơn

---

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

• Tạo form đăng nhập gửi đến API
• Lưu token vào cookie bằng useCookie()
• Kiểm tra token trong middleware để bảo vệ route
• Hiển thị thông tin user
• Logout bằng cách xóa cookie

---

Bài tập mở rộng

1. Tạo pages/login.vue và pages/admin/index.vue
2. Sau khi đăng nhập, lưu auth_token và user.name vào cookie
3. Hiển thị tên người dùng sau khi đăng nhập
4. Làm nút Logout và redirect về /login