टोकन, ताज़ा टोकन, और REST अनुरोध के लिए एक अतुल्यकालिक आवरण बना

इस ट्यूटोरियल में, हम संक्षेप में समीक्षा करेंगे कि एपीआई के लिए अन्य अनुरोध कैसे लागू किए जाते हैं, जिसके लिए उपयोगकर्ता को अधिकृत करने की आवश्यकता होती है, और अनुरोध के लिए एक अतुल्यकालिक "आवरण" बनाएं, जो प्राधिकरण की जांच करेगा और इसे समय पर अद्यतन करेगा।

जानकारी लॉगिन करें

एपीआई के लिए एक अनुरोध करने के बाद, जहां हमने लॉगिन और पासवर्ड भेजा है, बदले में हमें निम्न प्रारूप का मान मिलता है (मान यादृच्छिक होते हैं और लाइनें आमतौर पर लंबी होती हैं):

{ "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJPbmxpbmUgSld", "refresh_token": "1eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJPbmxpbmUgS", "expires_in": 124234149563 } 

प्रतिक्रिया में और भी क्षेत्र हो सकते हैं, उदाहरण के लिए, "token_type" , "expires_on" , इत्यादि, लेकिन, इस कार्यान्वयन के लिए, हमें केवल उपरोक्त तीन फ़ील्ड चाहिए।
आइए उन पर एक नज़र डालें:

• access_token - वह टोकन जिसे हमें प्रतिक्रिया में डेटा प्राप्त करने के लिए प्रत्येक अनुरोध के हेडर में भेजना होगा
  
• रिफ्रेश_टोकन - एक टोकन जिसे पुराने को समाप्त होने पर एक नया टोकन प्राप्त करने के लिए हमें भेजना होगा
• expires_in - सेकंड में टोकन जीवनकाल

टोकन प्राप्त करना

अब एक फ़ंक्शन बनाएं जो ऊपर वर्णित जसन प्राप्त करेगा और इसे बचाएगा।

हम अपनी आवश्यकताओं के आधार पर सेशनस्ट्रेशन या लोकलस्टोरेज में ऑथराइजेशन के लिए डेटा स्टोर करेंगे। पहले मामले में, डेटा तब तक संग्रहीत किया जाता है जब तक उपयोगकर्ता सत्र पूरा नहीं करता है या ब्राउज़र को बंद कर देता है, दूसरे मामले में, डेटा को असीमित समय तक ब्राउज़र में संग्रहीत किया जाएगा, जब तक कि किसी कारण से स्थानीयस्टोर साफ़ नहीं हो जाता है।

सेशन में टोकन को बचाने का कार्य

 function saveToken(token) { sessionStorage.setItem('tokenData', JSON.stringify(token)); } 

टोकन प्राप्त करने का कार्य:

 function getTokenData(login, password) { return fetch('api/auth', { method: 'POST', credentials: 'include', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ login, password, }), }) .then((res) => { if (res.status === 200) { const tokenData = res.json(); saveToken(JSON.stringify(tokenData)); //     sessionStorage,   ,   return Promise.resolve() } return Promise.reject(); }); } 

इस प्रकार, हमें "access_token" , "refresh_token" और "expires_in" फ़ील्ड के साथ एक टोकन प्राप्त हुआ और इसे आगे उपयोग के लिए सेशनस्टोर में सहेजा गया।

टोकन अपडेट

हमें पहले प्राप्त टोकन का जीवनकाल सीमित है, जो "expires_in" फ़ील्ड में सेट है। इसके जीवनकाल समाप्त होने के बाद, उपयोगकर्ता अनुरोध में इस टोकन को भेजकर नया डेटा प्राप्त नहीं कर पाएगा, इसलिए आपको एक नया टोकन प्राप्त करने की आवश्यकता है।

हम दो तरीकों से टोकन प्राप्त कर सकते हैं: पहला तरीका है कि सर्वर में उपयोगकर्ता नाम और पासवर्ड भेजकर लॉग इन करें। लेकिन यह हमें शोभा नहीं देता, क्योंकि एक निश्चित अवधि के बाद उपयोगकर्ता को हर बार प्राधिकरण डेटा को फिर से दर्ज करने के लिए मजबूर करना गलत है - यह स्वचालित रूप से किया जाना चाहिए। लेकिन स्वत: भेजने के लिए मेमोरी में कहीं लॉगिन / पासवर्ड जोड़ी जमा करना असुरक्षित है, इसीलिए हमें रिफ्रेश_टोकन की आवश्यकता होती है , जो पहले access_token के साथ प्राप्त हुई थी और सेशनस्टोर में संग्रहित है। आपी द्वारा प्रदान किए गए दूसरे पते पर यह टोकन भेजकर, हम प्रतिक्रिया में एक नया "ताज़ा" टोकन प्राप्त कर सकते हैं।

टोकन अपडेट के लिए फ़ंक्शन

 function refreshToken(token) { return fetch('api/auth/refreshToken', { method: 'POST', credentials: 'include', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ token, }), }) .then((res) => { if (res.status === 200) { const tokenData = res.json(); saveToken(JSON.stringify(tokenData)); //      sessionStorage,   ,   return Promise.resolve(); } return Promise.reject(); }); } 

ऊपर दिए गए कोड का उपयोग करते हुए, हमने सेशनस्टोरेज में टोकन को फिर से लिखा और अब हम नए तरीके से एपीआई को अनुरोध भेज सकते हैं।

एक आवरण समारोह बनाना

अब हम एक फ़ंक्शन बनाते हैं जो अनुरोध शीर्षलेख में प्राधिकरण डेटा जोड़ देगा, और यदि आवश्यक हो, तो अनुरोध करने से पहले इसे स्वचालित रूप से अपडेट करें।

चूंकि यदि टोकन समाप्त हो गया है, तो हमें एक नए टोकन का अनुरोध करने की आवश्यकता होगी, फिर हमारा फ़ंक्शन अतुल्यकालिक होगा। इसके लिए हम async / प्रतीक्षा निर्माण का उपयोग करेंगे।

आवरण समारोह

 export async function fetchWithAuth(url, options) { const loginUrl = '/login'; // url    let tokenData = null; //    tokenData if (sessionStorage.authToken) { //   sessionStorage  tokenData,    tokenData = JSON.parse(localStorage.tokenData); } else { return window.location.replace(loginUrl); //   ,       } if (!options.headers) { //     headers,    options.headers = {}; } if (tokenData) { if (Date.now() >= tokenData.expires_on * 1000) { //        try { const newToken = await refreshToken(tokenData.refresh_token); //  ,      refresh_token saveToken(newToken); } catch () { //   -   ,       return window.location.replace(loginUrl); } } options.headers.Authorization = `Bearer ${tokenData.token}`; //    headers  } return fetch(url, options); //   ,       headers } 

ऊपर दिए गए कोड का उपयोग करते हुए, हमने एक फ़ंक्शन बनाया जो एपीआई में अनुरोधों के लिए एक टोकन जोड़ देगा। इस फ़ंक्शन के साथ, हम उन प्रश्नों को ले सकते हैं जिनकी हमें आवश्यकता है, जहां प्राधिकरण की आवश्यकता है और इसके लिए हमें वाक्यविन्यास को बदलने या तर्कों के लिए कोई और डेटा जोड़ने की आवश्यकता नहीं है।
यह सिर्फ एक फ़ाइल में "आयात" करने के लिए पर्याप्त होगा और इसके साथ मानक लाने की जगह लेगा।

 import fetchWithAuth from './api'; function getData() { return fetchWithAuth('api/data', options) }