Vue Academy · पाठ

Axios इंटरसेप्टर के साथ प्रमाणित API कॉल

Authorization हेडर के लिए अनुरोध इंटरसेप्टर, 401 → रिफ़्रेश → पुनःप्रयास के लिए प्रतिक्रिया इंटरसेप्टर

पाठ 3, कुल 4 में से13 चरण

Axios इंटरसेप्टर के साथ प्रमाणित API कॉल, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

इंटरसेप्टर पैटर्न

हर कॉल में प्रमाणीकरण header जोड़ने और 401 संभालने के बजाय Axios के interceptors इस तर्क को एक जगह केंद्रित करते हैं। अनुरोध interceptor token जोड़ता है; प्रतिक्रिया interceptor समाप्ति और नवीनीकरण को पारदर्शी रूप से संभालता है।

Axios instance बनाना

एपीआई के base URL वाला एक समर्पित instance बनाएँ और withCredentials सक्षम करें, ताकि httpOnly नवीनीकरण cookie नवीनीकरण endpoint पर भेजी जा सके।

import axios from 'axios'

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

export default api

पहुँच token को स्मृति में रखना

पहुँच token को localStorage के बजाय किसी module variable या Pinia store में रखें। accessors की एक छोटी जोड़ी interceptors को इसे पढ़ने और अपडेट करने देती है।

let accessToken = null

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

अनुरोध interceptor: header जोड़ना

अनुरोध interceptor हर अनुरोध से पहले चलता है और token मौजूद होने पर Authorization: Bearer <token> जोड़ता है।

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

प्रतिक्रिया interceptor: 401 पकड़ना

प्रतिक्रिया interceptor सफल प्रतिक्रियाओं को बिना बदलाव के आगे भेजता है, लेकिन 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
}

नवीनीकरण endpoint को कॉल करना

401 मिलने पर /auth/refresh पर POST करें। ब्राउज़र httpOnly नवीनीकरण cookie अपने-आप भेजता है; सर्वर नए पहुँच token के साथ उत्तर देता है।

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

मूल अनुरोध का पुनःप्रयास करना

नवीनीकरण के बाद मूल configuration में header अपडेट करें और अनुरोध को फिर से चलाएँ। उपयोगकर्ता को यह रुकावट दिखाई नहीं देती।

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

एक साथ आए 401 संभालना

यदि बहुत से अनुरोध एक साथ विफल हों, तो आप N समानांतर नवीनीकरण कॉल नहीं करना चाहेंगे। चल रहे नवीनीकरण के लिए एक ही promise साझा करें; कतार में मौजूद अनुरोध उसका इंतज़ार करें और फिर नए token के साथ पुनःप्रयास करें।

let refreshing = null

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

हार मानना: लॉगआउट कराना

यदि नवीनीकरण विफल हो जाए, जैसे नवीनीकरण token समाप्त या अमान्य हो, तो स्मृति में मौजूद token हटाएँ और उपयोगकर्ता को लॉगिन पर भेजें। पूरे app में session की समाप्ति संभालने का यही एक स्थान होना चाहिए।

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

घटकों में instance का उपयोग करना

घटक केवल कॉन्फ़िगर किए गए api instance को import करके कॉल करते हैं। प्रमाणीकरण header, नवीनीकरण और पुनःप्रयास घटक के code से पूरी तरह छिपे रहते हैं।

<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 interceptors की अपनी समझ का परीक्षण करें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने interceptors के साथ प्रमाणीकृत कॉल करना सीखा:

अनुरोध interceptor स्मृति में मौजूद token से Authorization: Bearer जोड़ता है
प्रतिक्रिया interceptor 401 पकड़कर नवीनीकरण करता है
_retried संकेतक मूल अनुरोध का ठीक एक बार पुनःप्रयास करता है
POST /auth/refresh नया token पाने के लिए httpOnly cookie का उपयोग करता है
एक साथ आए 401 के लिए एक ही नवीनीकरण promise साझा करें; विफल होने पर लॉगआउट कराएँ

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Axios इंटरसेप्टर के साथ प्रमाणित API कॉल” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Axios इंटरसेप्टर के साथ प्रमाणित API कॉल” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Axios इंटरसेप्टर के साथ प्रमाणित API कॉल” में मैं क्या सीखूँगा?

Authorization हेडर के लिए अनुरोध इंटरसेप्टर, 401 → रिफ़्रेश → पुनःप्रयास के लिए प्रतिक्रिया इंटरसेप्टर आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Axios इंटरसेप्टर के साथ प्रमाणित API कॉल” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Vue SPA के लिए Fastify बैकएंड
JWT प्रमाणीकरण: लॉगिन और रिफ़्रेश
Axios इंटरसेप्टर के साथ प्रमाणित API कॉल
फ़ुल-स्टैक Vue को प्रोडक्शन में परिनियोजित करना

← Vue Academy पर वापस जाएँ