ReactJs के साथ फुल स्टैक वेब ऐप्स बनाने के अपने शुरुआती दिनों में, मैंने खुद को भ्रमित पाया कि फ्रंटएंड में प्रमाणीकरण को कैसे संभालना है। मेरा मतलब है, बैकएंड से अपना एक्सेस टोकन प्राप्त करने के बाद आपको आगे क्या करना चाहिए? आप लॉगिन स्थिति को कैसे सुरक्षित रखते हैं?

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

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

पहला कदम

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

import axios from 'axios'
import { useState } from "react"

export default function LoginForm() {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")

    const handleSubmit = async() => {
        try {
            const response = await axios.post("/api/auth/login", { email, password })
            if (response?.status !== 200) {
                throw new Error("Failed login")
            }
            const token = response?.data?.token
            const userInfo = response?.data?.userInfo
        } catch (error) {
            throw error
        }
    }

    return(
        

चरण दो

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

import { createContext } from "react";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {

    return(
        
            {children}
        
    )
}

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import AuthProvider from "./AuthContext";

const router = createBrowserRouter([
    // your routes here
])

function App() {
    return(
        
    )
}

export default App

तीसरा कदम

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

import { createContext, useState } from "react";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [authenticatedUser, setAuthenticatedUser] = useState(null)

    const values = {
        isLoggedIn,
        authenticatedUser,
        setAuthenticatedUser
    }

    return(
        
            {children}
        
    )
}

चरण चार

नैनोस्टोर्स जावास्क्रिप्ट ऐप्स में स्थिति के प्रबंधन के लिए एक पैकेज है। पैकेज कई घटकों में राज्य मानों को प्रबंधित करने के लिए एक सरल एपीआई प्रदान करता है, बस इसे एक अलग फ़ाइल में प्रारंभ करके और इसे किसी भी घटक में आयात करके जहां आप राज्य का उपयोग करना चाहते हैं या इसे अपडेट करना चाहते हैं। लेकिन, चरण एक में HTTP प्रतिक्रिया में प्राप्त आपके ऑथ टोकन को संग्रहीत करने के उद्देश्य से, आप नैनोस्टोर्स/परसिस्टेंट का उपयोग करेंगे। यह पैकेज आपकी स्थिति को लोकलस्टोरेज में संग्रहीत करके बनाए रखता है, इस तरह जब आप पृष्ठ को रीफ्रेश करते हैं तो यह साफ़ नहीं होता है। @nanostores/react नैनोस्टोर्स के लिए एक प्रतिक्रिया विशिष्ट एकीकरण है, यह नैनोस्टोर स्थिति से मान निकालने के लिए यूज़स्टोर हुक उपलब्ध कराता है।

तो अब आप आगे बढ़ सकते हैं और:

• निम्नलिखित पैकेज स्थापित करें: nanostores, @nanostores/persistent और @nanostores/react।

• user.atom.js नाम की एक अलग फ़ाइल में या आप इसे जो भी नाम देना चाहें, nanostores/persistent का उपयोग करके एक 'authToken' स्टोर और एक 'user' स्टोर प्रारंभ करें।

• उन्हें अपने लॉगिन फॉर्म घटक फ़ाइल में आयात करें और अपने लॉगिन प्रतिक्रिया में प्राप्त टोकन और उपयोगकर्ता डेटा के साथ स्थिति को अपडेट करें।
  

npm i nanostores @nanostores/persistent @nanostores/react

import { persistentMap } from '@nanostores/persistent'

export const authToken = persistentMap('token', null)

export const user = persistentMap('user', null)

import { authToken, user } from './user.atom'

 const handleSubmit = async() => {
        try {
            const response = await axios.post("/api/auth/login", { email, password })
            if (response?.status !== 200) {
                throw new Error("Failed login")
            }
            const token = response?.data?.token
            const userInfo = response?.data?.userInfo

            authToken.set(token)
            user.set(userInfo)
        } catch (error) {
            throw error
        }
    }

चरण पांच

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

• 'ऑथटोकन' और 'उपयोगकर्ता' स्टोर आयात करें।

• प्रारंभ में एक यूज़इफ़ेक्ट हुक, हुक के अंदर, एक 'चेकलॉगिन()' फ़ंक्शन बनाएं जो जांच करेगा कि टोकन 'ऑथटोकन' स्टोर में मौजूद है या नहीं, यदि है, तो यह जांचने के लिए एक फ़ंक्शन चलाएं कि क्या यह है खत्म हो चुका। जाँच के आपके परिणामों के आधार पर, आप या तो उपयोगकर्ता को प्रमाणित करने के लिए लॉगिन पृष्ठ पर रीडायरेक्ट करते हैं या... 'isLoggedIn' स्थिति को सत्य पर सेट करते हैं। अब यह सुनिश्चित करने के लिए कि लॉगिन स्थिति को अधिक बार ट्रैक किया जाता है, इस हुक को हर बार वर्तमान पथ में परिवर्तन होने पर चलाने के लिए सेट किया जा सकता है, इस तरह, यदि ऐप के साथ इंटरैक्ट करते समय उनका टोकन समाप्त हो जाता है तो उपयोगकर्ता को बाहर निकाला जा सकता है या लॉगिन पेज पर रीडायरेक्ट किया जा सकता है। .

• एक और यूज़इफेक्ट हुक शुरू करें जिसमें हर बार ऐप लोड या रीफ्रेश होने पर ऑथटोकन स्टोर में टोकन का उपयोग करके बैकएंड से उपयोगकर्ता की जानकारी लाने के लिए एक फ़ंक्शन शामिल होगा। यदि आपको एक सफल प्रतिक्रिया प्राप्त होती है, तो 'isLoggedIn' स्थिति को सही पर सेट करें और प्रतिक्रिया में प्राप्त उपयोगकर्ता जानकारी के साथ 'प्रमाणीकृत उपयोगकर्ता' स्थिति और 'उपयोगकर्ता' स्टोर को अपडेट करें।

नीचे अद्यतन AuthProvider घटक फ़ाइल है।

import { createContext, useState } from "react";
import { authToken, user } from './user.atom';
import { useStore } from "@nanostores/react";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [authenticatedUser, setAuthenticatedUser] = useState(null)
    const token = useStore(authToken)
    const navigate = useNavigate()
    const { pathname } = useLocation()

    function isTokenExpired() {
        // verify token expiration and return true or false
    }

    // Hook to check if user is logged in 
    useEffect(() => {
        async function checkLogin () {
            if (token) {

              const expiredToken = isTokenExpired(token);

              if (expiredToken) {
                // clear out expired token and user from store and navigate to login page
                authToken.set(null)
                user.set(null)
                setIsLoggedIn(false);
                navigate("/login");
                return;
              }
            }
        };

        checkLogin()
    }, [pathname])

    // Hook to fetch current user info and update state
    useEffect(() => {
        async function fetchUser() {
            const response = await axios.get("/api/auth/user", {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })

            if(response?.status !== 200) {
                throw new Error("Failed to fetch user data")
            }

            setAuthenticatedUser(response?.data)
            setIsLoggedIn(true)
        }

        fetchUser()
    }, [])

    const values = {
        isLoggedIn,
        authenticatedUser,
        setAuthenticatedUser
    }

    return(
        
            {children}
        
    )
}

निष्कर्ष

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

import { useContext } from "react";
import { AuthContext } from "./AuthContext";

export default function MyLoggedInComponent() {

    const { isLoggedIn, authenticatedUser } = useContext(AuthContext)

    return(
        
        {
            isLoggedIn ? 
            
Welcome {authenticatedUser?.name}
            :
            Login
        }
        >
    )
}

लॉगआउट पर याद रखें, आपको 'authToken' और 'user' स्टोर को शून्य पर सेट करके साफ़ करना होगा। आपको 'isLoggedIn' को गलत और 'प्रमाणीकृत उपयोगकर्ता' को शून्य पर भी सेट करना होगा।

पढ़ने के लिए धन्यवाद!