身份验证是任何处理用户数据或个性化体验的应用程序的关键部分。在 MERN 堆栈(MongoDB、Express、React、Node.js)中,构建强大的身份验证系统需要了解后端和前端流程。本指南将引导您完成身份验证设置,涵盖关键概念、实际示例和最佳实践。
了解身份验证方法可以帮助您确定最适合您的应用程序的方法:
后端处理用户注册、登录和身份验证逻辑。
首先安装必要的软件包:
npm install express mongoose bcrypt jsonwebtoken dotenv
使用 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);
实现注册和登录路由:
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;
通过验证令牌来保护路由:
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}` }); });
React 前端管理用户会话并与后端通信。
使用axios处理API请求:
npm install axios
使用 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> ); };
重定向未经身份验证的用户:
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;
在健身应用程序中,用户希望即使在页面重新加载后,他们的会话也能持续存在。如果没有适当的令牌存储和验证,theyu2019d 必须重复登录。
npm install express mongoose bcrypt jsonwebtoken dotenv
MERN 中的身份验证是后端逻辑和前端管理的混合。通过遵循最佳实践,您可以创建安全、可扩展且用户友好的身份验证系统。无论是社交平台、电子商务网站还是 SaaS 应用程序,掌握身份验证都可以确保无缝的用户体验。
我们正在建立一个创新蓬勃发展、技术爱好者共同成长的社区。与我们一起踏上启发、学习和创造的旅程!
?探索更多:
?关注我们,获取每日灵感:
? thecampuscoders.com
?探索资源、教程和更新,为您的技术之旅提供动力!
✨ 让我们一起协作、学习、共创未来!
有想法或建议吗?联系我们,成为非凡事业的一部分!
?联系我们: deepak@thecampuscoders.com
以上是掌握 MERN 中的身份验证:综合指南的详细内容。更多信息请关注PHP中文网其他相关文章!