การใช้ JWT (JSON Web Tokens) ใน Vue.js เพื่อจัดการการรับรองตัวตนและการอนุญาตสามารถทำได้โดยการดำเนินการต่อไปนี้:
ติดตั้ง Axios:
Axios เป็นไลบรารีที่มีการส่งคำขอ HTTP สำหรับการเรียก API จาก Vue.js ให้ตรวจสอบว่าคุณติดตั้ง Axios ในโปรเจกต์ Vue.js ของคุณ โดยใช้ npm หรือ yarn:
1
npm install axios
หรือ
1
yarn add axios
สร้างการเข้าสู่ระบบและรับ JWT:
ในส่วนของระบบรับรองตัวตนของแอปของคุณ (ซึ่งอาจเป็น Laravel, Node.js, Django, หรือระบบอื่น ๆ), คุณจะต้องมีการสร้างระบบที่อนุญาตให้ผู้ใช้ที่ลงชื่อเข้าสู่ระบบรับ JWT เมื่อพวกเขาสำเร็จในการเข้าสู่ระบบ.
เมื่อผู้ใช้ลงชื่อเข้าสู่ระบบสำเร็จและได้รับ JWT, คุณควรส่ง JWT กลับไปยังแอป Vue.js ในการตอบรับ. เก็บ JWT ในระบบเก็บข้อมูลของคุณ (เช่น localStorage, sessionStorage) เพื่อใช้ในคำขอ HTTP ต่อไป.
การใช้ 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
18import 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 => {
// จัดการข้อผิดพลาด
});การตรวจสอบ JWT ใน Backend:
ในระบบ Backend, คุณต้องมีระบบตรวจสอบ JWT ใน header ของ Authorization และทำการตรวจสอบความถูกต้องของ JWT โดยใช้คีย์สัญลักษณ์ลับของคุณ. คุณสามารถใช้ไลบรารีต่าง ๆ ที่มีให้เลือก เช่น jsonwebtoken สำหรับ Node.js.
การออกจากระบบ:
หากคุณมีระบบออกจากระบบ, คุณควรลบ JWT ออกจากระบบเก็บข้อมูล (localStorage, sessionStorage) เพื่อไม่ให้มีคนอื่นสามารถใช้ JWT นั้นได
้หลังจากออกจากระบบ.
นี่คือขั้นตอนพื้นฐานในการใช้ JWT ใน Vue.js โดยร่วมกับระบบรับรองตัวตนใน Backend ของคุณ. คำขอ HTTP จะส่ง JWT ใน header Authorization เพื่อรับการอนุญาตในแอปของคุณ.