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

इस ट्यूटोरियल में, आप सीखेंगे कि आप रिएक्ट एप्लिकेशन में संरक्षित मार्ग कैसे बनाते हैं।

ध्यान दें कि आप रिएक्ट राउटर v6 का उपयोग करेंगे, जो पिछले संस्करणों से थोड़ा अलग है।

शुरू करना

आरंभ करने के लिए, उपयोग करें क्रिएट-रिएक्शन-ऐप एक साधारण प्रतिक्रिया आवेदन बूटस्ट्रैप करने के लिए।

एनपीएक्स क्रिएट-रिएक्शन-ऐप प्रोटेक्ट-रूट्स-रिएक्शन

उस फ़ोल्डर पर नेविगेट करें जो अभी बनाया गया था और अपना आवेदन शुरू करें।

सीडी प्रोटेक्ट-रूट्स-रिएक्शन
एनपीएम प्रारंभ

अपने पसंदीदा टेक्स्ट एडिटर के साथ अपना एप्लिकेशन फोल्डर खोलें और इसे साफ करें। तुम्हारी app.js इस तरह दिखना चाहिए।

फ़ंक्शन ऐप () {
 वापसी ;
}
निर्यात डिफ़ॉल्ट ऐप;

अब आप मार्ग निर्धारित करने के लिए तैयार हैं।

संबंधित: जावास्क्रिप्ट के साथ अपना पहला रिएक्ट ऐप कैसे बनाएं

रिएक्ट राउटर सेट करना

आप अपने एप्लिकेशन के लिए नेविगेशन सेट करने के लिए रिएक्ट राउटर का उपयोग करेंगे।

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

npm प्रतिक्रिया-राउटर-डोम स्थापित करें

इस एप्लिकेशन के लिए, आपके पास तीन मुख्य पृष्ठ होंगे:

• होम पेज (लैंडिंग पेज)।
• प्रोफ़ाइल पृष्ठ (संरक्षित, इसलिए केवल लॉग-इन उपयोगकर्ताओं के पास पहुंच है)।
• पृष्ठ के बारे में (सार्वजनिक ताकि कोई भी इसे एक्सेस कर सके)।

में नवबार.जेएस, उपयोग संपर्क से घटक प्रतिक्रिया-राउटर-डोम विभिन्न पथों के लिए नेविगेशन लिंक बनाने के लिए।

कॉन्स्ट {लिंक} = आवश्यकता ("प्रतिक्रिया-राउटर-डोम");
कास्ट नवबार = () => {
 वापसी (

 );
};
निर्यात डिफ़ॉल्ट नेवबार;

में app.js नेविगेशन मेनू में लिंक से मेल खाने वाले मार्ग बनाएं।

"रिएक्शन-राउटर-डोम" से {ब्राउज़र राउटर राउटर, रूट, रूट} के रूप में आयात करें;
"./Navbar" से नेवबार आयात करें;
"./होम" से होम इंपोर्ट करें;
"./Profile" से प्रोफ़ाइल आयात करें;
आयात के बारे में "./अबाउट" से;
फ़ंक्शन ऐप () {
 वापसी (



} />
} />
} />


 );
}
निर्यात डिफ़ॉल्ट ऐप;

अब आपको उन घटकों को बनाने की आवश्यकता है जिनका आपने उल्लेख किया है एपीपी.जेएस.

में होम.जेएस:

कास्ट होम = () => {
 वापसी 
होम पेज
;
};
डिफ़ॉल्ट होम निर्यात करें;

में प्रोफाइल.जेएस

कॉन्स्ट प्रोफाइल = () => {
 वापसी 
प्रोफ़ाइल पृष्ठ
;
};
निर्यात डिफ़ॉल्ट प्रोफ़ाइल;

में के बारे में.जेएस

कॉन्स्ट के बारे में = () => {
 वापसी 
पेज के बारे में
;
};
निर्यात डिफ़ॉल्ट के बारे में;

प्रतिक्रिया में संरक्षित मार्ग बनाना

अगला अप संरक्षित मार्ग बना रहा है। घर तथा के बारे में मार्ग सार्वजनिक हैं, जिसका अर्थ है कि कोई भी उन तक पहुंच सकता है, लेकिन प्रोफ़ाइल मार्ग के लिए उपयोगकर्ताओं को पहले प्रमाणित होना आवश्यक है। इसलिए, आपको उपयोगकर्ताओं में लॉग इन करने का एक तरीका बनाना होगा।

नकली प्रमाणीकरण सेट करना

चूंकि यह प्रमाणीकरण ट्यूटोरियल नहीं है, आप रिएक्ट का उपयोग करेंगे स्टेट हुक का उपयोग करें एक लॉगिन सिस्टम का अनुकरण करने के लिए।

में एपीपी.जेएस, निम्नलिखित जोड़ें।

"रिएक्ट-राउटर-डोम" से {रूट, रूट, ब्राउजर राउटर} आयात करें;
"प्रतिक्रिया" से आयात {useState};
// अन्य आयात विवरण
फ़ंक्शन ऐप () {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 कॉन्स्ट लॉगइन = () => {
 setisLoggedIn (सच);
 };
 कॉन्स्ट लॉगऑट = () => {
 setisLoggedIn (झूठा);
 };
 वापसी (


 {इसलॉग इन? (
लॉग आउट
 ): (
लॉग इन करें
 )}



 );
}
निर्यात डिफ़ॉल्ट ऐप;

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

यदि उपयोगकर्ता लॉग आउट है, तो लॉगिन बटन प्रदर्शित होता है। इस पर क्लिक करने से लॉगिन फंक्शन ट्रिगर हो जाएगा जो अपडेट करेगा लॉग इन है स्टेट टू ट्रू और बदले में डिस्प्ले को लॉगिन से लॉगआउट बटन तक।

संबंधित: उपयोगकर्ता प्रमाणीकरण क्या है और यह कैसे काम करता है?

निजी घटकों की सुरक्षा

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

उदाहरण के लिए, यदि आपके नए घटक का नाम "संरक्षित" है, तो आप इस तरह एक निजी घटक प्रस्तुत करेंगे।

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

इस लेख की शर्तों के आधार पर किसी घटक को रेंडर करने के लिए आप जिन अन्य तरीकों का उपयोग कर सकते हैं, उनके बारे में और जानें प्रतिक्रिया में सशर्त प्रतिपादन.

अपने आवेदन में, बनाएं संरक्षित.जेएस.

"रिएक्ट-राउटर-डोम" से आयात {नेविगेट};
कॉन्स्ट संरक्षित = ({isLoggedIn, बच्चे}) => {
 अगर (!isLoggedIn) {
 वापसी ;
 }
 बच्चों को लौटाओ;
};
निर्यात डिफ़ॉल्ट संरक्षित;

इस घटक में, if स्टेटमेंट का उपयोग यह जांचने के लिए किया जाता है कि उपयोगकर्ता प्रमाणित है या नहीं। अगर वे नहीं हैं, नेविगेट से प्रतिक्रिया-राउटर-डोम उन्हें होम पेज पर रीडायरेक्ट करता है। हालाँकि, यदि उपयोगकर्ता प्रमाणित है, तो चाइल्ड कंपोनेंट रेंडर किया जाता है।

उपयोग संरक्षित.जेएस में एपीपी.जेएस संशोधित करें प्रोफ़ाइल पृष्ठ मार्ग।

 पथ = "/ प्रोफ़ाइल"
 तत्व = {



 }
/>

ऐप.जेएस इस तरह दिखना चाहिए।

"रिएक्ट-राउटर-डोम" से {रूट, रूट, ब्राउजर राउटर} आयात करें;
"प्रतिक्रिया" से आयात {useState};
"./Navbar" से नेवबार आयात करें;
आयात "./संरक्षित" से संरक्षित;
"./होम" से होम इंपोर्ट करें;
आयात के बारे में "./अबाउट" से;
"./Profile" से प्रोफ़ाइल आयात करें;
फ़ंक्शन ऐप () {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 कॉन्स्ट लॉगइन = () => {
 setisLoggedIn (सच);
 };
 कॉन्स्ट लॉगऑट = () => {
 setisLoggedIn (झूठा);
 };
 वापसी (




 {इसलॉग इन? (
लॉग आउट
 ): (
लॉग इन करें
 )}

} />
 तत्व = {



 }
 />
} />





 );
}
निर्यात डिफ़ॉल्ट ऐप;

संरक्षित मार्ग बनाने पर यही है। अब आप प्रोफाइल पेज तक तभी पहुंच सकते हैं जब आप लॉग इन हों। यदि आप लॉग इन किए बिना प्रोफाइल पेज पर नेविगेट करने का प्रयास करते हैं तो आपको होम पेज पर रीडायरेक्ट कर दिया जाएगा।

भूमिका-आधारित अभिगम नियंत्रण

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

React.js में सशर्त प्रतिपादन कैसे लागू करें (उदाहरण के साथ)

सशर्त प्रतिपादन आपके ऐप को बेहतर बनाने का एक उपयोगी तरीका है। इसका उपयोग करने के कुछ तरीके यहां दिए गए हैं।

आगे पढ़िए

लेखक के बारे में