首页 > web前端 > js教程 > 掌握 MERN 中的身份验证:综合指南

掌握 MERN 中的身份验证:综合指南

Mary-Kate Olsen
发布: 2025-01-10 12:26:45
原创
539 人浏览过

Mastering Authentication in MERN: A Comprehensive Guide

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

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板