前后端的身份认证

现代Web应用程序中，身份认证是确保用户数据安全的关键环节。无论你是开发一个简单的博客系统还是复杂的企业级应用，正确实现身份验证机制都是至关重要的。本文将探讨如何在前后端分离的架构下，使用Node.js作为后端来实现安全有效的身份认证。

一、背景介绍

什么是身份认证？

身份认证（Authentication）是指确认用户身份的过程。通常涉及验证用户提供的凭据（如用户名和密码）是否有效，并据此授予访问权限。与授权（Authorization）不同，后者是在认证成功之后决定用户可以执行哪些操作。

为什么选择Token-Based认证？

传统的Session-Cookie模式虽然简单易用，但在分布式系统或多设备登录场景下存在局限性。相比之下，基于Token的身份认证更加灵活，适合微服务架构和移动应用。常见的Token方案包括JWT（JSON Web Token），它允许客户端携带Token进行无状态的请求处理。

二、技术栈概述

前端：可选用React, Vue等框架。
后端：Express.js（Node.js的一个流行框架）
数据库：MongoDB或MySQL等关系型数据库
身份认证库：jsonwebtoken用于生成和解析JWT

首先，我们需要安装必要的npm包：

npm install express jsonwebtoken bcryptjs body-parser

三、后端实现

1. 用户注册与登录

注册逻辑

当新用户注册时，我们需要加密存储用户的密码，并创建一个新的用户记录。

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const bodyParser = require('body-parser');const app = express();
app.use(bodyParser.json());let users = [];app.post('/register', async (req, res) => {const { username, password } = req.body;const hashedPassword = await bcrypt.hash(password, 8);users.push({ id: Date.now().toString(), username, password: hashedPassword });res.status(201).send({ message: 'User registered successfully!' });
});

登录逻辑

登录时，我们将比对用户提供的密码与数据库中的哈希值是否匹配，如果匹配，则签发一个JWT。

app.post('/login', async (req, res) => {const { username, password } = req.body;const user = users.find(u => u.username === username);if (!user || !(await bcrypt.compare(password, user.password))) {return res.status(400).send({ message: 'Invalid credentials' });}const token = jwt.sign({ id: user.id }, 'your_jwt_secret', { expiresIn: '1h' });res.send({ token });
});

2. 中间件保护路由

为了保护某些敏感资源不被未授权访问，我们可以编写中间件来检查请求头中的Authorization字段是否包含有效的JWT。

function authenticateToken(req, res, next) {const authHeader = req.headers['authorization'];const token = authHeader && authHeader.split(' ')[1];if (token == null) return res.sendStatus(401);jwt.verify(token, 'your_jwt_secret', (err, user) => {if (err) return res.sendStatus(403);req.user = user;next();});
}app.get('/protected', authenticateToken, (req, res) => {res.send({ message: 'Access granted to protected route!', user: req.user });
});

四、前端集成

在前端部分，你需要在发送请求时附加JWT。这里以Axios为例：

import axios from 'axios';const apiClient = axios.create({baseURL: 'http://localhost:3000',headers: { 'Content-Type': 'application/json' },
});// 在登录成功后保存token
localStorage.setItem('authToken', response.data.token);// 发送带有token的请求
apiClient.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('authToken')}`;