Vue Academy · درس

استدعاءات API الموثّقة باستخدام Axios Interceptors

Interceptor للطلب لإضافة ترويسة Authorization، وInterceptor للاستجابة لمعالجة 401 ← refresh ← retry

استدعاءات API الموثّقة باستخدام Axios Interceptors درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

نمط المعترضات

بدلًا من إرفاق ترويسات المصادقة ومعالجة أخطاء 401 في كل استدعاء، توحّد المعترضات في Axios هذا المنطق. يضيف معترض الطلب الرمز، بينما يعالج معترض الاستجابة انتهاء الصلاحية والتحديث بشفافية.

إنشاء مثيل Axios

أنشئ مثيلًا مخصصًا يتضمن عنوان API الأساسي وwithCredentials حتى يُرسل ملف تعريف ارتباط التحديث httpOnly إلى مسار التحديث.

import axios from 'axios'

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

export default api

تخزين رمز الوصول في الذاكرة

احتفظ برمز الوصول في متغير ضمن الوحدة (أو في مخزن 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 على الطلب الفاشل حتى يُعاد تنفيذ الطلب مرة واحدة فقط. وإذا أعاد التحديث نفسه 401، يُرفض الطلب بدلًا من الدخول في حلقة لا نهائية.

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

استدعاء مسار التحديث

عند تلقي 401، أرسل POST إلى /auth/refresh. يرسل المتصفح ملف تعريف ارتباط التحديث httpOnly تلقائيًا، ويرد الخادم برمز وصول جديد.

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 من استدعاءات التحديث المتوازية. شارك وعد تحديث واحدًا قيد التنفيذ؛ إذ تنتظره الطلبات الموجودة في قائمة الانتظار، ثم تعيد المحاولة باستخدام الرمز الجديد.

let refreshing = null

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

الاستسلام: فرض تسجيل الخروج

إذا فشل التحديث (بسبب انتهاء صلاحية رمز التحديث أو عدم صلاحيته)، فامسح الرمز الموجود في الذاكرة وأعد التوجيه إلى تسجيل الدخول. وهذا هو الموضع الوحيد الذي يعالج انتهاء الجلسة في التطبيق بأكمله.

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 للحصول على رمز جديد
شارك وعد تحديث واحدًا عند حدوث أخطاء 401 متزامنة، وافرض تسجيل الخروج عند الفشل

الأسئلة الشائعة

هل درس «استدعاءات API الموثّقة باستخدام Axios Interceptors» مجاني؟

نعم — نص درس «استدعاءات API الموثّقة باستخدام Axios Interceptors» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «استدعاءات API الموثّقة باستخدام Axios Interceptors»؟

Interceptor للطلب لإضافة ترويسة Authorization، وInterceptor للاستجابة لمعالجة 401 ← refresh ← retry تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «استدعاءات API الموثّقة باستخدام Axios Interceptors»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

‏Fastify Backend لتطبيقات Vue SPA
مصادقة JWT: تسجيل الدخول والتحديث
استدعاءات API الموثّقة باستخدام Axios Interceptors
نشر Vue كامل المكدس في الإنتاج

← العودة إلى Vue Academy