掌握 MERN 中的身份驗證：完整指南

身份驗證是任何處理用戶數(shù)據(jù)或個性化體驗的應(yīng)用程序的關(guān)鍵部分。在 MERN 堆棧（MongoDB、Express、React、Node.js）中，構(gòu)建強大的身份驗證系統(tǒng)需要了解后端和前端流程。本指南將引導(dǎo)您完成身份驗證設(shè)置，涵蓋關(guān)鍵概念、實際示例和最佳實踐。

---

1.身份驗證類型

了解身份驗證方法可以幫助您確定最適合您的應(yīng)用程序的方法：

• 基于會話的身份驗證：使用服務(wù)器端會話和 cookie 來跟蹤登錄用戶。
• 基于令牌的身份驗證：使用 JSON Web 令牌 (JWT) 來對用戶進行身份驗證和驗證。常用于現(xiàn)代網(wǎng)絡(luò)應(yīng)用程序。
• 第三方身份驗證：允許用戶使用 Google、Facebook 或 GitHub 等平臺登錄。

---

2.設(shè)置后端

后端處理用戶注冊、登錄和身份驗證邏輯。

第 1 步：安裝依賴項

首先安裝必要的軟件包：

npm install express mongoose bcrypt jsonwebtoken dotenv

第 2 步：定義用戶模型

使用 Mongoose 創(chuàng)建一個用于安全存儲用戶憑據(jù)的架構(gòu)：

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);

第 3 步：創(chuàng)建身份驗證路由

實現(xiàn)注冊和登錄路由：

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.使用中間件保護后端

通過驗證令牌來保護路由：

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;

在安全路線中使用它：

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.設(shè)置前端

React 前端管理用戶會話并與后端通信。

第 1 步：安裝 Axios

使用axios處理API請求：

npm install axios

第 2 步：創(chuàng)建身份驗證上下文

使用 React Context 和鉤子來管理身份驗證：

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>
  );
};

第 3 步：構(gòu)建受保護的路由

重定向未經(jīng)身份驗證的用戶：

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.處理令牌和會話持久性

現(xiàn)實生活中的例子

在健身應(yīng)用程序中，用戶希望即使在頁面重新加載后，他們的會話也能持續(xù)存在。如果沒有適當(dāng)?shù)牧钆拼鎯万炞C，theyu2019d 必須重復(fù)登錄。

解決方案

• 將令牌安全地存儲在 localStorage 或 sessionStorage 中。
• 在每個頁面加載時驗證令牌。

示例

npm install express mongoose bcrypt jsonwebtoken dotenv

---

6.增強安全性

• 加密敏感數(shù)據(jù)：使用 HTTPS 和安全 cookie。
• 實施速率限制：防止暴力攻擊。
• 使用刷新令牌：無需頻繁登錄即可延長會話持續(xù)時間。
• CORS 配置：限制后端訪問受信任的來源。

---

結(jié)論

MERN 中的身份驗證是后端邏輯和前端管理的混合。通過遵循最佳實踐，您可以創(chuàng)建安全、可擴展且用戶友好的身份驗證系統(tǒng)。無論是社交平臺、電子商務(wù)網(wǎng)站還是 SaaS 應(yīng)用程序，掌握身份驗證都可以確保無縫的用戶體驗。

---

？ 與我們保持聯(lián)系！

我們正在建立一個創(chuàng)新蓬勃發(fā)展、技術(shù)愛好者共同成長的社區(qū)。與我們一起踏上啟發(fā)、學(xué)習(xí)和創(chuàng)造的旅程！

？探索更多：

• Discord：與技術(shù)愛好者聯(lián)系
• WhatsApp：獲取實時更新
• 電報：每日見解和提示

？關(guān)注我們，獲取每日靈感：

• Instagram：@thecampuscoders
• 領(lǐng)英： @thecampuscoders
• Facebook：@thecampuscoders

---

？ 隨時訪問我們！

？ thecampuscoders.com

？探索資源、教程和更新，為您的技術(shù)之旅提供動力！

---

? 讓我們一起協(xié)作、學(xué)習(xí)、共創(chuàng)未來！

有想法或建議嗎？聯(lián)系我們，成為非凡事業(yè)的一部分！

？聯(lián)系我們： deepak@thecampuscoders.com

---

以上是掌握 MERN 中的身份驗證：綜合指南的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！