JWT在JS全栈中的使用方法

有志者，事竟成！如果你在学习文章，那么本文《JWT如何在JS全栈中使用》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JWT通过Header、Payload、Signature三部分实现无状态认证，用户登录后后端生成Token，前端存储并在请求头中携带Bearer Token，后端验证有效性；需注意使用强密钥、合理过期时间及HttpOnly Cookie等安全措施。

JWT（JSON Web Token）在JS全栈开发中常用于用户身份验证，它通过加密签名的方式安全地传递用户信息。前后端使用JWT可以实现无状态的认证机制，减少服务器会话存储压力。

JWT的基本结构与工作流程

JWT由三部分组成：Header（头部）、Payload（负载）和Signature（签名），格式为 xxx.yyy.zzz。通常在用户登录成功后，后端生成JWT并返回给前端，前端后续请求携带该Token进行身份验证。

典型流程如下：

• 用户提交账号密码登录
• 后端验证通过后生成JWT（通常包含用户ID、角色、过期时间等）
• 前端将JWT存储在localStorage或内存中
• 每次请求时在Authorization头中携带Bearer + Token
• 后端验证Token有效性，决定是否响应请求

后端实现（Node.js + Express + jsonwebtoken）

使用 jsonwebtoken 库生成和验证Token。

示例代码：

const jwt = require('jsonwebtoken');
const SECRET_KEY = 'your-secret-key'; // 应放在环境变量中

// 登录接口生成Token
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  // 验证用户名密码（此处简化）
  if (username === 'admin' && password === '123456') {
    const token = jwt.sign(
      { userId: 1, username },
      SECRET_KEY,
      { expiresIn: '1h' }
    );
    res.json({ token });
  } else {
    res.status(401).json({ message: '登录失败' });
  }
});

// 验证中间件
function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (!token) return res.sendStatus(401);

  jwt.verify(token, SECRET_KEY, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

// 受保护的接口
app.get('/profile', authenticateToken, (req, res) => {
  res.json({ message: `欢迎 ${req.user.username}` });
});

前端实现（JavaScript + Fetch）

前端在登录后保存Token，并在后续请求中附加到请求头。

示例代码：

// 登录并获取Token
async function login() {
  const response = await fetch('/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: 'admin', password: '123456' })
  });
  const data = await response.json();
  localStorage.setItem('token', data.token); // 存储Token
}

// 带Token的请求
async function getProfile() {
  const token = localStorage.getItem('token');
  const response = await fetch('/profile', {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
  const data = await response.json();
  console.log(data);
}

安全建议与最佳实践

虽然JWT方便，但需注意安全问题：

• 敏感信息不要写入Payload，即使加密也可能被解码
• 使用强密钥并存于环境变量，避免硬编码
• 设置合理过期时间，避免长期有效
• 前端优先使用HttpOnly Cookie存储Token可防XSS（比localStorage更安全）
• 实现Token黑名单机制以支持主动注销
• 避免在URL中传递Token，防止日志泄露

今天关于《JWT在JS全栈中的使用方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！