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?
使用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应用中进行认证和授权。