定义：token也称为令牌，作为计算机的临时标识符，具体作用与cookie类似。cookie的作用参见 Cookie&Session的使用
token与cookie对比
- 共同点：带一个标识让服务器认识，通过请求头告知服务器，服务器通过响应头给浏览器
- 不同点：cookie服务端从存到用都是全自动，token是全手动
- 应用场景：token大部分用于移动端
举个例子——在koa中使用token
需求：使用token的方式，来替代cookie，进入页面A得到token，进入页面B时通过token得到用户数据
实现：
1. 下载依赖包koa-jwt jsonwebtoken
2. 登陆后生成token(jsonwebtoken.sign)，响应头给客户端
3. 其它需要身份的页面直接ctx.state.user获取加密的数据
代码实现：
const Koa = require("koa");
const Router = require("koa-router");
const jwt = require("koa-jwt");
const jsonwebtoken = require("jsonwebtoken");
const app = new Koa();
const router = new Router();
router.get("/gettoken", (ctx, next) => {
//模拟数据
let user = {userId: 3, name: 'jack'};
//使用jsonwebtoken加密
let token = jsonwebtoken.sign(user, 'shhhhh');
//响应token
ctx.response.set('my-token', token);
ctx.body = "token写回成功";
})
.get("/showInfo", (ctx, next) => {
//jwt中为了获取之前加密的数据,可以使用ctx.state.user来拿
console.log(ctx.state.user);
ctx.body = "登录成功"
})
//配置静态文件路径
app.use(require("koa-static")("./"));
//加载到中间件中
//unless 代表排除哪些不进行token验证
//passthrough 代表是否最终都显示页面（通常设置为true，token的目的是记住用户状态）
app.use(jwt({secret: 'shhhhh', passthrough: true}).unless({path: ["/gettoken"]}));
app.use(router.routes())
.use(router.allowedMethods());
app.listen(8888, ()=>{
console.log("The server is running...")
});
效果：
- 客户端访问http://localhost:8888/gettoken时则会写入token值
客户端请求A页面
- 客户端访问http://localhost:8888/showInfo并在请求头上携带
authorization:bearer tokenValue时，可获取用户数据
请求B页面
以上为使用postman发起请求，那么如何在前台发送请求呢
思路：
1.为了代码简洁，可以配置全局默认行为；$.ajaxSetup
2. 请求前，检查是否有token，加入请求头；
3. 登陆后，获取响应头token保存
<!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>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button type="button" name="button" onclick="doLogin()">登录</button>
<button type="button" name="button" onclick="showMessage()">获取</button>
<script type="text/javascript">
//全局token值
let token;
//配置全局默认行为
$.ajaxSetup({
complete: xhr => {
//从响应头中获取my-token值并保存到全局变量中
token = xhr.getResponseHeader('my-token');
},
//在发起请求之前添加请求头
beforeSend: xhr => {
if(token) {
xhr.setRequestHeader('authorization', `bearer ${token}`);
}
}
});
function doLogin() {
$.ajax({
url: "/gettoken",
type: "get"
})
}
function showMessage() {
$.ajax({
url: "/showInfo",
method: "get",
success: function (res) {
alert(res);
}
})
}
</script>
</body>
</html>
效果：
通过ajax请求B页面
网友评论