प्रतिक्रिया में लॉगिन करने के बाद किसी उपयोगकर्ता को पुनर्निर्देशित कैसे करें

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

इस लेख में, हम देखेंगे कि आप किसी उपयोगकर्ता को प्रतिबंधित पृष्ठ से लॉगिन पृष्ठ पर कैसे पुनर्निर्देशित कर सकते हैं। हम यह भी चर्चा करेंगे कि आप लॉग इन करने के बाद उपयोगकर्ता को उस पृष्ठ पर वापस कैसे लौटा सकते हैं, जिस पर वे थे।

रिएक्ट राउटर v6 में, उपयोगकर्ता को पुनर्निर्देशित करने के लिए आप दो तरीकों का उपयोग कर सकते हैं - नेविगेट घटक और नेविगेट करें () अंकुश।

एक प्रतिक्रिया आवेदन बनाएँ

का उपयोग करके एक सरल प्रतिक्रिया एप्लिकेशन बनाएं क्रिएट-रिएक्शन-ऐप आज्ञा। आप इस एप्लिकेशन का उपयोग यह जांचने के लिए करेंगे कि कैसे नेविगेट करें घटक और नेविगेट करें () हुक का काम।

एनपीएक्स सृजन करना-प्रतिक्रिया-ऐप प्रतिक्रिया-पुनर्निर्देशन

लॉग इन पेज बनाएं

उपयोगकर्ताओं को प्रमाणित करने के लिए आपको एक लॉगिन पेज बनाना होगा। चूंकि यह प्रमाणीकरण ट्यूटोरियल नहीं है, इसलिए उपयोगकर्ता डेटाबेस के रूप में ऑब्जेक्ट्स की एक सरणी का उपयोग करें।

में एक नई फ़ाइल बनाएँ एसआरसी फ़ोल्डर और इसे नाम दें लॉगिन.जेएस. फिर निम्न कोड जोड़ें लॉगिन फॉर्म बनाएं.

आयात {यूजस्टेट} से "प्रतिक्रिया";
आयात डैशबोर्ड से "./डैशबोर्ड";
स्थिरांक लॉगिन = () => {
 कॉन्स्ट [उपयोगकर्ता नाम, सेटयूज़रनेम] = यूज़स्टेट ("");
 कॉन्स्ट [पासवर्ड, सेटपासवर्ड] = यूज़स्टेट ("");
स्थिरांक [प्रमाणीकृत, सेट-प्रमाणित] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| असत्य));
 कॉन्स्ट उपयोगकर्ता = [{उपयोगकर्ता नाम: "जेन", पासवर्ड: "टेस्टपासवर्ड" }];
स्थिरांक हैंडल सबमिट करें = (ई) => {
इ।चूक को रोकें()
स्थिरांक खाता = उपयोगकर्ता। ढूंढें ((उपयोगकर्ता) => उपयोगकर्ता। उपयोगकर्ता नाम उपयोगकर्ता नाम);
 अगर (खाता && खाता पासवर्ड पासवर्ड) {
 प्रमाणित (सच)
 लोकलस्टोरेज.सेटआइटम ("प्रमाणीकृत", सच);
 }
 };
वापसी (
<डिव>
<पी>वापसी पर स्वागत है</पी>
<सबमिट पर फ़ॉर्म = {हैंडल सबमिट करें}>
<इनपुट
 प्रकार ="मूलपाठ"
 नाम ="उपयोगकर्ता नाम"
 मूल्य = {उपयोगकर्ता नाम}
 ऑन चेंज = {(ई) => setusername (e.target.value)}
 />
<इनपुट
 प्रकार ="पासवर्ड"
 नाम ="पासवर्ड"
 ऑन चेंज = {(ई) => सेटपासवर्ड (e.target.value)}
 />
<इनपुट प्रकार ="प्रस्तुत" मूल्य ="प्रस्तुत करना" />
</form>
</div>
 )
};
}
निर्यात करनाचूक लॉग इन करें;

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

एक डैशबोर्ड पेज बनाएं

निम्न कोड को एक नई फ़ाइल में जोड़ें जिसे कहा जाता है डैशबोर्ड.जेएस.

स्थिरांक डैशबोर्ड = () => {
वापसी (
<डिव>
<पी>आपके डैशबोर्ड में आपका स्वागत है</पी>
</div>
 );
};
निर्यात करनाचूक डैशबोर्ड;

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

ऐसा करने के लिए, पहले रिएक्ट राउटर का उपयोग करके एप्लिकेशन रूट सेट करें।

NPM इंस्टॉल प्रतिक्रिया-राउटर-डोम

index.js में, अपने आवेदन के लिए रूटिंग सेट करें।

आयात प्रतिक्रिया से "प्रतिक्रिया";
आयात रिएक्टडोम से "प्रतिक्रिया-डोम/क्लाइंट";
आयात अनुप्रयोग से "।/अनुप्रयोग";
आयात {ब्राउज़र राउटर, रूट, रूट्स} से "प्रतिक्रिया-राउटर-डोम";
आयात लॉग इन करें से "।/लॉग इन करें";
आयात डैशबोर्ड से "./डैशबोर्ड";
स्थिरांक रूट = ReactDOM.createRoot (दस्तावेज़.getElementById ("रूट"));
जड़।प्रदान करना(
<प्रतिक्रिया। सख्त मोड>
<ब्राउज़र राउटर>
<मार्गों>
<मार्ग सूचकांक तत्व = {<अनुप्रयोग />} />
<मार्ग पथ ="लॉग इन करें" तत्व = {<लॉग इन करें />} />
<मार्ग पथ ="डैशबोर्ड" तत्व = {<डैशबोर्ड />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);

डैशबोर्ड पेज को सुरक्षित रखें

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

आयात {उपयोग प्रभाव, यूजस्टेट} से "प्रतिक्रिया";
स्थिरांक डैशबोर्ड = () => {
स्थिरांक [प्रमाणित, प्रमाणित] = यूज़स्टेट (शून्य);
 उपयोग प्रभाव (() => {
 const logInUser = localStorage.getItem("प्रमाणीकृत");
 अगर (लॉग इन यूज़र) {
 प्रमाणित (लॉग इनयूसर);
 }
 }, []);
 अगर (! प्रमाणित) {
// रीडायरेक्ट
 } वरना {
वापसी (
<डिव>
<पी>आपके डैशबोर्ड में आपका स्वागत है</पी>
</div>
 );
 }
};
निर्यात करनाचूक डैशबोर्ड;

नेविगेट का उपयोग करके उपयोगकर्ता को लॉगिन पृष्ठ पर पुनर्निर्देशित करें

नेविगेट घटक ने रिएक्ट राउटर v5 में उपयोग किए गए रीडायरेक्ट घटक को बदल दिया। प्रतिक्रिया-राउटर-डोम से नेविगेट आयात करें।

आयात {नेविगेट करें} से "प्रतिक्रिया-राउटर-डोम";

अनधिकृत उपयोगकर्ताओं को पुनर्निर्देशित करने के लिए, इसे निम्नानुसार उपयोग करें।

अगर (! प्रमाणित) {
 वापसी <नेविगेट करने के लिए बदलें ="/login" />;
} वरना {
वापसी (
<डिव>
<पी>आपके डैशबोर्ड में आपका स्वागत है</पी>
</div>
 );
}

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

UseNavigate () का उपयोग करके उपयोगकर्ता को किसी अन्य पृष्ठ पर पुनर्निर्देशित करें

रिएक्ट में रीडायरेक्ट करने का दूसरा विकल्प है नेविगेट करें () अंकुश। यह हुक नेविगेट अनिवार्य एपीआई तक पहुंच प्रदान करता है। इसे प्रतिक्रिया-राउटर-डोम से आयात करके प्रारंभ करें।

आयात {उपयोग नेविगेट करें} से "प्रतिक्रिया-राउटर-डोम";

एक बार उपयोगकर्ता के सफलतापूर्वक प्रमाणित होने के बाद पुनर्निर्देशित करें हैंडल सबमिट करें () इस तरह समारोह:

स्थिरांक नेविगेट = यूजनेविगेट ();
स्थिरांक लॉगिन = () => {
स्थिरांक नेविगेट = यूजनेविगेट ();
 कॉन्स्ट [उपयोगकर्ता नाम, सेटयूज़रनेम] = यूज़स्टेट ("");
 कॉन्स्ट [पासवर्ड, सेटपासवर्ड] = यूज़स्टेट ("");
स्थिरांक [प्रमाणित, प्रमाणित] = यूज़स्टेट (
 localStorage.getItem (localStorage.getItem("प्रमाणीकृत") || असत्य)
 );
 कॉन्स्ट उपयोगकर्ता = [{उपयोगकर्ता नाम: "जेन", पासवर्ड: "टेस्टपासवर्ड" }];
स्थिरांक हैंडल सबमिट करें = (ई) => {
इ।चूक को रोकें();
स्थिरांक खाता = उपयोगकर्ता। ढूंढें ((उपयोगकर्ता) => उपयोगकर्ता। उपयोगकर्ता नाम उपयोगकर्ता नाम);
 अगर (खाता && खाता पासवर्ड पासवर्ड) {
 लोकलस्टोरेज.सेटआइटम ("प्रमाणीकृत", सच);
 नेविगेट ("/dashboard");
 }
 };
वापसी (
<डिव>
<सबमिट पर फ़ॉर्म = {हैंडल सबमिट करें}>
<इनपुट
 प्रकार ="मूलपाठ"
 नाम ="उपयोगकर्ता नाम"
 मूल्य = {उपयोगकर्ता नाम}
 ऑन चेंज = {(ई) => setusername (e.target.value)}
 />
<इनपुट
 प्रकार ="पासवर्ड"
 नाम ="पासवर्ड"
 ऑन चेंज = {(ई) => सेटपासवर्ड (e.target.value)}
 />
<इनपुट प्रकार ="प्रस्तुत" मूल्य ="प्रस्तुत करना" />
</form>
</div>
 );
};

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

एप्लिकेशन बनाते समय, एक लक्ष्य उपयोगकर्ताओं को सर्वोत्तम अनुभव देना होता है। आप उपयोगकर्ता को उस पृष्ठ पर वापस ले जाकर ऐसा कर सकते हैं जो वे पहले थे, उन्हें लॉगिन पृष्ठ पर पुनर्निर्देशित करके। आप इस तरह नेविगेट करने के लिए -1 पास करके ऐसा कर सकते हैं, नेविगेट (-1). यह आपके ब्राउज़र पर बैक बटन दबाने की तरह ही कार्य करता है।

प्रतिक्रिया में रूटिंग

इस लेख में, आपने सीखा कि कैसे आप किसी उपयोगकर्ता को रिएक्ट में किसी अन्य पृष्ठ पर नेविगेट करने के लिए नेविगेट घटक और दोनों का उपयोग करके पुनर्निर्देशित कर सकते हैं नेविगेट करें () अंकुश। लेख में यह प्रदर्शित करने के लिए एक लॉगिन प्रपत्र का उपयोग किया गया है कि आप कैसे अनधिकृत उपयोगकर्ताओं को एक संरक्षित पृष्ठ से लॉगिन पृष्ठ पर पुनर्निर्देशित कर सकते हैं।