Token 验证
session 不足：
- 服务端有状态需要维护
- 依赖 cookie ，APP 或 跨域处理复杂
JWT (JSON Web Token)
Bearer token 组成：Header、payload（载荷）、Signature(签名)Header.Payload.Signature
Header：JSON 对象，描述 JWT 的元数据，用 Base64URL 算法转成字符串
{ "alg": "HS256", // 签名算法，默认是 HMAC SHA256（写成 HS256） "typ": "JWT" // Token 类型 }Payload: JSON 对象，用来存放实际需要传递的数据。JWT 规定了7个官方字段，供选用，也可以定义私有字段。JWT 默认是不加密的，任何人都可以读到，所以不要把秘密信息放在这个部分。使用 Base64URL 算法转成字符串
字段名称 说明 iss (issuer) 签发人 exp (expiration time) 过期时间 sub (subject) 主题 aud (audience) 受众 nbf (Not Before) 生效时间 iat (Issued At) 签发时间 jti (JWT ID) 编号 - Signature：对前两部分的签名，防止数据篡改。签名密钥只有服务器知道
JWT 特点
- JWT 默认是不加密，但也是可以加密的。生成原始 Token 以后，可以用密钥再加密一次
- JWT 不加密的情况下，不能将秘密数据写入 JWT
- JWT 不仅可以用于认证，也可以用于交换信息。有效使用 JWT，可以降低服务器查询数据库的次数
- JWT 的最大缺点是，由于服务器不保存 session 状态，因此无法在使用过程中废止某个 token，或者更改 token 的权限。也就是说，一旦 JWT 签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑
- JWT 本身包含了认证信息，一旦泄露，任何人都可以获得该令牌的所有权限。为了减少盗用，JWT 的有效期应该设置得比较短。对于一些比较重要的权限，使用时应该再次对用户进行认证
- 为了减少盗用，JWT 不应该使用 HTTP 协议明码传输，要使用 HTTPS 协议传输
JWT 生效过程梳理
// jwt.js
const jsonwebtoken = require('jsonwebtoken');
// 签名密钥
const secret = 'hello';
// 数据
const user = {
username: 'cell',
password: 'pwd',
};
// 计算token
const token = jsonwebtoken.sign({
data: user,
exp: Math.floor(Date.now() / 1000) + (60 * 60),
}, secret);
console.log(token);
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InVzZXJuYW1lIjoiY2VsbCIsInBhc3N3b3JkIjoicHdkIn0sImV4cCI6MTYxNTAzNDk3OCwiaWF0IjoxNjE1MDMxMzc4fQ.iZAHDN6a8eTBcB6a6reeNLgDD-tI9g7CBvfBh9b5Ivs
// 解算 验证
console.log('解码', jsonwebtoken.verify(token, secret));
// 解码 {
// data: { username: 'cell', password: 'pwd' },
// exp: 1615035042,
// iat: 1615031442
// }简单 token 使用流程
前端页面 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model="username">
<input v-model="password">
</div>
<div>
<button @click="login">Login</button>
<button @click="logout">Logout</button>
<button @click="getUser">Get User</button>
</div>
<div>
<button @click="logs=[]">Clear Log</button>
</div>
<ul>
<li v-for="(log, idx) in logs" :key="idx">{{log}}</li>
</ul>
</div>
<script>
axios.interceptors.request.use(config => {
const token = window.localStorage.getItem('token');
if (token) {
// 如果 token 存在，在每个 HTTP header 都加上 token
// Bearer 是 JWT 的认证头部信息
config.headers.common['Authorization'] = `Bearer ${token}`;
}
return config;
}, err => {
return Promise.reject(err);
});
axios.interceptors.response.use(res => {
app.logs.push(JSON.stringify(res.data));
return res;
}, err => {
app.logs.push(JSON.stringify(err.data));
return Promise.reject(err);
});
const app = new Vue({
el: '#app',
data: {
username: 'cell',
password: 'pwd',
logs: [],
},
methods: {
async login() {
const res = await axios.post('/users/login-token', {
username: this.username,
password: this.password
});
localStorage.setItem('token', res.data.token);
},
async logout() {
localStorage.removeItem('token');
},
async getUser() {
await axios.get('/users/getUser-token');
}
}
});
</script>
</body>
</html>服务端 index.js
const Koa = require('koa');
const router = require('koa-router')();
const jwt = require('jsonwebtoken');
const jwtAuth = require('koa-jwt');
const bodyParser = require('koa-bodyparser');
const static = require('koa-static');
const secret = 'my-secret';
const app = new Koa();
app.keys = ['my secret'];
app.use(static(__dirname + '/'));
app.use(bodyParser());
router.post('/users/login-token', async ctx => {
const { body } = ctx.request;
const userinfo = body.username;
ctx.body = {
message: 'Login Successful',
user: userinfo,
// 生成 token 返回给客户端
token: jwt.sign({
data: userinfo,
exp: Math.floor(Date.now() / 1000) + 60 * 60, // 一小时后过期
}, secret)
};
});
router.get('/users/getUser-token',
jwtAuth({
secret
}),
async ctx => {
// 验证通过
console.log(ctx.state.user);
// 获取 信息
ctx.body = {
message: 'Get Data Successful',
userinfo: ctx.state.user.data
};
});
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);
