目录
[✅ 什么是 Token?](#✅ 什么是 Token?)
[🔁 原理简述:](#🔁 原理简述:)
[🧩 示例项目:使用 Node.js + jsonwebtoken 实现 Token 登录验证](#🧩 示例项目:使用 Node.js + jsonwebtoken 实现 Token 登录验证)
[📁 文件结构如下:](#📁 文件结构如下:)
[🔹 server.js(JavaScript)](#🔹 server.js(JavaScript))
[🔸 index.html(HTML)](#🔸 index.html(HTML))
[▶️ 程序运行说明](#▶️ 程序运行说明)
[✅ 总结](#✅ 总结)
✅ 什么是 Token?
Token 是一种用于身份验证的机制。常用于 Web 前后端分离的项目中,是一种 无状态、基于令牌的认证方式。
🔁 原理简述:
-
用户登录成功后,服务器会生成一个 Token(令牌)返回给客户端。
-
客户端保存 Token(通常存储在 localStorage 或 Cookie 中)。
-
每次请求时,客户端把 Token 放在请求头中发送给服务器。
-
服务器通过验证 Token,判断用户是否有权限访问资源。
Token 常用格式为 JWT(JSON Web Token),是一种将用户信息加密后的字符串。
🧩 示例项目:使用 Node.js + jsonwebtoken 实现 Token 登录验证
📁 文件结构如下:
javascript
token-demo/
├── server.js ← Node.js 主程序 (JavaScript)
└── index.html ← 登录页面 (HTML)
🔹 server.js(JavaScript)
javascript
// server.js
const express = require('express');
const jwt = require('jsonwebtoken');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const SECRET_KEY = 'my-secret-key'; // 密钥用于加密和验证Token
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname));
// 登录接口,返回token
app.post('/login', (req, res) => {
const { username, password } = req.body;
if (username === 'admin' && password === '123456') {
const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: '1h' });
res.send({ message: '登录成功', token });
} else {
res.status(401).send({ message: '用户名或密码错误' });
}
});
// 受保护的接口,必须带上token才能访问
app.get('/protected', (req, res) => {
const authHeader = req.headers.authorization;
if (!authHeader) {
return res.status(403).send({ message: '未提供Token' });
}
const token = authHeader.split(' ')[1];
try {
const decoded = jwt.verify(token, SECRET_KEY);
res.send({ message: '访问成功', user: decoded });
} catch (err) {
res.status(401).send({ message: 'Token无效或已过期' });
}
});
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});
🔸 index.html(HTML)
html
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Token 登录示例</title>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
用户名:<input type="text" id="username"><br>
密码:<input type="password" id="password"><br>
<button type="submit">登录</button>
</form>
<button onclick="getProtected()">访问受保护资源</button>
<script>
let token = '';
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const res = await fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ username, password })
});
const data = await res.json();
if (data.token) {
token = data.token;
alert('登录成功,已获得Token!');
} else {
alert(data.message);
}
});
async function getProtected() {
const res = await fetch('/protected', {
headers: {
'Authorization': 'Bearer ' + token
}
});
const data = await res.json();
alert(JSON.stringify(data));
}
</script>
</body>
</html>
▶️ 程序运行说明
- 安装依赖:
javascript
npm install express jsonwebtoken body-parser
- 启动服务器:
javascript
node server.js
- 在浏览器访问:
javascript
http://localhost:3000
-
输入用户名:admin,密码:123456 进行登录。
-
登录成功后点击「访问受保护资源」按钮,后台会验证 Token 并返回用户信息。
✅ 总结
-
使用
jsonwebtoken
生成和验证 Token。 -
Token 是无状态的,不需要服务器保存用户信息。
-
用户每次访问受保护资源时都要携带 Token。
这种方式非常适合前后端分离项目的身份认证。
需要我帮你加个 JWT 结构图、流程图或者换个小白更好懂的说法也可以随时说哈~想让你的博客更有深度也没问题!❤️