掌握 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"></navigate>;
};

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中文网其他相关文章！