tiktok นับยอดวิวยังไง

การใช้ JSON Web Tokens (JWT) ใน Next.js เป็นวิธีที่ดีในการจัดการระบบการตรวจสอบสิทธิ์และการรักษาสถานะการล็อกอินของผู้ใช้. ตัวอย่างต่อไปนี้จะแสดงวิธีการสร้างและยืนยัน JWT ใน Next.js:

1. ติดตั้งแพ็กเกจที่จำเป็น: เริ่มต้นโดยติดตั้งแพ็กเกจที่จำเป็น เช่น jsonwebtoken เพื่อสร้างและยืนยัน JWT และ cookie เพื่อจัดการคุกกี้:

npm install jsonwebtoken cookie

หรือ

yarn add jsonwebtoken cookie

2. สร้างฟังก์ชันสร้างและสร้าง JWT: สร้างฟังก์ชันสำหรับสร้าง JWT เมื่อผู้ใช้ล็อกอิน:

// utils/auth.js
import { sign } from 'jsonwebtoken';

export const createToken = (userId) => {
  const token = sign({ userId }, 'your-secret-key', {
    expiresIn: '1h', // กำหนดอายุของ token
  });
  return token;
};

3. สร้าง API route สำหรับการล็อกอินและสร้าง JWT: สร้าง API route ที่ใช้สำหรับการล็อกอินและสร้าง JWT เมื่อการล็อกอินสำเร็จ:

// pages/api/login.js
import { createToken } from '../../utils/auth';

export default function handler(req, res) {
  if (req.method === 'POST') {
    // ตรวจสอบข้อมูลการล็อกอินของผู้ใช้และทำการตรวจสอบสิทธิ์

    // ตัวอย่างเช่นจากข้อมูลในฐานข้อมูลหรือการตรวจสอบรหัสผ่าน

    const userId = 1; // ให้ userId เป็นรหัสผู้ใช้ที่ล็อกอินสำเร็จ
    const token = createToken(userId);

    // ส่งคุกกี้หรือ JSON ให้กับผู้ใช้
    res.setHeader('Set-Cookie', `token=${token}; HttpOnly; Secure; SameSite=Strict`);
    res.status(200).json({ message: 'Login successful' });
  } else {
    res.status(405).end();
  }
}

4. สร้าง middleware สำหรับตรวจสอบ JWT: สร้าง middleware ที่ใช้สำหรับตรวจสอบ JWT ในการร้อยเอสต์ที่ต้องการการตรวจสอบสิทธิ์:

// utils/auth.js
import { verify } from 'jsonwebtoken';

export const verifyToken = (token) => {
  try {
    const decoded = verify(token, 'your-secret-key');
    return decoded.userId;
  } catch (error) {
    return null; // ถ้ามีข้อผิดพลาดในการยืนยัน token
  }
};

5. สร้าง API route สำหรับการตรวจสอบสิทธิ์: สร้าง API route สำหรับการตรวจสอบสิทธิ์การเข้าถึงหน้าหรือแหล่งข้อมูลที่ต้องการสิทธิ์:

// pages/api/protected.js
import { verifyToken } from '../../utils/auth';

export default function handler(req, res) {
  if (req.method === 'GET') {
    const token = req.cookies.token; // รับค่า token จากคุกกี้

    if (!token) {
      return res.status(401).json({ message: 'Unauthorized' });
    }

    const userId = verifyToken(token);

    if (!userId) {
      return res.status(401).json({ message: 'Invalid token' });
    }

    // ตรวจสอบสิทธิ์ของผู้ใช้และดำเนินการตามต้องการ
    return res.status(200).json({ message: 'Access granted' });
  } else {
    res.status(405).end();
  }
}

6. สร้างหน้าที่ต้องการสิทธิ์: สร้างหน้าหรือเร้าเริ่มต้นที่คุณต้องการสิทธิ์การเข้าถึง และใช้ middleware สำหรับการตรวจสอบสิทธิ์:

// pages/protected.js
import { useEffect, useState } from 'react';
import { verifyToken } from '../utils/auth';

function Protected() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const token = localStorage.getItem('token'); // รับค่า token จาก local storage

    if (!token) {
      setMessage('Unauthorized');
      return;
    }

    const userId = verifyToken(token);

    if (!userId) {
      setMessage('Invalid token');
      return;
    }

    // ถ้าสิทธิ์ถูกต้อง, สามารถดำเนินการตามต้องการได้
    setMessage('Access granted');
  }, []);

  return (
    <div>
      <h1>Protected Page</h1>
      <p>{message}</p>
    </div>
  );
}

export default Protected;

7. **ตัวอย่างการใช้งา

นในหน้า**: ในหน้าที่ต้องการสิทธิ์การเข้าถึง คุณสามารถใช้ JWT ใน localStorage หรือคุกกี้เพื่อส่งค่า token ในคำขอ GET ไปยัง API route ที่ตรวจสอบสิทธิ์.

นี่คือขั้นตอนพื้นฐานในการใช้ JWT ใน Next.js เพื่อการตรวจสอบสิทธิ์และรักษาสถานะการล็อกอินของผู้ใช้ โปรดระวังความปลอดภัยและดำเนินการตรวจสอบและการยืนยัน JWT อย่างถูกต้องเพื่อป้องกันการแอบอ้างปลอมและการบุกรุก.