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

身份驗證是任何處理使用者資料或個人化體驗的應(yīng)用程式的關(guān)鍵部分。在 MERN 堆疊（MongoDB、Express、React、Node.js）中，建立強大的身份驗證系統(tǒng)需要了解後端和前端流程。本指南將引導(dǎo)您完成身份驗證設(shè)置，涵蓋關(guān)鍵概念、實際範(fàn)例和最佳實踐。

---

1.驗證類型

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

• 基於會話的身份驗證：使用伺服器端會話和 cookie 來追蹤登入使用者。
• 基於令牌的身份驗證：使用 JSON Web 令牌 (JWT) 來對使用者進(jìn)行身份驗證和驗證。常用於現(xiàn)代網(wǎng)路應(yīng)用程式。
• 第三方驗證：允許使用者使用 Google、Facebook 或 GitHub 等平臺登入。

---

2.設(shè)定後端

後端處理使用者註冊、登入和驗證邏輯。

第 1 步：安裝依賴項

先安裝必要的軟體包：

npm install express mongoose bcrypt jsonwebtoken dotenv

第 2 步：定義使用者模型

使用 Mongoose 建立一個用於安全儲存使用者憑證的架構(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 步：建立驗證路由

實現(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.使用中間件保護(hù)後端

透過驗證令牌來保護(hù)路由：

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 步：建立身分驗證上下文

使用 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)受保護(hù)的路由

重定向未經(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 必須重複登入。

解決方案

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

範(fàn)例

npm install express mongoose bcrypt jsonwebtoken dotenv

---

6.增強安全性

• 加密敏感資料：使用 HTTPS 和安全性 cookie。
• 實施速率限制：防止暴力攻擊。
• 使用刷新令牌：無需頻繁登入即可延長會話持續(xù)時間。
• CORS 設(shè)定：限制後端存取受信任的來源。

---

結(jié)論

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

---

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

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

？探索更多：

• Discord：與科技愛好者聯(lián)繫
• WhatsApp：取得即時更新
• 電報：每日見解與提示

？追蹤我們，獲得每日靈感：

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

---

？ 隨時拜訪我們！

？ thecampuscoders.com

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

---

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

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

？聯(lián)絡(luò)我們： deepak@thecampuscoders.com

---

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