इसलिए मैं अपने Next.js ऐप में ऑथेंटिकेशन लॉजिक बना रहा हूं। मैंने /api/auth/login पृष्ठ बनाया जहां मैं अनुरोध संभालता हूं और यदि उपयोगकर्ता का डेटा अच्छा है, तो मैं जेडब्ल्यूटी टोकन के साथ एक httpOnly कुकी बना रहा हूं और कुछ डेटा को फ्रंटएंड पर वापस कर रहा हूं। वह हिस्सा ठीक काम करता है लेकिन मुझे कुछ पृष्ठों की सुरक्षा के लिए किसी तरह की आवश्यकता है ताकि केवल लॉग किए गए उपयोगकर्ता ही उन तक पहुंच सकें और मुझे इसके लिए एचओसी बनाने में समस्या है।

सबसे अच्छा तरीका मैंने देखा getInitialProps का उपयोग करना है, लेकिन Next.js साइट पर यह कहता है कि मुझे अब इसका उपयोग नहीं करना चाहिए, इसलिए मैंने getServerSideProps का उपयोग करने के बारे में सोचा, लेकिन यह या तो काम नहीं करता है या मैं' मैं शायद कुछ गलत कर रहा हूँ।

यह मेरा एचओसी कोड है: (कुकी "उपयोगकर्ता टोकन" नाम के तहत संग्रहीत हैं)

import React from 'react';
const jwt = require('jsonwebtoken');

const RequireAuthentication = (WrappedComponent) => {

  return WrappedComponent;
};


export async function getServerSideProps({req,res}) {
  const token = req.cookies.userToken || null;

// no token so i take user  to login page
  if (!token) {
      res.statusCode = 302;
      res.setHeader('Location', '/admin/login')
      return {props: {}}
  } else {
    // we have token so i return nothing without changing location
       return;
     }
}
export default RequireAuthentication;

यदि आपके पास कोई अन्य विचार है कि कुकीज़ के साथ Next.js में ऑथ को कैसे संभालना है, तो मैं मदद के लिए आभारी रहूंगा क्योंकि मैं सर्वर साइड रेंडरिंग रिएक्शन / ऑथ के लिए नया हूं।

5
aleksander frnczak 6 फरवरी 2021, 22:32

1 उत्तर

सबसे बढ़िया उत्तर

आपको अपने प्रमाणीकरण तर्क को getServerSideProps से अलग और निकालना चाहिए।

उदाहरण के लिए, आपके पास एक उच्च-क्रम वाला फ़ंक्शन हो सकता है जो एक अन्य फ़ंक्शन (आपका getServerSideProps) को स्वीकार करेगा और यदि userToken सेट नहीं किया गया था, तो यह आपके लॉगिन पृष्ठ पर रीडायरेक्ट करेगा।

export function requireAuthentication(gssp) {
    return async (context) => {
        const { req, res } = context;
        const token = getUserToken(req.headers.cookie) // Add logic to extract token from `req.headers.cookie`

        if (!token) {
            // Redirect to login page
            return {
                redirect: {
                    destination: '/about',
                    statusCode: 302
                }
            };
        }

        return await gssp(context); // Continue on to call `getServerSideProps` logic
    }
}

फिर आप इसे अपने पेज में getServerSideProps फंक्शन को रैप करके इस्तेमाल करेंगे।

// pages/index.js (or some other page)

export const getServerSideProps = requireAuthentication(context => {
    // Your normal `getServerSideProps` code here
})
15
juliomalves 23 जुलाई 2021, 20:42
सहायता के लिए धन्यवाद! हालांकि मुझे एक और समस्या है, मुझे "getServerSideProps" में कुकीज़ नहीं मिल रही हैं, मैंने req.cokies.userToken के साथ कोशिश की, npm पैकेज जैसे नुकीज या कुकी के साथ और कुछ भी काम नहीं कर रहा है। मुझे संदर्भ वस्तु मिलती है लेकिन जब मैं ब्राउज़र पर उस कुकी को देखता हूं तो मैं req.cookies को प्राप्त और खाली ऑब्जेक्ट ईवेंट तक पहुंचता हूं
 – 
aleksander frnczak
8 फरवरी 2021, 19:32
मुझे यह समस्या पहले नहीं मिली क्योंकि मुझे अपने समाधान के साथ अब तक नहीं मिला है इसलिए मुझे लगता है कि यह इससे संबंधित है
 – 
aleksander frnczak
8 फरवरी 2021, 19:56
कुकीज़ स्ट्रिंग तक पहुँचने के लिए आपको req.headers.cookie का उपयोग करने की आवश्यकता है। फिर आपको इससे userToken प्राप्त करने के लिए स्ट्रिंग को पार्स करना होगा। इसे प्रतिबिंबित करने के लिए मेरा उत्तर अपडेट किया।
 – 
juliomalves
8 फरवरी 2021, 20:07
1
ठीक है, मेरे पास मेरे req.headers co में कुकी ऑब्जेक्ट भी नहीं है, मैं अभी एक नया धागा शुरू करता हूं क्योंकि मुझे यकीन नहीं है कि यह आपके उत्तर से संबंधित है, लेकिन मदद के लिए बहुत बहुत धन्यवाद!
 – 
aleksander frnczak
9 फरवरी 2021, 00:40
एचओसी केवल वही भेजेगा जो उसे भेजा जाएगा, इसलिए यह अपने आप में कोई मुद्दा नहीं होना चाहिए। मैंने स्थानीय रूप से इसका परीक्षण किया है, और मैं देख सकता हूं कि एचओसी के अंदर req.headers.cookie में कुकीज़ पास की जा रही हैं।
 – 
juliomalves
9 फरवरी 2021, 00:44