在 SPA 应用中使用 JWT 来进行身份验证

随着前端技术的发展，越来越多的应用开始采用单页应用（SPA）的方式构建。在这种模式下，前端应用负责渲染页面和处理用户交互，而后端服务负责提供 API 接口和处理业务逻辑。这时候身份验证便成为一个重要的问题。本文将介绍如何在 SPA 应用中使用 JWT 进行身份验证。

什么是 JWT？

JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在网络应用之间传递声明的安全方式。JWT 通常在身份验证和授权中使用，它可以安全地将 JSON 编码的信息作为令牌传输。JWT 包含三部分：头部、载荷和签名。

头部指定算法和类型，例如：

{
  "alg": "HS256",
  "typ": "JWT"
}

载荷包含身份验证信息，例如：

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

签名用于验证消息的完整性和身份验证信息的真实性。

在 SPA 应用中使用 JWT 进行身份验证的步骤

1. 用户输入用户名和密码，发送登录请求到后端服务。
2. 后端服务认证用户名和密码，并生成一个 JWT，将 JWT 返回给前端应用。
3. 前端应用将 JWT 保存在客户端，例如存储在本地存储（localStorage）中。
4. 在后续的用户请求中，前端应用将 JWT 发送给后端服务，作为身份验证凭证。
5. 后端服务验证 JWT 签名，并确认身份验证信息是否有效。如果有效，返回请求的数据。

示例代码

前端应用代码

function login(username, password) {
  // 发送登录请求
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({username, password})
  })
  .then(response => {
    if (!response.ok) throw new Error('登录失败');
    // 获取 JWT
    return response.json();
  })
  .then(data => {
    // 保存 JWT
    localStorage.setItem('jwt', data.jwt);
    // 跳转到首页
    window.location.href = '/index.html';
  })
  .catch(error => {
    console.error(error);
  });
}

function fetchData() {
  // 获取保存的 JWT
  const jwt = localStorage.getItem('jwt');
  if (!jwt) {
    console.log('未登录');
    return;
  }
  // 发送带有 JWT 的请求
  fetch('/api/data', {
    headers: {
      'Authorization': `Bearer ${jwt}`
    }
  })
  .then(response => {
    if (!response.ok) throw new Error('获取数据失败');
    // 获取数据
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
}

后端服务代码

const jwt = require('jsonwebtoken');
const secret = 'mysecret';

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  if (username === 'admin' && password === 'password') {
    // 生成 JWT
    const token = jwt.sign({sub: 'admin'}, secret, {expiresIn: '1h'});
    res.json({jwt: token});
  } else {
    res.sendStatus(401);
  }
});

app.get('/api/data', verifyJWT, (req, res) => {
  res.json({data: 'hello world'});
});

function verifyJWT(req, res, next) {
  const authHeader = req.headers.authorization;
  if (authHeader) {
    const token = authHeader.split(' ')[1];
    jwt.verify(token, secret, (err, payload) => {
      if (err) {
        res.status(403).send('无效的 JWT');
      } else {
        req.user = payload.sub;
        next();
      }
    });
  } else {
    res.sendStatus(401);
  }
}

总结

使用 JWT 进行身份验证是一种安全、简单和流行的方式，特别适用于 SPA 应用的场景。在实践中，我们需要保证 JWT 的安全和有效性，例如设置适当的过期时间、加密算法和签名密钥等。希望本文能够帮助您了解并应用 JWT 进行身份验证。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b4f23aadd4f0e0ffdc9389