อยากให้เว็บ Next.js ของเรามีระบบแบ่งสิทธิ์การเข้าถึง (RBAC – Role-Based Access Control) ไหม?
เช่น Admin ดูข้อมูลทั้งหมดได้, User ใช้งานปกติ, Guest เข้าได้เฉพาะบางหน้า
✅ รองรับ JWT Authentication
✅ ใช้ Middleware เช็ก Role ก่อนเข้าหน้าเว็บ
✅ มีตัวอย่าง API แยกสิทธิ์ Admin และ User
🎯 Role-based Authentication คืออะไร?
RBAC (Role-Based Access Control) คือ การกำหนดสิทธิ์ของผู้ใช้ตามบทบาท (Role) เช่น
- Admin 🛡️ – แก้ไขข้อมูลทุกอย่างได้
- User 👤 – ใช้งานฟีเจอร์ปกติ
- Guest 👥 – ดูข้อมูลบางอย่างได้
💡 เราจะใช้ JWT (JSON Web Token) ในการจัดการ Authentication & Role
🚀 1. ติดตั้งโปรเจกต์ Next.js และไลบรารี
เริ่มต้นด้วยการสร้างโปรเจกต์ Next.js และติดตั้งไลบรารีที่จำเป็น
npx create-next-app role-based-auth
cd role-based-auth
npm install jsonwebtoken bcryptjs cookie
- jsonwebtoken – ใช้สำหรับสร้างและตรวจสอบ JWT
- bcryptjs – ใช้เข้ารหัสรหัสผ่าน
- cookie – ใช้จัดการ Token ผ่าน Cookie
🔐 2. สร้างระบบ Authentication (JWT)
📌 สร้าง API Register (สมัครสมาชิก)
📌 ไฟล์: pages/api/auth/register.js
import bcrypt from "bcryptjs";
import jwt from "jsonwebtoken";
const users = []; // จำลองฐานข้อมูลใน Memory
export default async function handler(req, res) {
if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });
const { email, password, role } = req.body;
if (!email || !password || !role) return res.status(400).json({ error: "Missing fields" });
const hashedPassword = await bcrypt.hash(password, 10);
const newUser = { email, password: hashedPassword, role };
users.push(newUser);
res.json({ message: "User registered", user: { email, role } });
}
✅ สมัครสมาชิก พร้อมเก็บ role (เช่น admin หรือ user)
📌 สร้าง API Login (เข้าสู่ระบบ)
📌 ไฟล์: pages/api/auth/login.js
import bcrypt from "bcryptjs";
import jwt from "jsonwebtoken";
import { serialize } from "cookie";
const users = []; // ใช้ฐานข้อมูลจริงในโปรเจกต์จริง
export default async function handler(req, res) {
if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });
const { email, password } = req.body;
const user = users.find((u) => u.email === email);
if (!user) return res.status(401).json({ error: "User not found" });
const isMatch = await bcrypt.compare(password, user.password);
if (!isMatch) return res.status(401).json({ error: "Invalid password" });
const token = jwt.sign({ email: user.email, role: user.role }, "SECRET_KEY", { expiresIn: "1h" });
res.setHeader("Set-Cookie", serialize("auth_token", token, { httpOnly: true, path: "/" }));
res.json({ message: "Login successful", token });
}
✅ ตรวจสอบรหัสผ่าน และสร้าง JWT Token
✅ เก็บ Token ใน Cookie เพื่อใช้ใน Middleware
🚦 3. สร้าง Middleware เช็ก Role
📌 ไฟล์: middleware/auth.js
import jwt from "jsonwebtoken";
import { parse } from "cookie";
export function withAuth(handler, allowedRoles) {
return async (req, res) => {
const cookies = parse(req.headers.cookie || "");
const token = cookies.auth_token;
if (!token) return res.status(401).json({ error: "Not authenticated" });
try {
const decoded = jwt.verify(token, "SECRET_KEY");
if (!allowedRoles.includes(decoded.role)) {
return res.status(403).json({ error: "Access Denied" });
}
req.user = decoded; // ส่งข้อมูลผู้ใช้ไปยัง API
return handler(req, res);
} catch (error) {
return res.status(401).json({ error: "Invalid Token" });
}
};
}
✅ เช็กว่า JWT ถูกต้อง & Role ตรงกับสิทธิ์ที่กำหนด
🔥 4. สร้าง API แยกสิทธิ์
📌 API เฉพาะ Admin
📌 ไฟล์: pages/api/admin.js
import { withAuth } from "../../middleware/auth";
export default withAuth((req, res) => {
res.json({ message: "Welcome Admin!", user: req.user });
}, ["admin"]);
✅ เฉพาะ Admin เท่านั้นที่เรียก API นี้ได้
📌 API สำหรับ User & Admin
📌 ไฟล์: pages/api/user.js
import { withAuth } from "../../middleware/auth";
export default withAuth((req, res) => {
res.json({ message: `Welcome ${req.user.role}!`, user: req.user });
}, ["user", "admin"]);
✅ ทั้ง User & Admin ใช้งานได้
🎨 5. สร้าง UI หน้าเว็บ
📌 ไฟล์: pages/index.js
import { useState } from "react";
export default function Home() {
const [message, setMessage] = useState("");
const checkAdmin = async () => {
const res = await fetch("/api/admin");
const data = await res.json();
setMessage(data.message || data.error);
};
const checkUser = async () => {
const res = await fetch("/api/user");
const data = await res.json();
setMessage(data.message || data.error);
};
return (
<div>
<h1>Role-based Authentication</h1>
<button onClick={checkAdmin}>Check Admin</button>
<button onClick={checkUser}>Check User</button>
<p>{message}</p>
</div>
);
}
✅ ทดสอบ กดปุ่ม Check Admin หรือ Check User เพื่อดูสิทธิ์
🚀 6. ทดสอบระบบ
- รันเซิร์ฟเวอร์ npm run dev
- สมัครสมาชิก → /api/auth/register
- ล็อกอิน → /api/auth/login
- ลองเรียก /api/admin และ /api/user ดูว่า Role ตรงไหม
🎯 สรุป
✅ ใช้ JWT และ Middleware จัดการ Role
✅ แยกสิทธิ์ Admin, User, Guest
✅ ใช้ API แยก Role เพื่อควบคุมสิทธิ์การเข้าถึง
💡 พร้อมใช้กับเว็บจริง! แค่เพิ่ม Database และ UI สวยๆ เท่านั้น! 🚀
