掌握 MERN 中的身份驗證：綜合指南

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

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

---

1.驗證類型

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

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

---

2.設定後端

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

第 1 步：安裝依賴項

先安裝必要的軟體包：

npm install express mongoose bcrypt jsonwebtoken dotenv

第 2 步：定義使用者模型

使用 Mongoose 建立一個用於安全儲存使用者憑證的架構：

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 步：建立驗證路由

實現註冊與登入路由：

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.設定前端

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 步：建構受保護的路由

重定向未經身份驗證的使用者：

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

現實生活中的例子

在健身應用程式中，使用者希望即使在頁面重新載入後，他們的會話也能持續存在。如果沒有適當的令牌儲存和驗證，theyu2019d 必須重複登入。

解決方案

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

範例

npm install express mongoose bcrypt jsonwebtoken dotenv

---

6.增強安全性

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

---

結論

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

---

？ 與我們保持聯繫！

我們正在建立一個創新蓬勃發展、技術愛好者共同成長的社群。與我們一起踏上啟發、學習和創造的旅程！

？探索更多：

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

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

• Instagram：@thecampuscoders
• 領英： @thecampuscoders
• Facebook：@thecampuscoders

---

？ 隨時拜訪我們！

？ thecampuscoders.com

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

---

✨ 讓我們一起合作、學習、共創未來！

有想法或建議嗎？聯絡我們，成為非凡事業的一部分！

？聯絡我們： deepak@thecampuscoders.com

---

以上是掌握 MERN 中的身份驗證：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！