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

इस चुनौती से पार पाने के लिए, आप उपयोगकर्ता प्रमाणीकरण डेटा और अन्य वैयक्तिकृत को बनाए रखने के लिए कुकीज़ और सत्र भंडारण का उपयोग कर सकते हैं सूचना—उपयोगकर्ताओं को निरंतर पुन: प्रमाणीकरण की आवश्यकता के बिना पूरे सत्र के दौरान प्रमाणित रहने की अनुमति देती है, परिणामस्वरूप, सुधार होता है उनका अनुभव.

कुकीज़ और सत्र संग्रहण का उपयोग करके उपयोगकर्ता सत्र डेटा का प्रबंधन करना

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

उपयोगकर्ता सत्र डेटा में आम तौर पर वह जानकारी शामिल होती है जो उपयोगकर्ता के वर्तमान सत्र या किसी एप्लिकेशन के साथ इंटरैक्शन के लिए विशिष्ट होती है। यह डेटा एप्लिकेशन की आवश्यकताओं और कार्यक्षमता के आधार पर भिन्न हो सकता है लेकिन इसमें आमतौर पर निम्नलिखित शामिल होते हैं:

• प्रमाणीकरण संबंधी जानकारी.
• उपयोगकर्ता प्राथमिकताएँ और सेटिंग्स.
• उपयोगकर्ता गतिविधि और इतिहास.

कुकीज़ टेक्स्ट फ़ाइलें होती हैं जिनमें डेटा के छोटे-छोटे टुकड़े होते हैं उपयोगकर्ता के डिवाइस पर वेब ब्राउज़र द्वारा संग्रहीत किया जाता है। इनका उपयोग आमतौर पर प्रमाणीकरण डेटा और किसी भी अन्य वैयक्तिकृत उपयोगकर्ता जानकारी को संग्रहीत करने के लिए किया जाता है, जिससे वेब एप्लिकेशन को कई ब्राउज़र सत्रों में उपयोगकर्ता सत्र बनाए रखने की अनुमति मिलती है।

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

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

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

एक रिएक्ट प्रोजेक्ट सेट करें

प्रारंभ करना, Vite का उपयोग करके एक रिएक्ट प्रोजेक्ट सेट करें. इसके बाद, इन पैकेजों को अपने प्रोजेक्ट में इंस्टॉल करें।

एनपीएम जेएस-कुकी प्रतिक्रिया-राउटर-डोम स्थापित करें

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

ये टोकन या पहचानकर्ता उपयोगकर्ता के ब्राउज़र में संग्रहीत अतिरिक्त डेटा के साथ स्वचालित रूप से होते हैं उपयोगकर्ता द्वारा संरक्षित पहुंच प्राप्त करने से पहले सत्यापन के लिए सर्वर से किए गए बाद के अनुरोधों में शामिल किया गया है संसाधन।

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

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.

कुकीज़ का उपयोग करके उपयोगकर्ता प्रमाणीकरण सत्र डेटा का प्रबंधन करना

यह प्रदर्शित करने के लिए कि उपयोगकर्ताओं की प्रमाणीकरण जानकारी संग्रहीत करने के लिए कुकीज़ का उपयोग कैसे करें, आगे बढ़ें, और एक नया बनाएं घटक/लॉगिन.जेएसएक्स फ़ाइल में स्रोत निर्देशिका। इस फ़ाइल के अंदर, निम्नलिखित कोड जोड़ें।

1. निम्नलिखित आयात करें.

   आयात { उपयोग राज्य } से'प्रतिक्रिया';
   आयात { उपयोगनेविगेट } से'प्रतिक्रिया-राउटर-डोम';
   आयात कुकीज़ से'जेएस-कुकी';

2. एक कार्यात्मक घटक बनाएं और लॉगिन फॉर्म के लिए JSX तत्व जोड़ें।

   कॉन्स्ट लॉग इन करें = () => {
   कॉन्स्ट [उपयोगकर्ता नाम, सेट उपयोगकर्ता नाम] = उपयोग राज्य('');
   कॉन्स्ट [पासवर्ड, सेटपासवर्ड] = उपयोगस्टेट('');
   वापस करना (
   
   
   
    प्रकार="मूलपाठ"
    प्लेसहोल्डर="उपयोगकर्ता नाम"
    मूल्य={उपयोगकर्ता नाम}
    onChange={(e) => setUsername (e.target.value)}
    />
    प्रकार="पासवर्ड"
    प्लेसहोल्डर="पासवर्ड"
    मूल्य={पासवर्ड}
    onChange={(e) => सेटपासवर्ड (e.target.value)}
    />
   "जमा करना">लॉगिन</button>
    </form>
    );
   };
   निर्यातगलती करना लॉग इन करें;

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

कॉन्स्ट टेस्टऑथडेटा = {
 उपयोगकर्ता नाम: 'परीक्षा',
 पासवर्ड: 'परीक्षा',
 }; 
कॉन्स्ट प्रमाणित उपयोगकर्ता = (प्रयोक्ता नाम पासवर्ड) => {
अगर (उपयोगकर्ता नाम testAuthData.उपयोगकर्ता नाम && पासवर्ड testAuthData.password) { 
कॉन्स्ट उपयोगकर्ताडेटा = {
 उपयोगकर्ता नाम,
 पासवर्ड,
 };
कॉन्स्ट समाप्ति समय = नयातारीख(नयातारीख().getTime() + 60000);
 कुकीज़.सेट('प्रामाणिक', JSON.stringify (userData), { समय सीमा समाप्त: समय सीमा समाप्ति समय });
वापस करनासत्य;
 }
वापस करनाअसत्य;
 };
कॉन्स्ट हैंडललॉगिन = (इ) => {
 e.preventDefault();
कॉन्स्ट प्रमाणीकृत = प्रमाणित उपयोगकर्ता (उपयोगकर्ता नाम, पासवर्ड);
अगर (प्रमाणित है) {
 नेविगेट('/संरक्षित');
 } अन्य {
// त्रुटि संदेश दिखाएं या विफल प्रमाणीकरण के लिए अन्य क्रियाएं करें
 }
 };

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

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

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

App.jsx फ़ाइल को अद्यतन करें

में बदलाव करें App.jsx सफल प्रमाणीकरण के बाद उपयोगकर्ता रूटिंग को संभालने के लिए फ़ाइल

आयात { ब्राउज़रराउटर, रूट, रूट, यूज़नेविगेट } से'प्रतिक्रिया-राउटर-डोम';
आयात कुकीज़ से'जेएस-कुकी';
आयात लॉग इन करें से'./घटक/लॉगिन';
कॉन्स्ट संरक्षित पृष्ठ = ({ ...आराम }) => {
कॉन्स्ट प्रमाणित है = !!कुकीज़.प्राप्त('प्रामाणिक');
कॉन्स्ट नेविगेट करें = उपयोग करेंनेविगेट();
कॉन्स्ट हैंडललॉगआउट = () => { 
 कुकीज़.निकालें('प्रामाणिक');
 नेविगेट('/लॉग इन करें'); 
 };
अगर (! प्रमाणित है) {
 नेविगेट('/लॉग इन करें'); 
वापस करनाव्यर्थ; // कुछ भी प्रस्तुत करने से रोकने के लिए शून्य लौटें
 }
वापस करना (



फ़ॉन्ट आकार: '24पीएक्स', रंग: 'नीला' }}>हैलो, विश्व!</h1>
मार्जिन टॉप: '10px' }} ऑनक्लिक={हैंडललॉगआउट}>
 लॉग आउट
 </button>
 </div>
 );
};


कॉन्स्ट ऐप = () => {
वापस करना (


"/संरक्षित/*" तत्व={} />
"/लॉग इन करें" तत्व={} />
 </Routes>
 </BrowserRouter>
 );
};
निर्यातगलती करना अनुप्रयोग;

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

इसके अतिरिक्त, यह प्रमाणीकरण कुकी की उपस्थिति की पुष्टि करता है और यदि यह अनुपस्थित है तो उपयोगकर्ताओं को लॉगिन पृष्ठ पर रीडायरेक्ट करता है। हालाँकि, यदि कुकी मौजूद है, तो संरक्षित पृष्ठ घटक एक पृष्ठ प्रस्तुत करता है जो विशेष रूप से प्रमाणित उपयोगकर्ताओं के लिए पहुंच योग्य है।

अंत में, एप्लिकेशन का परीक्षण करने के लिए डेवलपमेंट सर्वर को चालू करने के लिए नीचे दिए गए कमांड को चलाएँ।

एनपीएम रन डेव

अपने ब्राउज़र पर, नेविगेट करें http://127.0.0.1:5173/login, और परीक्षण प्रमाणीकरण क्रेडेंशियल दर्ज करें। सफलतापूर्वक लॉग इन करने के बाद, सत्र डेटा वाली एक नई कुकी उत्पन्न होती है, जिसमें परीक्षण प्रमाणीकरण जानकारी शामिल होती है।

एक बार कुकी समाप्त हो जाने पर या जब आप लॉगआउट बटन पर क्लिक करते हैं, तो कुकी हटा दी जाती है। यह क्रिया प्रभावी रूप से सक्रिय उपयोगकर्ता सत्र को समाप्त करती है और आपको लॉग आउट कर देती है।

सत्र संग्रहण का उपयोग करके उपयोगकर्ता प्रमाणीकरण डेटा संग्रहीत करना

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

 सेशनस्टोरेज.सेटआइटम('प्रामाणिक', JSON.stringify (userData));

उपरोक्त कथन को अंदर जोड़कर प्रमाणीकरण उपयोगकर्ता में कार्य करें लॉग इन करें घटक, आप उपयोगकर्ता के प्रमाणीकरण डेटा को ब्राउज़र के सत्र संग्रहण में संग्रहीत कर सकते हैं।

कुकीज़ और सत्र भंडारण के लिए अतिरिक्त उपयोग के मामलों की खोज

इस गाइड में इस बात पर प्रकाश डाला गया है कि उपयोगकर्ताओं के प्रमाणीकरण क्रेडेंशियल को संग्रहीत करने के लिए कुकीज़ और सत्र भंडारण का उपयोग कैसे करें। फिर भी, कुकीज़ और सत्र भंडारण प्रमाणीकरण जानकारी संग्रहीत करने से परे क्षमताओं की एक विस्तृत श्रृंखला प्रदान करते हैं।

इन सुविधाओं का लाभ उठाकर, आप अतिरिक्त सत्र डेटा प्रबंधित कर सकते हैं, जिससे अधिक सुरक्षित और वैयक्तिकृत उपयोगकर्ता अनुभव प्राप्त हो सकता है।