مشكلة في التوجيه في جافاسكريبت

Ahmed Zehry · 4 أبريل

كيف اجعل المسارات في هذا الملف محمية بحيث لا يمكن الوصول اليها الا اذا هناك accesstoken في Cookies المتصفح
هذا الكود هو المسؤوول عن تسجيل الدخول وحفظ الaccesstoken في المتصفح


  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      const response = await axios.post('http://localhost:4000/api/auth/login', {
        email,
        password,
      })
      const { accessToken } = response.data.data
      Cookies.set('accessToken', accessToken) // Save the accessToken in a cookie
      setEmail('')
      setpassword('')
      // const history = useHistory();
      // history.push('/');
      window.location.replace('/')
    } catch (error) {
      sethaserror(true)
      console.log(error)
    }
  }

App.js

Chihab Hedidi · 4 أبريل

يمكنك حماية المسارات وجعلها متاحة فقط عند وجود AccessToken في الكوكيز، يمكنك استخدام middleware في جانب الخادم للتحقق من وجود AccessToken وصحته قبل السماح بالوصول إلى المسارات المحمية، فيما يلي مثال لكيفية تنفيذ ذلك باستخدام Express.js

// وسيط لحماية المسارات
const protectRoute = (req, res, next) => {
  const accessToken = req.cookies.accessToken;
  // التحقق مما إذا كان AccessToken موجودًا
  if (!accessToken) {
    return res.status(401).json({ message: "الرمز المميز مطلوب" });
  }
  // يمكنك هنا إضافة المزيد من التحققات، مثل انتهاء صلاحية الرمز المميز، الخ.

  // إذا كان كل شيء على ما يرام، فمتابعة إلى الوسيط التالي
  next();
};

// مثال على مسار محمي
app.get("/protected-route", protectRoute, (req, res) => {
  res.json({ message: "هذا المسار محمي" });
});

هنا قمت بإنشاء وسيط يدعى protectRoute يتحقق من وجود AccessToken في الكوكيز، إذا لم يكن هناك AccessToken، فسيتم إرجاع استجابة 401 غير مصرح بها، وإذا كان الAccessToken موجودا، فسيتم استدعاء الوسيط التالي باستخدام next().

يجب تسجيل هذا الوسيط للمسارات التي تحتاج إلى حماية، يمكنك فعل ذلك عن طريق إرفاقه بالطريق المناسب مثل ما هو موضح في المثال أعلاه، و يجب عليك تثبيت حزمة cookie-parser لاستخدام req.cookies.

Ahmed Zehry · 4 أبريل

بتاريخ 2 دقائق مضت قال Chihab Hedidi:
يمكنك حماية المسارات وجعلها متاحة فقط عند وجود AccessToken في الكوكيز، يمكنك استخدام middleware في جانب الخادم للتحقق من وجود AccessToken وصحته قبل السماح بالوصول إلى المسارات المحمية، فيما يلي مثال لكيفية تنفيذ ذلك باستخدام Express.js
// وسيط لحماية المسارات
const protectRoute = (req, res, next) => {
  const accessToken = req.cookies.accessToken;
  // التحقق مما إذا كان AccessToken موجودًا
  if (!accessToken) {
    return res.status(401).json({ message: "الرمز المميز مطلوب" });
  }
  // يمكنك هنا إضافة المزيد من التحققات، مثل انتهاء صلاحية الرمز المميز، الخ.

  // إذا كان كل شيء على ما يرام، فمتابعة إلى الوسيط التالي
  next();
};

// مثال على مسار محمي
app.get("/protected-route", protectRoute, (req, res) => {
  res.json({ message: "هذا المسار محمي" });
});
هنا قمت بإنشاء وسيط يدعى protectRoute يتحقق من وجود AccessToken في الكوكيز، إذا لم يكن هناك AccessToken، فسيتم إرجاع استجابة 401 غير مصرح بها، وإذا كان الAccessToken موجودا، فسيتم استدعاء الوسيط التالي باستخدام next().

يجب تسجيل هذا الوسيط للمسارات التي تحتاج إلى حماية، يمكنك فعل ذلك عن طريق إرفاقه بالطريق المناسب مثل ما هو موضح في المثال أعلاه، و يجب عليك تثبيت حزمة cookie-parser لاستخدام req.cookies.

لدي هذا الكود للتحقق في جزء الخادم

/**
 * Module dependencies.
 */
const jwtHelpers = require('../utils/jwtHelpers')

/**
 * Middleware check function.
 */
exports.check = (req, res, next) => {
    let token = req.headers['authorization']
    // Authorization: Bearer token....
    token = token?.replace('Bearer', '')?.trim()
    const payload = jwtHelpers.verify(token)
    if (payload) {
        req.userId = payload.sub
        return next()
    }
    res.status(401).json({
        message: 'Unauthorized!'
    })
}

ولكن انا اريد اجراء التحقق في تطبيق react للتاكد من وجود AccessToken كي يتمكن المستخدم من الدخول لصفحات التطبيق

Chihab Hedidi · 4 أبريل

بتاريخ 2 دقائق مضت قال Ahmed Zehry:
لدي هذا الكود للتحقق في جزء الخادم
/**
 * Module dependencies.
 */
const jwtHelpers = require('../utils/jwtHelpers')

/**
 * Middleware check function.
 */
exports.check = (req, res, next) => {
    let token = req.headers['authorization']
    // Authorization: Bearer token....
    token = token?.replace('Bearer', '')?.trim()
    const payload = jwtHelpers.verify(token)
    if (payload) {
        req.userId = payload.sub
        return next()
    }
    res.status(401).json({
        message: 'Unauthorized!'
    })
}
ولكن انا اريد اجراء التحقق في تطبيق react للتاكد من وجود AccessToken كي يتمكن المستخدم من الدخول لصفحات التطبيق

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

import React, { useEffect } from 'react';
import { Route, Navigate } from 'react-router-dom';
import Cookies from 'js-cookie';

// Define a protected route component
const ProtectedRoute = ({ element, ...rest }) => {
  const accessToken = Cookies.get('accessToken');
  
  useEffect(() => {
    if (!accessToken) {
      // If no accessToken, redirect to login page
      // You can also add some additional logic here, like displaying a message to the user
      window.location.replace('/login');
    }
  }, [accessToken]);

  // Render the requested component if accessToken is available
  return <Route {...rest} element={accessToken ? element : <Navigate to="/login" />} />;
};

// Example usage
const App = () => {
  return (
    <Routes>
      {/* Protected routes */}
      <ProtectedRoute path="/protected-route" element={<ProtectedComponent />} />
      {/* Non-protected routes */}
      <Route path="/login" element={<Login />} />
    </Routes>
  );
};

export default App;

مثلا هنا يتم استخدام useEffect للتحقق من وجود AccessToken في الكوكيز و إذا لم يكن متاحًا، سيتم توجيه المستخدم إلى صفحة تسجيل الدخول.

Ahmed Zehry · 4 أبريل

بتاريخ 2 دقائق مضت قال Chihab Hedidi:
يمكنك حماية المسارات وجعلها متاحة فقط عند وجود AccessToken في الكوكيز، يمكنك استخدام middleware في جانب الخادم للتحقق من وجود AccessToken وصحته قبل السماح بالوصول إلى المسارات المحمية، فيما يلي مثال لكيفية تنفيذ ذلك باستخدام Express.js
// وسيط لحماية المسارات
const protectRoute = (req, res, next) => {
  const accessToken = req.cookies.accessToken;
  // التحقق مما إذا كان AccessToken موجودًا
  if (!accessToken) {
    return res.status(401).json({ message: "الرمز المميز مطلوب" });
  }
  // يمكنك هنا إضافة المزيد من التحققات، مثل انتهاء صلاحية الرمز المميز، الخ.

  // إذا كان كل شيء على ما يرام، فمتابعة إلى الوسيط التالي
  next();
};

// مثال على مسار محمي
app.get("/protected-route", protectRoute, (req, res) => {
  res.json({ message: "هذا المسار محمي" });
});
هنا قمت بإنشاء وسيط يدعى protectRoute يتحقق من وجود AccessToken في الكوكيز، إذا لم يكن هناك AccessToken، فسيتم إرجاع استجابة 401 غير مصرح بها، وإذا كان الAccessToken موجودا، فسيتم استدعاء الوسيط التالي باستخدام next().

يجب تسجيل هذا الوسيط للمسارات التي تحتاج إلى حماية، يمكنك فعل ذلك عن طريق إرفاقه بالطريق المناسب مثل ما هو موضح في المثال أعلاه، و يجب عليك تثبيت حزمة cookie-parser لاستخدام req.cookies.

لدي هذا الكود للتحقق في جزء الخادم

/**
 * Module dependencies.
 */
const jwtHelpers = require('../utils/jwtHelpers')

/**
 * Middleware check function.
 */
exports.check = (req, res, next) => {
    let token = req.headers['authorization']
    // Authorization: Bearer token....
    token = token?.replace('Bearer', '')?.trim()
    const payload = jwtHelpers.verify(token)
    if (payload) {
        req.userId = payload.sub
        return next()
    }
    res.status(401).json({
        message: 'Unauthorized!'
    })
}

ولكن انا اريد اجراء التحقق في تطبيق react للتاكد من وجود AccessToken كي يتمكن المستخدم من الدخول لصفحات التطبيق

Ahmed Zehry · 4 أبريل

بتاريخ 4 ساعة قال Chihab Hedidi:
يمكنك القيام بذلك في كل مسار يتطلب التحقق من الهوية، يمكنك استخدام useEffect للتحقق من وجود AccessToken في الكوكيز عندما يتم تحميل المكون الخاص بالمسار.فيما يلي كيفية تحقق من وجود AccessToken وتوجيه المستخدم إلى صفحة تسجيل الدخول إذا لم يكن متاحًا:
import React, { useEffect } from 'react';
import { Route, Navigate } from 'react-router-dom';
import Cookies from 'js-cookie';

// Define a protected route component
const ProtectedRoute = ({ element, ...rest }) => {
  const accessToken = Cookies.get('accessToken');
  
  useEffect(() => {
    if (!accessToken) {
      // If no accessToken, redirect to login page
      // You can also add some additional logic here, like displaying a message to the user
      window.location.replace('/login');
    }
  }, [accessToken]);

  // Render the requested component if accessToken is available
  return <Route {...rest} element={accessToken ? element : <Navigate to="/login" />} />;
};

// Example usage
const App = () => {
  return (
    <Routes>
      {/* Protected routes */}
      <ProtectedRoute path="/protected-route" element={<ProtectedComponent />} />
      {/* Non-protected routes */}
      <Route path="/login" element={<Login />} />
    </Routes>
  );
};

export default App;
مثلا هنا يتم استخدام useEffect للتحقق من وجود AccessToken في الكوكيز و إذا لم يكن متاحًا، سيتم توجيه المستخدم إلى صفحة تسجيل الدخول.

عندما قمت بهذا ظهر لي هذا الخطا :

[ProtectedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

App.js

تم التعديل في 4 أبريل بواسطة Ahmed Zehry

Chihab Hedidi · 4 أبريل

بتاريخ 1 ساعة قال Ahmed Zehry:
عندما قمت بهذا ظهر لي هذا الخطا :
[ProtectedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
App.js 4.82 kB · 0 تنزيلات

الكود الذي كتبته لك مجرد مثال و يجب عليك تطبيقه على حسب طريقة برمجتك المستخدمة، يمكنك إلقاء نظرة على كيف قمت بدمجها هناك و يمكنك التعديل عليها على حسب متطلباتك.

App (1).js

Ahmed Zehry · 5 أبريل

بتاريخ 3 ساعة قال Chihab Hedidi:

الكود الذي كتبته لك مجرد مثال و يجب عليك تطبيقه على حسب طريقة برمجتك المستخدمة، يمكنك إلقاء نظرة على كيف قمت بدمجها هناك و يمكنك التعديل عليها على حسب متطلباتك.

App (1).js 2.38 kB · 1 تنزيل

شكرا على مساعدتك هذه الطريقة الصحيحة التي عمل بها الكود الخاص بي

App.js

مشكلة في التوجيه في جافاسكريبت

السؤال

Ahmed Zehry

7 أجوبة على هذا السؤال

Recommended Posts

Chihab Hedidi

Ahmed Zehry

Chihab Hedidi

Ahmed Zehry

Ahmed Zehry

Chihab Hedidi

Ahmed Zehry

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية