Vue Academy · पाठ

सुरक्षित प्रमाणीकरण पैटर्न

टोकन संग्रहण (मेमोरी बनाम localStorage बनाम httpOnly कुकी), साइलेंट रिफ़्रेश और टैब बंद होने पर लॉगआउट

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

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

token और उनका स्थान

SPA प्रमाणीकरण के लिए token का उपयोग करते हैं, लेकिन उन्हें कहाँ संग्रहीत किया जाता है, इससे XSS और CSRF का जोखिम तय होता है। आधुनिक तरीका अल्पकालिक पहुँच token और दीर्घकालिक नवीनीकरण token को अलग रखता है और दोनों को अलग-अलग स्थानों पर संग्रहीत करता है।

localStorage की समस्या

localStorage में token रखना सुविधाजनक है, लेकिन खतरनाक भी: XSS के माध्यम से डाली गई कोई भी स्क्रिप्ट उसे पढ़कर token बाहर भेज सकती है। वहाँ प्रमाण-पत्र रखने से बचें।

// AVOID
localStorage.setItem("token", accessToken);

स्मृति में पहुँच token

पहुँच token को JavaScript चर या रिएक्टिव रेफ़रेंस में रखें। पुनः लोड करने पर यह गायब हो जाता है, इसलिए सफल XSS के लिए अवसर बहुत छोटा रहता है और डिस्क पर कुछ भी स्थायी रूप से नहीं रहता।

import { ref } from "vue";

export const accessToken = ref(null);

httpOnly कुकी में नवीनीकरण token

नवीनीकरण token HttpOnly, Secure, SameSite कुकी में रहता है। JavaScript इसे पढ़ नहीं सकता, इसलिए XSS इसे चुरा नहीं सकता और ब्राउज़र इसे केवल आपके प्रमाणीकरण endpoint पर भेजता है।

Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/auth

पहुँच token जोड़ना

Axios अनुरोध इंटरसेप्टर प्रत्येक कॉल के Authorization हेडर में स्मृति में रखा पहुँच token जोड़ता है।

api.interceptors.request.use((config) => {
  if (accessToken.value) {
    config.headers.Authorization = "Bearer " + accessToken.value;
  }
  return config;
});

समाप्ति का पता लगाना: 401

पहुँच token की अवधि समाप्त होने पर सर्वर 401 Unauthorized के साथ उत्तर देता है। प्रतिक्रिया इंटरसेप्टर इसे पकड़कर token नवीनीकरण शुरू करता है।

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      // attempt refresh
    }
    return Promise.reject(error);
  }
);

token नवीनीकृत करना

401 मिलने पर नवीनीकरण endpoint को कॉल करें। ब्राउज़र httpOnly नवीनीकरण कुकी अपने-आप भेजता है (withCredentials) और सर्वर नया पहुँच token लौटाता है।

const { data } = await axios.post("/auth/refresh", null, {
  withCredentials: true
});
accessToken.value = data.accessToken;

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

ताज़ा करने के बाद, नए टोकन के साथ विफल हुए original अनुरोध को फिर से चलाइए, ताकि उपयोगकर्ता को कभी इसका पता न चले।

async (error) => {
  const original = error.config;
  if (error.response?.status === 401 && !original._retry) {
    original._retry = true;
    const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
    accessToken.value = data.accessToken;
    original.headers.Authorization = "Bearer " + data.accessToken;
    return api(original);
  }
  return Promise.reject(error);
}

नवीनीकरण की भीड़ से बचना

यदि एक साथ कई अनुरोधों पर 401 मिले, तो उन्हें एक ही चल रहे नवीनीकरण के पीछे कतार में लगाइए, ताकि नवीनीकरण एंडपॉइंट को बार-बार न बुलाना पड़े।

let refreshing = null;
function refresh() {
  if (!refreshing) {
    refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
      .finally(() => { refreshing = null; });
  }
  return refreshing;
}

लॉग आउट करना

लॉग आउट करते समय, मेमोरी में मौजूद टोकन हटाइए और ऐसा एंडपॉइंट बुलाइए जो सर्वर-पक्ष पर नवीनीकरण कुकी हटा दे।

async function logout() {
  accessToken.value = null;
  await axios.post("/auth/logout", null, { withCredentials: true });
}

CSRF सुरक्षा के साथ संयोजन

क्योंकि नवीनीकरण कुकी अपने-आप भेजी जाती है, इसलिए उस एंडपॉइंट की सुरक्षा अन्य कुकी-प्रमाणित मार्गों की तरह SameSite और CSRF टोकनों से कीजिए।

त्वरित जाँच

प्रवेश टोकन और नवीनीकरण टोकन को क्रमशः कहाँ संग्रहीत करना चाहिए?

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

पुनरावलोकन

प्रवेश टोकन को मेमोरी में मौजूद ref में रखें (कभी भी localStorage में नहीं) और नवीनीकरण टोकन को HttpOnly कुकी में रखें। अनुरोध अवरोधक bearer टोकन जोड़ता है; प्रत्युत्तर अवरोधक 401 को पकड़कर नवीनीकरण एंडपॉइंट बुलाता है, टोकन अपडेट करता है और original अनुरोध का फिर से प्रयास करता है—साथ-साथ होने वाले नवीनीकरणों को एक करते हुए और CSRF सुरक्षा के साथ।

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

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

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

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

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

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

क्या “सुरक्षित प्रमाणीकरण पैटर्न” पाठ निःशुल्क है?

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

“सुरक्षित प्रमाणीकरण पैटर्न” में मैं क्या सीखूँगा?

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

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

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

“सुरक्षित प्रमाणीकरण पैटर्न” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

Vue में XSS रोकथाम
Vue के साथ Content Security Policy (CSP)
Vue SPA में CSRF सुरक्षा
सुरक्षित प्रमाणीकरण पैटर्न

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