1.JWT
JWT（英文全称：JSON Web Token）是一种跨域认证解决方案。
2.JWT 的工作原理
用户的信息通过 Token 字符串的形式，保存在客户端浏览器中。服务器通过还原 Token 字符串的形式来认证用户的身份。
3.JWT 的组成部分
JWT 通常由三部分组成，分别是 Header（头部）、Payload（有效荷载）、Signature（签名）。
三者之间使用英文的“.”分隔，格式如下：
1
| Header.Payload.Signature
|
其中：
- Payload 部分才是真正的用户信息，它是用户信息经过加密之后生成的字符串。
- Header 和 Signature 是安全性相关的部分，只是为了保证 Token 的安全性。
4.JWT 的使用方式
客户端收到服务器返回的 JWT 之后，通常会将它储存在 localStorage 或 sessionStorage 中。
此后，客户端每次与服务器通信，都要带上这个 JWT 的字符串，从而进行身份认证。
推荐的做法是把 JWT 放在 HTTP 请求头的 Authorization 字段中，格式如下：
1
| Authorization: Bearer [token]
|
5.JWT 的使用
(1) 安装 JWT 相关的包
1
| npm install jsonwebtoken express-jwt
|
其中：
- jsonwebtoken 用于生成 JWT 字符串
- express-jwt 用于将 JWT 字符串解析还原成 JSON 对象
(2) 导入 JWT 相关的包
1
2
3
4
|
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')
|
(3) 定义 secret 密钥
为了保证 JWT 字符串的安全性，防止 JWT 字符串在网络传输过程中被别人破解，我们需要专门定义一个用于加密和解密的 secret 密钥：
- 当生成 JWT 字符串的时候，需要使用 secret 密钥对用户的信息进行加密，最终得到加密好的 JWT 字符串
- 当把 JWT 字符串解析还原成 JSON 对象的时候，需要使用 secret 密钥进行解密
1
2
|
const secretKey = 'abc';
|
(4) 在登录成功后生成 JWT 字符串
调用 jsonwebtoken 包提供的 sign() 方法，将用户的信息加密成 JWT 字符串，响应给客户端：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
app.post('/api/login', function (req, res) {
const userinfo = req.body
if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
return res.send({
status: 400,
message: '登录失败！'
})
}
const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
res.send({
status: 200,
message: '登录成功！',
token: tokenStr,
})
})
|
(5) 将 JWT 字符串还原为 JSON 对象
客户端每次在访问那些有权限接口的时候，都需要主动通过请求头中的 Authorization 字段，将 Token 字符串发送到服务器进行身份认证。
此时，服务器可以通过 express-jwt 这个中间件，自动将客户端发送过来的 Token 解析还原成 JSON 对象
1
2
3
4
5
6
|
app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))
|
(6) 使用 req.user 获取用户信息
当 express-jwt 这个中间件配置成功之后，即可在那些有权限的接口中，使用 req.user 对象，来访问从 JWT 字符串中解析出来的用户信息了
1
2
3
4
5
6
7
8
9
10
|
app.get('/admin/getinfo', function (req, res) {
console.log(req.user)
res.send({
status: 200,
message: '获取用户信息成功！',
data: req.user,
})
})
|
(7) 捕获解析 JWT 失败后产生的错误
当使用 express-jwt 解析 Token 字符串时，如果客户端发送过来的 Token 字符串过期或不合法，会产生一个解析失败的错误，影响项目的正常运行。我们可以通过 Express 的错误中间件，捕获这个错误并进行相关的处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
app.use((err, req, res, next) => {
if (err.name === 'UnauthorizedError') {
return res.send({
status: 401,
message: '无效的token',
})
}
res.send({
status: 500,
message: '未知的错误',
})
})
|
使用案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
const express = require('express')
const app = express()
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')
const cors = require('cors')
app.use(cors())
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
const secretKey = 'testkey'
app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))
app.post('/api/login', function (req, res) {
const userinfo = req.body
if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
return res.send({
status: 400,
message: '登录失败！',
})
}
const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
res.send({
status: 200,
message: '登录成功！',
token: tokenStr,
})
})
app.get('/admin/getinfo', function (req, res) {
console.log(req.user)
res.send({
status: 200,
message: '获取用户信息成功！',
data: req.user,
})
})
app.use((err, req, res, next) => {
if (err.name === 'UnauthorizedError') {
return res.send({
status: 401,
message: '无效的token',
})
}
res.send({
status: 500,
message: '未知的错误',
})
})
app.listen(8888, function () {
console.log('Express server running at http://127.0.0.1:8888')
})
|
