Node.js 中 Token 原理简单介绍 + 示例代码

目录

[✅ 什么是 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 前后端分离的项目中,是一种 无状态、基于令牌的认证方式

🔁 原理简述:

  1. 用户登录成功后,服务器会生成一个 Token(令牌)返回给客户端。

  2. 客户端保存 Token(通常存储在 localStorage 或 Cookie 中)。

  3. 每次请求时,客户端把 Token 放在请求头中发送给服务器。

  4. 服务器通过验证 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>

▶️ 程序运行说明

  1. 安装依赖:
javascript 复制代码
npm install express jsonwebtoken body-parser
  1. 启动服务器:
javascript 复制代码
node server.js
  1. 在浏览器访问:
javascript 复制代码
http://localhost:3000
  1. 输入用户名:admin,密码:123456 进行登录。

  2. 登录成功后点击「访问受保护资源」按钮,后台会验证 Token 并返回用户信息。


✅ 总结

  • 使用 jsonwebtoken 生成和验证 Token。

  • Token 是无状态的,不需要服务器保存用户信息。

  • 用户每次访问受保护资源时都要携带 Token。

这种方式非常适合前后端分离项目的身份认证。


需要我帮你加个 JWT 结构图、流程图或者换个小白更好懂的说法也可以随时说哈~想让你的博客更有深度也没问题!❤️

相关推荐
Q_Q196328847536 分钟前
python+django/flask基于Echarts+Python的图书零售监测系统设计与实现(带大屏)
spring boot·python·django·flask·node.js·php
粥里有勺糖1 小时前
视野修炼-技术周刊第126期 | TypeScript #1
前端·node.js·github
swear011 小时前
VSCODE 插件 rust-analyzer 使用遇到的问题 快捷键查看定义
ide·vscode·rust
祎直向前1 小时前
在Ubuntu中安装并配置ssh
linux·ubuntu·ssh
玖釉-2 小时前
解决PowerShell执行策略导致的npm脚本无法运行问题
前端·npm·node.js
南林yan3 小时前
Debian系统的多内核共存
linux·debian·linux内核
麦克马3 小时前
Visual Studio Code 控制台乱码问题
vscode
Jackson@ML3 小时前
用Visual Studio Code最新版开发C#应用程序
ide·vscode·c#
阿猿收手吧!3 小时前
windows本机vscode通过ssh免密登录远程linux服务器 && git push/pull 免密
服务器·windows·vscode
skywalk81633 小时前
尝试Auto-coder.chat使用星河社区AIStudio部署的几个大模型:文心4.5-21b、Deepseek r1 70b、llama 3.1 8b
linux·服务器·人工智能·大模型·aistudio