用户认证需从前端到后端闭环实现。前端用React收集输入，Axios提交登录信息，成功后将JWT存入httpOnly Cookie并携带Authorization头；后端用Node.js+Express验证凭证，bcrypt加密密码，JWT签发令牌，通过中间件校验权限，确保安全传输与合理过期，配合HTTPS构建可靠认证体系。
用户认证是全栈JavaScript应用中最核心的安全机制之一。要实现安全、可靠的用户认证，需要从前端交互、后端验证到数据库存储形成闭环。下面从机制原理到具体实现，一步步说明如何在JS全栈项目中完成用户认证。
用户认证的基本机制
用户认证的本质是确认“你是谁”。最常见的方案是基于凭证的登录：用户输入用户名和密码，系统验证通过后发放访问令牌。现代Web应用普遍采用以下流程：
- 用户提交登录表单（前端）
- 后端验证凭据是否匹配数据库记录
- 验证成功后生成JWT（JSON Web Token）或设置Session
- 将令牌返回给前端，后续请求携带该令牌进行身份识别
JWT因其无状态特性，适合分布式系统；而Session依赖服务器存储，适合传统服务端渲染场景。全栈JS项目中，JWT更常见。
前端实现：React + Axios 示例
前端负责收集用户输入并安全发送请求。使用React管理登录状态，配合Axios调用API。
示例代码片段：
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [token, setToken] = useLocalStorage('token', null);
async function handleLogin(e) {
e.preventDefault();
try {
const res = await axios.post('/api/auth/login', { email, password });
setToken(res.data.token); // 存入localStorage
alert('登录成功');
} catch (err) {
alert('登录失败');
}
}
登录后，将JWT保存在localStorage或httpOnly Cookie中。推荐使用后者防止XSS攻击。每次请求需附加Authorization头：
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
后端实现：Node.js + Express + JWT
使用Express搭建API服务，结合bcrypt加密密码，JWT生成令牌。
- 安装依赖：
npm install express bcrypt jsonwebtoken mongoose dotenv - 用户模型中密码必须哈希存储
const userSchema = new mongoose.Schema({
email: { type: String, unique: true },
password: String
});
// 保存前加密密码
userSchema.pre('save', async function (next) {
if (this.isModified('password')) {
this.password = await bcrypt.hash(this.password, 10);
}
next();
});
登录路由处理：
app.post('/api/auth/login', async (req, res) => {
const { email, password} = req.body;
const user = await User.findOne({ email });
if (!user) return res.status(401).send('用户不存在');
const isValid = await bcrypt.compare(password, user.password);
if (!isValid) return res.status(401).send('密码错误');
const token = jwt.sign(
{ id: user._id, email: user.email },
process.env.JWT_SECRET,
{ expiresIn: '24h' }
);
res.json({ token });
});
权限控制与中间件
认证之后是授权。每个需要登录才能访问的接口都应经过身份验证中间件。
function authenticate(req, res, next) {
const token = req.header('Authorization')?.replace('Bearer ', '');
if (!token) return res.status(401).send('未提供令牌');
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = decoded;
next();
} catch (err) {
res.status(401).send('令牌无效');
}
}
在受保护路由中使用：
app.get('/api/profile', authenticate, async (req, res) => {
res.json({ message: '这是你的个人资料', user: req.user });
});
基本上就这些。整个流程清晰且可扩展。关键点在于密码加密、令牌安全传输、合理设置过期时间，并避免将敏感信息存入JWT payload。配合HTTPS部署，就能构建一个基础但安全的全栈JS用户认证系统。
