token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。
JWT（json web token） 的原理是，服务器认证以后，生成一个 JSON 对象，发回给用户
{
"姓名": "张三",
"角色": "管理员",
"到期时间": "2022年7月11日0点0分"
}用户与服务端通信的时候，都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。
当然，为了防止用户篡改数据，服务器在生成这个对象的时候，会给他加密一下，就是我们看到的一个长长的字符串
出现解决的问题是：跨域认证解决方案
?jwt-实际操作:
1.初始化代码:
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>token</h1>
<input type="text" id="username" name="name" value="admin"/>
<input type="text" id="password" name="password" value="123456"/>
<button id="btn_login">登录,获取token</button>
<button id="btn_testToken">没有token,不能访问</button>
<button id="btn_delToken">删除token</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('#btn_delToken').click(function(){
})
$('#btn_testToken').click(function(){
$.ajax({
type:'get',
url:'http://localhost:3000/test',
success(res){
console.log(res);
}
})
})
$('#btn_login').click(function(){
$.ajax({
type:'post',
url:'http://localhost:3000/login',
data:{name:$('#username').val(),password:$('#password').val()},
success(res){
console.log(res);
}
})
})
</script>
</body>
</html>后端代码:
const express = require('express')
const cors = require('cors')
const app = express();
app.use(cors({origin:true,credentials:true}))
app.use(express.urlencoded())
app.post('/login',(req,res)=>{
console.log('接收到的数据是', req.body)
const {name, password} = req.body
if(password === '123456') {
res.json({msg:'登录成功'})
} else {
res.json({msg:'登录失败'})
}
})
app.get('/test',(req,res) => {
res.json({msg: '测试tokenOk'})
})
app.listen(3000, ()=>{
console.log(3000);
})2.服务器端：登录成功创建token:
使用第三方模块 jsonwebtoken 创建token字符串。
? ?2.1基本步骤:
-
在项目中下载安装
npm i jsonwebtoken -
加载模块 const jwt = require('jsonwebtoken');
-
在用户登陆成功之后，调用 jwt.sign() 方法创建token， 它有如下4个参数：
-
参数1：必填，对象形式；希望在token中保存的数据
-
参数2：必填，字符串形式；加密的钥匙；后续验证token的时候，还需要使用
-
参数3：可选，对象形式；配置项，比如可以配置token的有效期
-
参数4：可选，函数形式；生成token之后的回调
-
生成的token前面，必须拼接
Bearer这个字符串。
参考代码:
const express = require('express')
const multer = require('multer')
const cors = require('cors')
const app = express();
app.use(cors({origin:true,credentials:true}))
const jwt = require('jsonwebtoken');
app.use(express.urlencoded())
app.post('/login',(req,res)=>{
console.log('接收到的数据是', req.body)
const {name, password} = req.body
if(password === '123456') {
// 调用生成 token 的方法
const tokenStr = jwt.sign({name: name }, 'heima61', { expiresIn: 5 });
const token = 'Bearer ' + tokenStr
res.json({msg:'登录成功', token})
} else {
res.json({msg:'登录失败'})
}
})
app.get('/test',(req,res) => {
res.json({msg: '测试tokenOk'})
})
app.listen(3000, ()=>{
console.log(3000);
})3.浏览器端：保存后端回传的token:
保存在localStorage
$('#btn_login').click(function(){
$.ajax({
type:'post',
url:'http://localhost:3000/login',
data:{name:$('#username').val(),password:$('#password').val()},
success(res){
console.log(res);
+ localStorage.setItem('token', res.token)
}
})
})4.浏览器端：发请求时手动携带token:
必须放置在Authorization中
$('#btn_testToken').click(function(){
$.ajax({
type:'get',
url:'http://localhost:3000/test',
headers: {
+ Authorization: localStorage.getItem('token'),
},
success(res){
console.log(res);
}
})
})5.服务器端：实现token认证
选择使用 express-jwt 第三方模块进行身份认证。从模块名可以看出，该模块是专门配合express使用的。
? ?5.1.下载安装
? ? ? ?
npm i express-jwt5.2中间件技术-验证token
const expressJwt = require('express-jwt');
// app.use(jwt().unless());
// jwt() 用于解析token，并将 token 中保存的数据 赋值给 req.user
// unless() 约定某个接口不需要身份认证
app.use(expressJwt({
secret: 'heima61', // 生成token时的 钥匙，必须统一
algorithms: ['HS256'] // 必填，加密算法，无需了解
}).unless({
path: ['/login'] // 除了个接口，其他都需要认证
}));上述代码完成后，当一个接口请求到了服务器后，它会自动验证请求头中的 Authorization 字段了，并且会自动完成：
-
如果没有问题
-
将token中保存的 数据 赋值给 req.user
-
next()。
-
-
如果有问题，则抛出错误 next(错误信息)。
6.补充中间件技术-统一处理错误
在所有的路由最后，加入错误处理中间件，来提示token方面的错误。
app.use((err, req, res, next) => {
if (err.name === 'UnauthorizedError') {
// res.status(401).send('invalid token...');
res.status(401).send({ status: 1, message: '身份认证失败！' });
}
});