Vue Academy · บทเรียน

การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios

ตัวดักจับคำขอสำหรับส่วนหัว Authorization ตัวดักจับการตอบกลับสำหรับ 401 → รีเฟรช → ลองใหม่

บทเรียน 3 จาก 413 ขั้นตอน

การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

รูปแบบตัวดักจับ

แทนที่จะเพิ่มส่วนหัวการยืนยันตัวตนและจัดการ 401 ในทุกคำขอ ตัวดักจับของ Axios จะรวมตรรกะนี้ไว้ที่ศูนย์กลาง ตัวดักจับคำขอจะเพิ่มโทเค็น ส่วนตัวดักจับการตอบกลับจะจัดการการหมดอายุและการรีเฟรชโดยอัตโนมัติ

การสร้างอินสแตนซ์ Axios

สร้างอินสแตนซ์เฉพาะโดยกำหนด URL พื้นฐานของ API และ withCredentials เพื่อให้ส่งคุกกี้ refresh แบบ httpOnly ไปยังปลายทางสำหรับการรีเฟรช

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  withCredentials: true // send cookies
})

export default api

การเก็บ access token ในหน่วยความจำ

เก็บ access token ไว้ในตัวแปรของโมดูลหรือสโตร์ Pinia แทน localStorage ตัวเข้าถึงแบบคู่ขนาดเล็กช่วยให้ตัวดักจับอ่านและอัปเดตโทเค็นได้

let accessToken = null

export function setAccessToken(t) { accessToken = t }
export function getAccessToken() { return accessToken }

ตัวดักจับคำขอ: การเพิ่มส่วนหัว

ตัวดักจับคำขอจะทำงานก่อนทุกคำขอ และแนบ Authorization: Bearer <token> เมื่อมีโทเค็นอยู่

api.interceptors.request.use((config) => {
  const token = getAccessToken()
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
})

ตัวดักจับการตอบกลับ: การตรวจจับ 401

ตัวดักจับการตอบกลับจะส่งต่อการตอบกลับที่สำเร็จโดยไม่แก้ไข แต่เมื่อพบ 401 ก็จะเริ่มกระบวนการรีเฟรช

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const original = error.config
    if (error.response?.status === 401 && !original._retried) {
      // ... refresh and retry (next scenes)
    }
    return Promise.reject(error)
  }
)

การป้องกันลูปการลองใหม่ไม่รู้จบ

กำกับคำขอที่ล้มเหลวด้วยแฟล็กอย่าง _retried เพื่อให้ลองใหม่ได้เพียง once เท่านั้น หากการรีเฟรชเองส่งผลลัพธ์เป็น 401 คำขอจะถูกปฏิเสธแทนที่จะวนซ้ำไปเรื่อย ๆ

if (error.response?.status === 401 && !original._retried) {
  original._retried = true
  // attempt refresh exactly once for this request
}

การเรียกปลายทางสำหรับการรีเฟรช

เมื่อพบ 401 ให้ส่งคำขอ POST ไปยัง /auth/refresh เบราว์เซอร์จะส่งคุกกี้ refresh แบบ httpOnly โดยอัตโนมัติ และเซิร์ฟเวอร์จะตอบกลับด้วย access token ใหม่

const { data } = await api.post('/auth/refresh')
setAccessToken(data.accessToken)

การลองคำขอเดิมอีกครั้ง

หลังจากรีเฟรชแล้ว ให้อัปเดตส่วนหัวในค่าการตั้งค่าของคำขอเดิมและส่งคำขอนั้นซ้ำ ผู้ใช้จะไม่เห็นการหยุดชะงัก

original.headers.Authorization = 'Bearer ' + data.accessToken
return api(original) // retry the original request

การจัดการ 401 ที่เกิดขึ้นพร้อมกัน

หากคำขอจำนวนมากล้มเหลวพร้อมกัน คุณไม่ควรเรียกการรีเฟรชแบบขนานจำนวน N ครั้ง ให้ใช้ promise การรีเฟรชที่กำลังทำงานอยู่ร่วมกันเพียงรายการเดียว คำขอที่รออยู่จะรอ promise นี้ แล้วลองใหม่ด้วยโทเค็นใหม่

let refreshing = null

function refreshOnce() {
  if (!refreshing) {
    refreshing = api.post('/auth/refresh')
      .finally(() => { refreshing = null })
  }
  return refreshing
}

ยอมแพ้: บังคับออกจากระบบ

หากการรีเฟรชล้มเหลวเนื่องจาก refresh token หมดอายุหรือไม่ถูกต้อง ให้ล้างโทเค็นในหน่วยความจำและเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ จุดนี้เป็นจุดเดียวที่จัดการการหมดอายุของเซสชันให้กับทั้งแอป

try {
  await refreshOnce()
} catch {
  setAccessToken(null)
  router.push('/login')
  return Promise.reject(error)
}

การใช้อินสแตนซ์ในคอมโพเนนต์

คอมโพเนนต์เพียงนำเข้าอินสแตนซ์ api ที่กำหนดค่าไว้แล้วเรียกใช้งาน ส่วนหัวการยืนยันตัวตน การรีเฟรช และการลองใหม่จะทำงานอย่างโปร่งใสต่อโค้ดของคอมโพเนนต์

<script setup>
import api from '@/lib/api'
import { ref, onMounted } from 'vue'

const profile = ref(null)
onMounted(async () => {
  const { data } = await api.get('/me')
  profile.value = data
})
</script>

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับตัวดักจับของ Axios

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

คุณได้เรียนรู้การเรียกใช้งานที่มีการยืนยันตัวตนด้วยตัวดักจับ:

ตัวดักจับคำขอเพิ่ม Authorization: Bearer จากโทเค็นในหน่วยความจำ
ตัวดักจับการตอบกลับตรวจจับ 401 และทำการรีเฟรช
แฟล็ก _retried ทำให้ลองคำขอเดิมใหม่ได้เพียงหนึ่งครั้ง
POST /auth/refresh ใช้คุกกี้ httpOnly เพื่อรับโทเค็นใหม่
ใช้ promise การรีเฟรชเดียวร่วมกันสำหรับ 401 ที่เกิดขึ้นพร้อมกัน และบังคับออกจากระบบเมื่อการรีเฟรชล้มเหลว

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios”

ตัวดักจับคำขอสำหรับส่วนหัว Authorization ตัวดักจับการตอบกลับสำหรับ 401 → รีเฟรช → ลองใหม่ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

แบ็กเอนด์ Fastify สำหรับ SPA ของ Vue
การยืนยันตัวตนด้วย JWT: การเข้าสู่ระบบและการรีเฟรช
การเรียก API ที่ยืนยันตัวตนด้วยตัวดักจับของ Axios
การนำ Vue แบบฟูลสแตกขึ้นใช้งานจริง

← กลับไปที่ Vue Academy