JWT从0到1，小白入门（JWT在vue前端中的使用）-Toy模板网

这篇具有很好参考价值的文章主要介绍了JWT从0到1，小白入门（JWT在vue前端中的使用）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JWT（JSON Web Token）

JWT（JSON Web Token）是一种用于身份验证和授权的开放标准。它是一个紧凑的、自包含的方式，用于在不同的应用程序之间安全地传输信息。

JWT由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。

1. 头部

头部包含两个重要的信息：token类型（通常为JWT）和所使用的算法（例如HMAC SHA256或RSA）。

例如：

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

2. 载荷

载荷就是JWT所要传输的信息。载荷包含一组声明，声明包含一些有关实体（通常是用户）和其他数据的信息。

例如：

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

常用的声明有：

iss：JWT的签发者
sub：JWT所面向的用户
aud：接受JWT的一方
exp：JWT的过期时间，这个过期时间必须要大于签发时间
nbf：定义在什么时间之前，该JWT都是不可用的
iat：JWT的签发时间
jti：JWT的唯一身份标识

3. 签名

签名使用头部和载荷，以及一个密钥来生成。签名用于验证JWT的完整性，以及验证发送JWT的实体是否为可信任的。

生成签名的过程如下：

将头部和载荷用Base64Url编码
连接编码后的头部和载荷，用句号 "." 分隔
使用密钥和所指定的算法对句号分隔后的字符串进行签名

例如，在使用HMAC SHA256算法时，签名如下所示：

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

其中，secret 表示密钥。

最终生成的JWT是一个长字符串，由三个部分用句号分隔组成，例如：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

JWT可以在HTTP请求的头部中进行传输，例如：

Authorization: Bearer eyjhbgci...sda

这样，API可以解析JWT并验证发送请求的实体身份，然后决定是否授权访问所请求的资源。

总结来讲是一种用于在Web应用程序之间安全传输信息的开放标准（RFC 7519）。它是一种基于

JSON的小型身份验证和授权标准，包含了在不同系统之间传递的信息，如用户身份信息和其他元数据。JWT由三部分组成：头部、有效载荷和签名。头部包含JWT的类型和使用的加密算法；有效载荷包含实际传输的信息；签名用于验证有效载荷是否被篡改。JWT可以使用在任何需要安全传输信息的地方，比如API调用和单点登录应用程序

JWT从0到1，小白入门（JWT在vue前端中的使用）,前端

为什么要使用JWT？

使用JWT的主要原因有以下几点：

1. 身份验证和授权：JWT是一种安全的身份验证和授权方式，因为它能够验证发送请求的用户身份，并授权用户访问所请求的资源。

2. 跨域通信：在跨域通信的场景下，使用JWT可以避免一些安全性问题，例如跨站点请求伪造（CSRF）。

3. 无状态：由于JWT本身包含了所有必要的信息，因此服务器不需要维护任何会话信息。这意味着JWT可以使服务器变得无状态，从而便于处理高负载的请求。

4. 可扩展性：JWT是一种开放的标准，因此可以轻松地扩展其功能，例如添加自定义声明、颁发和撤销访问令牌等。

5. 跨平台：由于JWT基于JSON，因此它可以在不同的编程语言和平台之间进行传输和解析。

JSON Web Token (JWT) 是在客户端和服务器之间安全地传输信息的一种方式。Vue作为一款前端框架，可以很方便地与JWT配合使用。

在vue中使用JWT

使用JWT需要以下步骤：

1. 安装JWT库

可以使用以下命令安装：

npm install jsonwebtoken

2. 在登录时生成JWT

在用户登录时，服务器生成JWT并将其发送给客户端。以下是一个示例代码：

const jwt = require('jsonwebtoken');
const secretKey = 'mysecretkey'; // 密钥，建议从环境变量中获取

// 在登录成功时生成JWT
const user = { id: 123, name: 'Alice' }; // 示例用户
const token = jwt.sign(user, secretKey, { expiresIn: '1h' }); // 生成JWT，设置过期时间为1小时
res.json({ token: token });

3. 将JWT存储在客户端

在接收到JWT后，客户端需要将其存储起来，以便在之后的请求中使用。可以使用localStorage、sessionStorage、cookie等方式存储。

// 在登录成功后将JWT存储在localStorage中
localStorage.setItem('jwt', token);

4. 附加JWT到请求头中

在之后的每个请求中，都需要将JWT附加到请求头中。通常使用Authorization头来传递JWT，具体格式为Bearer <token>，其中<token>是JWT的值。

// 在每个请求中附加JWT
const jwt = localStorage.getItem('jwt');
axios.defaults.headers.common['Authorization'] = 'Bearer ' + jwt;

5. 在服务器端验证JWT

在服务器端，需要验证传递过来的JWT是否有效。可以使用jsonwebtoken库进行验证。

const jwt = require('jsonwebtoken');
const secretKey = 'mysecretkey'; // 密钥，建议从环境变量中获取

// 验证JWT
const token = req.headers.authorization.split(' ')[1]; // 从Authorization头中提取JWT
jwt.verify(token, secretKey, (err, decoded) => {
  if (err) {
    // JWT验证失败，返回401状态码
    res.status(401).json({ message: 'JWT验证失败' });
  } else {
    // JWT验证成功，继续处理请求
    // decoded是JWT中存储的用户信息
    req.user = decoded;
    next();
  }
});

基于以上步骤，你可以很轻松地使用JWT在Vue应用中进行认证和授权。文章来源地址https://www.toymoban.com/news/detail-819323.html

到了这里，关于JWT从0到1，小白入门（JWT在vue前端中的使用）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！