معالجة مشكل جلب البيانات من قاعدة البيانات mongoDb و عرضها بواسطة react js

هل حاولت إضافة رمز التوثيق إلى الطلب؟ عن طريق إضافة حقل Authorization كالتالي:

useEffect(() => {
    const getUser = async() => {
        const token = localStorage.getItem("token");
        const headers = {
            "Authorization": `Bearer ${token}`
        };
        await axios.get('/api/auth', { headers })
        .then(res => console.log(res.data))
        .catch(err => console.log(err, "err"))
    }
    getUser()
  }, [])

أيضًا تأكد من التالي:

1. العنوان الموجه (proxy) في ملف package.json الخاص بمشروع ReactJS يشير إلى الخادم الصحيح أي التأكد من أن الخادم Node.js يعمل على الميناء 3001 وأن العنوان الذي تم تحديده في package.json هو الصحيح.
2. الخادم Node.js يقوم بالتصريح بشكل صحيح بالمسار '/api/auth'، وهذا مهم لأنه يجب أن يتطابق مع المسار الذي تم استدعاءه من مشروع ReactJS.
3. تأكد من أن الرمز المرسل في رأس الطلب من مشروع ReactJS (x-auth-token) هو الرمز الصحيح ويتطابق مع الرمز الذي تم إنشاؤه عند تسجيل الدخول.
4. قم بتصحيح أي مشكلات محتملة في وظيفة protect وتأكد من أنها تقوم بإصدار رمز المصادقة (Token) بشكل صحيح وأنها تستجيب للطلبات بالشكل الصحيح.

بتاريخ 17 دقائق مضت قال Mustafa Suleiman:

const token = localStorage.getItem("token");
        const headers = {
            "Authorization": `Bearer ${token}`
        };

قمت بإضافة هذا الكود لكن لم يتغير شيء.

أرجو إرفاق مجلد المشروع لتفقد المشكلة.

بتاريخ 3 دقائق مضت قال Mustafa Suleiman:

أرجو إرفاق مجلد المشروع لتفقد المشكلة.

تفضل

hsoub.zip

مجلد المشروع لا يوجد به مجلد الخادم، بل مجلد الـ client مكرر مرتين ولكن بداخل مجلد server

بتاريخ 2 دقائق مضت قال Mustafa Suleiman:

مجلد المشروع لا يوجد به مجلد الخادم، بل مجلد الـ client مكرر مرتين ولكن بداخل مجلد server

عذرا أخي

hsoub (2).zip

أعتذر مجددا

بتاريخ الآن قال محمود سعداوي2:

عذرا أخي

hsoub (2).zip 673.66 kB · 0 تنزيلات

أعتذر مجددا

مرحبا محمود، 

انتبه إلى أن المسار التالي: 

// /api/auth
router.get('/', protect, getCurrentUser)

محمي بالطبقة الوسيطة protect التي يتم استيرادها من ملف authMiddleware والمعبر عنها بالشيفرة التالية:

const jwt = require("jsonwebtoken")

const protect =  (req, res, next) => {
    // Get token from header
    const token = req.header('x-auth-token')

    // Check if no token
    if (!token) {
        return res.status(401).json({msg: 'No token, authorization denied!'})
    }

    // Verify token
    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET)
        req.user = decoded.user
        next()
    } catch (err) {
        res.status(401).json({msg: 'Token is not valid'})
    }
}

module.exports = protect

يتم هاهنا فحص الترويسة x-auth-header من الطلب، والتي تعبر عن رمز توكن الذي يتم به مصادقة الطلب. 

يتطلب هذا أن يقوم العميل بإرسال قيمة رمز توكن مرتبطة بهاته الترويسة، ولذلك يمكنك استخدام الكود الذي اقترحه المدرب مصطفى لذات الغرض، غير أنك تحتاج هاته المرة وصف ترويسة بذات الاسم:

بتاريخ 26 دقائق مضت قال Mustafa Suleiman:

useEffect(() => {
    const getUser = async() => {
        const token = localStorage.getItem("token");
        const headers = {
            "x-auth-header": `Bearer ${token}`
        };
        await axios.get('/api/auth', { headers })
        .then(res => console.log(res.data))
        .catch(err => console.log(err, "err"))
    }
    getUser()
  }, [])

بتاريخ On 19‏/9‏/2023 at 17:50 قال محمود سعداوي2:

السلام عليكم.

لجلب البيانات من قاعدة البيانات قمت بالكود التالي

useEffect(() => {
    const getUser = async() => {
        await axios.get('/api/auth')
        .then(res => console.log(res.data))
        .catch(err => console.log(err, "err"))
    }
    getUser()
  }, [])

package.json

 "proxy": "http://127.0.0.1:3001"

في جهة الخادم

authCtr.js

const getCurrentUser = async(req, res) => {
    try {
        const user = await User.findById(req.user.id).select('-password');
        res.json(user)
    } catch (error) {
        console.log(error)
        res.status(500).send("Server error"); 
    }
}

authRoute.js

// /api/auth
router.get('/', protect, getCurrentUser)

server.js

app.use('/api/auth', require('./routes/authRoute'))

الدالة protect

const jwt = require("jsonwebtoken")

const protect =  (req, res, next) => {
    // Get token from header
    const token = req.header('x-auth-token')

    // Check if no token
    if (!token) {
        return res.status(401).json({msg: 'No token, authorization denied!'})
    }

    // Verify token
    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET)
        req.user = decoded.user
        next()
    } catch (err) {
        res.status(401).json({msg: 'Token is not valid'})
    }
}

module.exports = protect

عند إستخدام postman لا توجد مشاكل

لكن في طرف العميل تظهر رسالة الخطأ التالية

شكرا على المساعدة

اواجه نفس الخطا ولم استطيع تحديد الممشكلة

server-main.zip test-main.zip

بتاريخ On 14‏/11‏/2023 at 19:42 قال Mohamed Ramzi2:

اواجه نفس الخطا ولم استطيع تحديد الممشكلة

server-main.zip 143.08 kB · 0 تنزيلات test-main.zip 2.02 MB · 0 تنزيلات

في طرف العميل لم يتم التحقق بيانات المستخدم.

المستخدم الذي سيرسل الطلب handlesubmit ليست لديه الصلاحية.

عليك إضافة ترويسة الطلب ( request headers)

بالتوفيق

بتاريخ 42 دقائق مضت قال محمود سعداوي2:

في طرف العميل لم يتم التحقق بيانات المستخدم.

المستخدم الذي سيرسل الطلب handlesubmit ليست لديه الصلاحية.

عليك إضافة ترويسة الطلب ( request headers)

بالتوفيق

نعم قمت بذلك اخي كل ما اريد فعله جلب jwt بدون علامة تنصيص قمت بستخدام slice نجح الامر ولكن تظهر اخطا هل توجد اخرى

بتاريخ 15 دقائق مضت قال Mohamed Ramzi2:

نعم قمت بذلك اخي كل ما اريد فعله جلب jwt بدون علامة تنصيص قمت بستخدام slice نجح الامر ولكن تظهر اخطا هل توجد اخرى

جرب json.parse