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

या ट्युटोरियलमध्ये, तुम्ही React अॅप्लिकेशन्समध्ये संरक्षित मार्ग कसे तयार करायचे ते शिकाल.

लक्षात घ्या की तुम्ही React Router v6 वापरत आहात, जे मागील आवृत्त्यांपेक्षा थोडे वेगळे आहे.

सुरू करण्यासाठी

प्रारंभ करण्यासाठी, एक साधा प्रतिक्रिया अनुप्रयोग बूटस्ट्रॅप करण्यासाठी create-react-app वापरा.

तुमच्या आवडत्या मजकूर संपादकासह तुमचे Applications फोल्डर उघडा आणि ते साफ करा. तुमचे app.js असे दिसले पाहिजे.

प्रतिक्रिया राउटर सेट करा

तुमच्या ऍप्लिकेशनसाठी नेव्हिगेशन सेट करण्यासाठी तुम्ही React राउटर वापराल.

navbar.js मध्ये, वेगवेगळ्या पथांसाठी नेव्हिगेशन लिंक तयार करण्यासाठी react-router-dom मधील लिंक घटक वापरा.

React मध्ये संरक्षित मार्ग तयार करणे

पुढे संरक्षित मार्ग तयार करत आहे. घर आणि बद्दलचे मार्ग सार्वजनिक आहेत याचा अर्थ कोणीही त्यात प्रवेश करू शकतो, परंतु प्रोफाइल मार्गांसाठी वापरकर्त्यांनी प्रथम प्रमाणीकरण करणे आवश्यक आहे. म्हणून, तुम्हाला लॉग इन केलेल्या वापरकर्त्यांसाठी एक मार्ग तयार करण्याची आवश्यकता आहे.

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

हे प्रमाणीकरण ट्यूटोरियल नसल्यामुळे, तुम्ही लॉगिन सिस्टीमचे अनुकरण करण्यासाठी React usestate हुक वापराल.

येथे, तुम्ही राज्य वापरून वापरकर्त्याच्या लॉगिन स्थितीचा मागोवा घेत आहात. तुमच्याकडे दोन बटणे आहेत, लॉगिन आणि लॉगआउट बटण. वापरकर्त्याने लॉग इन केले आहे की नाही यावर अवलंबून ही बटणे बदलून सादर केली जातात.

जर वापरकर्ता लॉग आउट झाला असेल तर लॉगिन बटण प्रदर्शित होईल. यावर क्लिक केल्याने लॉगिन फंक्शन ट्रिगर होईल जे isLoggedIn स्टेटस सत्य वर अपडेट करेल आणि त्या बदल्यात डिस्प्ले लॉगिन ते लॉगआउट बटणावर बदलेल.

खाजगी घटकांचे संरक्षण

मार्ग संरक्षित करण्यासाठी, खाजगी घटकांना isLoggedIn मूल्यामध्ये प्रवेश असणे आवश्यक आहे. तुम्ही एक नवीन घटक तयार करून हे करू शकता जो isLoggedIn स्टेटला प्रोप म्हणून स्वीकारतो आणि खाजगी घटक लहानपणी स्वीकारतो.

उदाहरणार्थ, जर तुमच्या नवीन घटकाचे नाव “संरक्षित” असेल, तर तुम्ही खाजगी घटक याप्रमाणे रेंडर कराल.

संरक्षित घटक isLoggedIn खरे आहे की खोटे हे तपासेल. ते खरे असल्यास, ते पुढे जाईल आणि खाजगी घटक परत करेल. ते खोटे असल्यास, ते वापरकर्त्यास एका पृष्ठावर पुनर्निर्देशित करेल जेथे ते लॉग इन करू शकतात.

प्रतिक्रिया मधील सशर्त प्रस्तुतीकरणावरील या लेखातील अटींवर आधारित घटक रेंडर करण्यासाठी तुम्ही वापरू शकता अशा इतर पद्धतींबद्दल अधिक जाणून घ्या.

या घटकामध्ये, if स्टेटमेंट वापरकर्ता प्रमाणीकृत आहे की नाही हे तपासण्यासाठी वापरले जाते. ते नसल्यास, react-router-dom वर नेव्हिगेट करा त्यांना मुख्यपृष्ठावर पुनर्निर्देशित करते. तथापि, वापरकर्ता प्रमाणीकृत असल्यास, मूल घटक प्रस्तुत केला जातो.

संरक्षित मार्ग तयार करताना तेच आहे. आता तुम्ही लॉग इन केल्यावरच प्रोफाइल पेजवर प्रवेश करू शकता. तुम्ही लॉग इन न करता प्रोफाइल पेजवर नेव्हिगेट करण्याचा प्रयत्न केल्यास तुम्हाला होम पेजवर रीडायरेक्ट केले जाईल.

भूमिका-आधारित प्रवेश नियंत्रण

या ट्युटोरियलने तुम्हाला दाखवले आहे की तुम्ही अनधिकृत वापरकर्त्यांना प्रतिक्रिया ऍप्लिकेशनमधील पेज ऍक्सेस करण्यापासून कसे प्रतिबंधित करू शकता.

काही प्रकरणांमध्ये, तुम्हाला आणखी पुढे जाण्याची आणि वापरकर्त्यांना त्यांच्या भूमिकांवर आधारित प्रतिबंधित करण्याची आवश्यकता असू शकते. उदाहरणार्थ, तुमच्याकडे एखादे पृष्ठ असू शकते, जसे की विश्लेषण पृष्ठ, जे केवळ प्रशासक प्रवेश देते. येथे, तुम्हाला संरक्षित घटकामध्ये तर्क जोडणे आवश्यक आहे जे वापरकर्ता आवश्यक अटी पूर्ण करतो की नाही हे तपासतो.