การใช้ jwt ใน vue.js

การใช้ JWT (JSON Web Tokens) ใน Vue.js เพื่อจัดการการรับรองตัวตนและการอนุญาตสามารถทำได้โดยการดำเนินการต่อไปนี้:

  1. ติดตั้ง Axios:

    Axios เป็นไลบรารีที่มีการส่งคำขอ HTTP สำหรับการเรียก API จาก Vue.js ให้ตรวจสอบว่าคุณติดตั้ง Axios ในโปรเจกต์ Vue.js ของคุณ โดยใช้ npm หรือ yarn:

    1
    npm install axios

    หรือ

    1
    yarn add axios
  2. สร้างการเข้าสู่ระบบและรับ JWT:

    ในส่วนของระบบรับรองตัวตนของแอปของคุณ (ซึ่งอาจเป็น Laravel, Node.js, Django, หรือระบบอื่น ๆ), คุณจะต้องมีการสร้างระบบที่อนุญาตให้ผู้ใช้ที่ลงชื่อเข้าสู่ระบบรับ JWT เมื่อพวกเขาสำเร็จในการเข้าสู่ระบบ.

    เมื่อผู้ใช้ลงชื่อเข้าสู่ระบบสำเร็จและได้รับ JWT, คุณควรส่ง JWT กลับไปยังแอป Vue.js ในการตอบรับ. เก็บ JWT ในระบบเก็บข้อมูลของคุณ (เช่น localStorage, sessionStorage) เพื่อใช้ในคำขอ HTTP ต่อไป.

  3. การใช้ JWT ในคำขอ HTTP:

    เมื่อคุณมี JWT, คุณสามารถใช้ Axios ใน Vue.js ส่ง JWT ในส่วนของการร้องขอ HTTP โดยใช้ header ของ Authorization:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import axios from 'axios';

    // รับ JWT จาก localStorage หรือ sessionStorage
    const token = localStorage.getItem('jwt'); // หรือ sessionStorage.getItem('jwt')

    // ตั้งค่า header Authorization สำหรับ Axios
    if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    }

    // ตัวอย่างคำขอ GET โดยใช้ JWT
    axios.get('/api/some-resource')
    .then(response => {
    // ประมวลผลคำขอ
    })
    .catch(error => {
    // จัดการข้อผิดพลาด
    });
  4. การตรวจสอบ JWT ใน Backend:

    ในระบบ Backend, คุณต้องมีระบบตรวจสอบ JWT ใน header ของ Authorization และทำการตรวจสอบความถูกต้องของ JWT โดยใช้คีย์สัญลักษณ์ลับของคุณ. คุณสามารถใช้ไลบรารีต่าง ๆ ที่มีให้เลือก เช่น jsonwebtoken สำหรับ Node.js.

  5. การออกจากระบบ:

    หากคุณมีระบบออกจากระบบ, คุณควรลบ JWT ออกจากระบบเก็บข้อมูล (localStorage, sessionStorage) เพื่อไม่ให้มีคนอื่นสามารถใช้ JWT นั้นได

้หลังจากออกจากระบบ.

นี่คือขั้นตอนพื้นฐานในการใช้ JWT ใน Vue.js โดยร่วมกับระบบรับรองตัวตนใน Backend ของคุณ. คำขอ HTTP จะส่ง JWT ใน header Authorization เพื่อรับการอนุญาตในแอปของคุณ.