چیزهایی که باید در تنظیمات جلو و پس زمینه در نظر بگیرید – پشته Mern

سلام بچه ها! امیدوارم که همه چیز برای شما خیلی بد نباشد 🙂 بیایید وارد حالت دیگری شویم ، جایی که شما می فهمید که اتصال سرور و مشتری فقط با تنظیم چند کار انجام می شود ، که همیشه سعی می کند ما را گیج کند. من هم گیج شدم

در دنیای کمال گرایی! همه می خواهند در همه چیز کامل باشند ، اما وقت کافی برای تمرین ندارند. این همان کاری است که من در اینجا سعی می کنم در اینجا انجام دهم! بیایید شروع کنیم.

برای کار روی پروژه به صورت محلی مواردی از این دست را تنظیم کنید
1. Proxy Proxy برای مشتری در Package.json
"proxy": "http://localhost:5000"
2. از CORS برای رسیدگی به مواردی مانند اتصال Frontend و Backend در هنگام اجرای درگاه های مختلف استفاده کنید.
همانطور که سرور در حال کار است فرض 3000 ، و می خواهید به مشتری 5000 cors () متصل شوید () با افزودن فقط به این امر کمک می کند.
app.use(cors());
3. در جلو برای دسترسی به داده ها از پایگاه داده یا اضافه کردن هر چیزی به آن ، ما از Axios استفاده می کنیم.

Axios درخواست های HTTP مبتنی بر وعده است که به درخواست پس زمینه از Frontend کمک می کند.

بر خلاف ، Fetch Axios Hepls برای بازیابی داده ها با تبدیل خودکار پاسخ JSON به اشیاء JS ، که Code Code را آسان تر می کند.

axios.get("http://localhost:3000/data").then(res => console.log(res.data));

یک URL پایه را یک بار به جای تکرار آن در هر درخواست تنظیم کنید.

const api = axios.create({
  baseURL: "http://localhost:3000",
  timeout: 5000
});

api.get("/users").then(res => console.log(res.data));

اضافه کردن در مؤلفه ورود.

import API from "../api"; // Import Axios instance

 const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const res = await API.post("/auth/login", { email, password });
      localStorage.setItem("token", res.data.token);
      console.log("Login successful:", res.data);
    } catch (err) {
      console.error("Login failed:", err.response.data);
    }
  };

نشانه های بالا تنظیم شده است تا تأیید هویت کاربر را با استفاده از jsonwebtoken در backend انجام دهند.
برای این کار ، یک فایل use/auths.js را در دایرکتوری backend ایجاد کنید و این منطق را برای تولید نشانه برای کاربر خاص ورود به سیستم اضافه کنید.

UTILS/AUTH.JS

const jwt = require('jsonwebtoken');

module.exports = function(req, res, next) {
    const token = req.header('auth-token');
    if (!token) return res.status(401).send('Access denied');

    try {
        const verified = jwt.verify(token, process.env.JWT_SECRET);
        req.user = verified;
        next();
    } catch (err) {
        res.status(400).send('Invalid token');
    }
};

این امر احراز هویت ایمن بین Frontend و Backend را فراهم می کند و به کاربر اجازه می دهیم بدون ورود به سیستم ، به مسیرهای محافظت شده دسترسی پیدا کنیم ، تا زمانی که توکن منقضی شود.

این پرونده در صورت استفاده ، در قسمت کنترل کننده ها ، یا در گیرنده های مسیر که در آن قسمت کنترل کننده برای درخواست یا ACCES بر اساس شی درخواست شده انجام می شود ، توضیح داده شده است.

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../model/User');

const router = express.Router();

router.post("https://dev.to/login", async (req, res) => {
    const { username, password } = req.body;

    const user = await User.findOne({ username });
    if (!user) return res.status(400).send('Invalid credentials');

    const validPassword = await bcrypt.compare(password, user.password);
    if (!validPassword) return res.status(400).send('Invalid credentials');

    const token = jwt.sign({ _id: user._id }, process.env.JWT_SECRET);//creates the token based on the userid with secret key defined in .env file
    res.header('auth-token', token).send(token);
});

و این برای دسترسی به کاربر مشخص شده به مسیر محافظت شده منتقل می شود.

مثال:

اینستاگرام را در نظر بگیرید – هنگامی که پست ها ، لایک ها و فعالیت های خود را به سمت راست می کنید. وقتی به فعالیت های مختلف کاربر وارد می شوید ، با فعالیت قبلی متفاوت است. این چگونه ، احراز هویت با استفاده از مسیرهای محافظت شده کار می کند. مسیرها “فعالیت ur” برای شناسه مربوط به کاربر است که منحصر به فرد است ، زیرا jsonwebtoken آغاز می شود

const handleLogout = () => {
  localStorage.removeItem("token");
  window.location.href = "https://dev.to/login"; // Redirect to login page
};

قالب مسیرهای محافظت شده

const express = require('express');
const verifyToken = require('../utils/auth');

const router = express.Router();

router.get("https://dev.to/", verifyToken, (req, res) => {
    res.send('This is a protected post');
});

module.exports = router;

برای بررسی برنامه LocalStorage Respect UR و کلیک بر روی برنامه و دیدن در نوار کناری LocalStorage ، کوکی ها و غیره.

این کمی مقدمه یا تجدید نظر است. نوع چیز را برای پاسخ به این وبلاگ پاسخ دهید و باعث شود من محتوای مفید تری ایجاد کنم.