目錄
? 什么是 Token？
🔁 原理簡述：
🧩 示例項目：使用 Node.js + jsonwebtoken 實現 Token 登錄驗證
📁 文件結構如下：
🔹 server.js（JavaScript）
🔸 index.html（HTML）
?? 程序運行說明
? 總結
?
? 什么是 Token？
Token 是一種用于身份驗證的機制。常用于 Web 前后端分離的項目中，是一種 無狀態、基于令牌的認證方式。
🔁 原理簡述：
-
用戶登錄成功后，服務器會生成一個 Token（令牌）返回給客戶端。
-
客戶端保存 Token（通常存儲在 localStorage 或 Cookie 中）。
-
每次請求時，客戶端把 Token 放在請求頭中發送給服務器。
-
服務器通過驗證 Token，判斷用戶是否有權限訪問資源。
Token 常用格式為 JWT（JSON Web Token），是一種將用戶信息加密后的字符串。
🧩 示例項目：使用 Node.js + jsonwebtoken 實現 Token 登錄驗證
📁 文件結構如下：
token-demo/
├── server.js ← Node.js 主程序 (JavaScript)
└── index.html ← 登錄頁面 (HTML)
🔹 server.js（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'; // 密鑰用于加密和驗證Tokenapp.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）
<!-- 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>
?? 程序運行說明
-
安裝依賴：
npm install express jsonwebtoken body-parser
-
啟動服務器：
node server.js
-
在瀏覽器訪問：
http://localhost:3000
-
輸入用戶名：admin，密碼：123456 進行登錄。
-
登錄成功后點擊「訪問受保護資源」按鈕，后臺會驗證 Token 并返回用戶信息。
? 總結
-
使用
jsonwebtoken生成和驗證 Token。 -
Token 是無狀態的，不需要服務器保存用戶信息。
-
用戶每次訪問受保護資源時都要攜帶 Token。
這種方式非常適合前后端分離項目的身份認證。
需要我幫你加個 JWT 結構圖、流程圖或者換個小白更好懂的說法也可以隨時說哈～想讓你的博客更有深度也沒問題！??
?
)
