Menguasai Pengesahan dalam MERN: Panduan Komprehensif

Menguasai Pengesahan dalam MERN: Panduan Lengkap

Pengesahan ialah bahagian penting bagi mana-mana aplikasi yang berurusan dengan data pengguna atau pengalaman yang diperibadikan. Dalam timbunan MERN (MongoDB, Express, React, Node.js), membina sistem pengesahan yang mantap melibatkan pemahaman kedua-dua proses backend dan frontend. Panduan ini akan membimbing anda melalui penyediaan pengesahan, merangkumi konsep utama, contoh dunia sebenar dan amalan terbaik.

1. Jenis Pengesahan

Memahami kaedah pengesahan membantu anda memutuskan pendekatan terbaik untuk aplikasi anda:

• Pengesahan Berasaskan Sesi: Menggunakan sesi sisi pelayan dan kuki untuk menjejak pengguna yang log masuk.
• Pengesahan Berasaskan Token: Menggunakan JSON Web Token (JWT) untuk mengesahkan dan mengesahkan pengguna. Biasa digunakan dalam apl web moden.
• Pengesahan Pihak Ketiga: Membenarkan pengguna log masuk menggunakan platform seperti Google, Facebook atau GitHub.

2. Menyediakan Bahagian Belakang

Halaman belakang mengendalikan pendaftaran pengguna, log masuk dan logik pengesahan.

Langkah 1: Pasang Ketergantungan

Mulakan dengan memasang pakej yang diperlukan:

npm install express mongoose bcrypt jsonwebtoken dotenv

Langkah 2: Tentukan Model Pengguna

Gunakan Mongoose untuk mencipta skema untuk menyimpan bukti kelayakan pengguna dengan selamat:

const mongoose = require("mongoose");
const bcrypt = require("bcrypt");

const UserSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
});

// Hash password before saving
UserSchema.pre("save", async function (next) {
  if (!this.isModified("password")) return next();
  this.password = await bcrypt.hash(this.password, 10);
  next();
});

module.exports = mongoose.model("User", UserSchema);

Langkah 3: Buat Laluan Pengesahan

Laksanakan pendaftaran dan laluan log masuk:

const express = require("express");
const User = require("./models/User");
const bcrypt = require("bcrypt");
const jwt = require("jsonwebtoken");
const router = express.Router();
const SECRET_KEY = "your_secret_key"; // Use dotenv in production

// Register Route
router.post("/register", async (req, res) => {
  const { username, email, password } = req.body;
  try {
    const user = new User({ username, email, password });
    await user.save();
    res.status(201).json({ message: "User registered successfully" });
  } catch (err) {
    res.status(500).json({ error: "Error registering user" });
  }
});

// Login Route
router.post("/login", async (req, res) => {
  const { email, password } = req.body;
  try {
    const user = await User.findOne({ email });
    if (!user) return res.status(404).json({ error: "User not found" });

    const isPasswordValid = await bcrypt.compare(password, user.password);
    if (!isPasswordValid) return res.status(401).json({ error: "Invalid password" });

    const token = jwt.sign({ id: user._id }, SECRET_KEY, { expiresIn: "1h" });
    res.status(200).json({ message: "Login successful", token });
  } catch (err) {
    res.status(500).json({ error: "Error logging in" });
  }
});

module.exports = router;

3. Melindungi Bahagian Belakang dengan Middleware

Lindungi laluan dengan mengesahkan token:

const jwt = require("jsonwebtoken");

function authenticateToken(req, res, next) {
  const token = req.headers["authorization"];
  if (!token) return res.status(403).json({ error: "Access denied" });

  jwt.verify(token, "your_secret_key", (err, user) => {
    if (err) return res.status(403).json({ error: "Invalid token" });
    req.user = user;
    next();
  });
}

module.exports = authenticateToken;

Gunakannya dalam laluan selamat:

const express = require("express");
const authenticateToken = require("./middleware/authenticateToken");
const router = express.Router();

router.get("/profile", authenticateToken, (req, res) => {
  res.json({ message: `Welcome, User ${req.user.id}` });
});

4. Menyediakan Bahagian Hadapan

Halaman hadapan React mengurus sesi pengguna dan berkomunikasi dengan bahagian belakang.

Langkah 1: Pasang Axios

Gunakan Axios untuk mengendalikan permintaan API:

npm install axios

Langkah 2: Buat Konteks Pengesahan

Gunakan Konteks React dan cangkuk untuk mengurus pengesahan:

import React, { createContext, useState, useContext } from "react";
import axios from "axios";

const AuthContext = createContext();

export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = async (email, password) => {
    const { data } = await axios.post("/api/login", { email, password });
    localStorage.setItem("token", data.token);
    setUser(data.user);
  };

  const logout = () => {
    localStorage.removeItem("token");
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

Langkah 3: Bina Laluan Dilindungi

Ubah hala pengguna yang tidak disahkan:

import React from "react";
import { Navigate } from "react-router-dom";
import { useAuth } from "./AuthProvider";

const ProtectedRoute = ({ children }) => {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" />;
};

export default ProtectedRoute;

5. Mengendalikan Token dan Kegigihan Sesi

Contoh Kehidupan Sebenar

Dalam apl kecergasan, pengguna menjangkakan sesi mereka berterusan walaupun selepas dimuat semula halaman. Tanpa storan dan pengesahan token yang betul, mereka2019d perlu log masuk berulang kali.

Penyelesaian

• Simpan token dengan selamat dalam localStorage atau sessionStorage.
• Sahkan token pada setiap pemuatan halaman.

Contoh

npm install express mongoose bcrypt jsonwebtoken dotenv

6. Meningkatkan Keselamatan

• Sulitkan Data Sensitif: Gunakan HTTPS dan kuki selamat.
• Laksanakan Pengehadan Kadar: Cegah serangan kekerasan.
• Gunakan Token Muat Semula: Lanjutkan tempoh sesi tanpa memerlukan log masuk yang kerap.
• Konfigurasi CORS: Hadkan akses hujung belakang kepada asal yang dipercayai.

Kesimpulan

Pengesahan dalam MERN ialah gabungan logik bahagian belakang dan pengurusan bahagian hadapan. Dengan mengikuti amalan terbaik, anda boleh mencipta sistem pengesahan yang selamat, berskala dan mesra pengguna. Sama ada platform sosial, tapak e-dagang atau aplikasi SaaS, menguasai pengesahan memastikan pengalaman pengguna yang lancar.

? Kekal Terhubung dengan Kami!

Kami sedang membina komuniti di mana inovasi berkembang pesat dan peminat teknologi berkembang bersama. Sertai kami dalam perjalanan kami untuk memberi inspirasi, belajar dan mencipta!

? Teroka Lagi:

• Discord: Berhubung dengan peminat teknologi
• WhatsApp: Dapatkan kemas kini masa nyata
• Telegram: Cerapan dan petua harian

? Ikuti Kami untuk Inspirasi Harian:

• Instagram: @thecampuscoders
• LinkedIn: @thecampuscoders
• Facebook: @thecampuscoders

? Lawati Kami Pada Bila-bila Masa!

? thecampuscoders.com

? Terokai sumber, tutorial dan kemas kini yang menyemarakkan perjalanan teknologi anda!

✨ Mari Bekerjasama, Belajar dan Bina Masa Depan Bersama-sama!

Ada idea atau cadangan? Hubungi kami dan jadilah sebahagian daripada sesuatu yang luar biasa!

? Hubungi Kami: deepak@thecampuscoders.com

Atas ialah kandungan terperinci Menguasai Pengesahan dalam MERN: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!