本文首发于我的博客javascript
好久好久以前, Web基本都是文档的浏览而已。既然是浏览, 做为服务器, 不须要记录在某一段时间里都浏览了什么文档, 每次请求都是一个新的HTTP协议,就是请求加响应。不用记录谁刚刚发了HTTP请求, 每次请求都是全新的。css
随着交互式Web应用的兴起, 像在线购物网站,须要登陆的网站等,立刻面临一个问题,就是要管理回话,记住那些人登陆过系统,哪些人往本身的购物车中放商品,也就是说我必须把每一个人区分开。html
本文主要讲解cookie,session, token 这三种是如何管理会话的;java
cookie 是一个很是具体的东西,指的就是浏览器里面能永久存储的一种数据。跟服务器没啥关系,仅仅是浏览器实现的一种数据存储功能。git
cookie由服务器生成,发送给浏览器,浏览器把cookie以KV形式存储到某个目录下的文本文件中,下一次请求同一网站时会把该cookie发送给服务器。因为cookie是存在客户端上的,因此浏览器加入了一些限制确保cookie不会被恶意使用,同时不会占据太多磁盘空间。因此每一个域的cookie数量是有限制的。github
document.cookie = "name=xiaoming; age=12 "
复制代码
设置cookie => cookie被自动添加到request header中 => 服务端接收到cookieweb
无论你是请求一个资源文件(如html/js/css/图片), 仍是发送一个ajax请求, 服务端都会返回response.而response header中有一项叫set-cookie
, 是服务端专门用来设置cookie的;ajax
set-cookie
HTML5提供了两种本地存储的方式 sessionStorage 和 localStorage; 算法
session从字面上讲,就是会话。这个就相似你和一我的交谈,你怎么知道当时和你交谈的是张三而不是李四呢?对方确定有某种特征(长相等)代表他是张三; session也是相似的道理,服务器要知道当前请求发给本身的是谁。为了作这种区分,服务器就是要给每一个客户端分配不一样的"身份标识",而后客户端每次向服务器发请求的时候,都带上这个”身份标识“,服务器就知道这个请求来自与谁了。 至于客户端怎么保存这个”身份标识“,能够有不少方式,对于浏览器客户端,你们都采用cookie的方式。数据库
session_id
, 写入用户的cookie
cookie
, 将session_id
传回服务器session_id
, 找到前期保存的数据, 由此得知用户的身份单机固然没问题, 若是是服务器集群, 或者是跨域的服务导向架构, 这就要求session数据共享,每台服务器都可以读取session。
举例来讲, A网站和B网站是同一家公司的关联服务。如今要求,用户只要在其中一个网站登陆,再访问另外一个网站就会自动登陆,请问怎么实现?这个问题就是如何实现单点登陆的问题
另外一种方案是服务器索性不保存session数据了,全部数据就保存在客户端,每次请求都发回服务器。这种方案就是接下来要介绍的基于Token的验证;
这个方式的技术其实很早就已经有不少实现了,并且还有现成的标准可用,这个标准就是JWT;
实际的JWT大概就像下面这样:
JSON Web Tokens由dot(.)分隔的三个部分组成,它们是:
所以,JWT一般以下展现:
xxxxx.yyyyy.zzzz
Header 是一个 JSON 对象
{
"alg": "HS256", // 表示签名的算法,默认是 HMAC SHA256(写成 HS256)
"typ": "JWT" // 表示Token的类型,JWT 令牌统一写为JWT
}
复制代码
Payload 部分也是一个 JSON 对象,用来存放实际须要传递的数据
{
// 7个官方字段
"iss": "a.com", // issuer:签发人
"exp": "1d", // expiration time: 过时时间
"sub": "test", // subject: 主题
"aud": "xxx", // audience: 受众
"nbf": "xxx", // Not Before:生效时间
"iat": "xxx", // Issued At: 签发时间
"jti": "1111", // JWT ID:编号
// 能够定义私有字段
"name": "John Doe",
"admin": true
}
复制代码
JWT 默认是不加密的,任何人均可以读到,因此不要把秘密信息放在这个部分。
Signature 是对前两部分的签名,防止数据被篡改。
首先,须要指定一个密钥(secret)。这个密钥只有服务器才知道,不能泄露给用户。而后,使用Header里面指定的签名算法(默认是 HMAC SHA256),按照下面的公式产生签名。
HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
复制代码
算出签名后,把 Header、Payload、Signature 三个部分拼成一个字符串,每一个部分之间用"点"(.)分隔,就能够返回给用户。
JWT = Base64(Header) + "." + Base64(Payload) + "." + $Signature
复制代码
如何保证安全?
客户端收到服务器返回的 JWT,能够储存在 Cookie 里面,也能够储存在 localStorage。此后,客户端每次与服务端通讯,都要带上这个JWT。你能够把它放在Cookie里面自动发送,可是这样不能跨域,因此更好的作法是放在HTTP请求的头信息 Authorization 字段里面。
Authorization: Bearer <token>
复制代码
另外一种作法是, 跨域的时候, JWT就放在POST请求的数据体里。
JWT最开始的初衷是为了实现受权和身份认证做用的,能够实现无状态,分布式的Web应用受权。大体实现的流程以下
这里须要注意:不是每次请求都要申请一次Token,这是须要注意,若是不是对于安全性要求的状况,不建议每次都申请,由于会增长业务耗时;好比只在登录时申请,而后使用JWT的过时时间或其余手段来保证JWT的有效性;
JWT最大的优点是服务器再也不须要存储Session,使得服务器认证鉴权业务能够方便扩展。这也是JWT最大的缺点因为服务器不须要存储Session状态,所以使用过程当中没法废弃某个Token,或者更改Token的权限。也就是说一旦JWT签发了,到期以前就会始终有效。 咱们能够基于上面提到的问题作一些改进。
前面讲的Token,都是Acesss Token,也就是访问资源接口时所须要的Token,还有另一种Token,Refresh Token。通常状况下,Refresh Token的有效期会比较长。而Access Token的有效期比较短,当Acesss Token因为过时而失效时,使用Refresh Token就能够获取到新的Token,若是Refresh Token也失效了,用户就只能从新登陆了。Refresh Token及过时时间是存储在服务器的数据库中,只有在申请新的Acesss Token时才会验证,不会对业务接口响应时间形成影响,也不须要向Session同样一直保持在内存中以应对大量的请求。
npm i --save koa koa-route koa-bodyparser @koa/cors jwt-simple
复制代码
const Koa = require("koa");
const app = new Koa();
const route = require('koa-route');
var bodyParser = require('koa-bodyparser');
const jwt = require('jwt-simple');
const cors = require('@koa/cors');
const secret = 'your_secret_string'; // 加密用的SECRET字符串,可随意更改
app.use(bodyParser()); // 处理post请求的参数
const login = ctx => {
const req = ctx.request.body;
const userName = req.userName;
const expires = Date.now() + 1000 * 60; // 为了方便测试,设置超时时间为一分钟后
const payload = {
iss: userName,
exp: expires
};
const Token = jwt.encode(payload, secret);
ctx.response.body = {
data: Token,
msg: '登录成功'
};
}
const getUserName = ctx => {
const token = ctx.get('authorization').split(" ")[1];
const payload = jwt.decode(token, secret);
// 每次请求只判断Token是否过时,不从新去更新Token过时时间(更新不更新Token的过时时间主要看实际的应用场景)
if(Date.now() > payload.exp) {
ctx.response.body = {
errorMsg: 'Token已过时,请从新登陆'
};
} else {
ctx.response.body = {
data: {
username: payload.iss,
},
msg: '获取用户名成功',
errorMsg: ''
};
}
}
app.use(cors());
app.use(route.post('/login', login));
app.use(route.get('/getUsername', getUserName));
app.listen(3200, () => {
console.log('启动成功');
});
复制代码
<!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>JWT-demo</title>
<style> .login-wrap { height: 100px; width: 200px; border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; } </style>
</head>
<body>
<div class="login-wrap">
<input type="text" placeholder="用户名" class="userName">
<br>
<input type="password" placeholder="密码" class="password">
<br>
<br>
<button class="btn">登录</button>
</div>
<button class="btn1">获取用户名</button>
<p class="username"></p>
</body>
<script> var btn = document.querySelector('.btn'); btn.onclick = function () { var userName = document.querySelector('.userName').value; var password = document.querySelector('.password').value; fetch('http://localhost:3200/login', { method: 'POST', body: `userName=${userName}&password=${password}`, headers:{ 'Content-Type': 'application/x-www-form-urlencoded' }, mode: 'cors' // no-cors, cors, *same-origin }) .then(function (response) { return response.json(); }) .then(function (res) { // 获取到Token,将Token放在localStorage document.cookie = `token=${res.data}`; localStorage.setItem('token', res.data); localStorage.setItem('token_exp', new Date().getTime()); alert(res.msg); }) .catch(err => { message.error(`本地测试错误${err.message}`); console.error('本地测试错误', err); }); } var btn1 = document.querySelector('.btn1'); btn1.onclick = function () { var username = document.querySelector('.username'); const token = localStorage.getItem('token'); fetch('http://localhost:3200/getUsername', { headers:{ 'Authorization': 'Bearer ' + token }, mode: 'cors' // no-cors, cors, *same-origin }) .then(function (response) { return response.json(); }) .then(function (res) { console.log('返回用户信息结果', res); if(res.errorMsg !== '') { alert(res.errorMsg); username.innerHTML = ''; } else { username.innerHTML = `姓名:${res.data.username}`; } }) .catch(err => { console.error(err); }); } </script>
</html>
复制代码
源码地址 以上只是一个特别简单的例子, 对于Token过时只作了简单的处理,不少边界条件没有作处理,好比异常的处理;
通常建议: 将登录信息等重要信息存放为session, 其余信息若是须要保留,能够放在cookie中
Session是一种HTTP储存机制, 为无状态的HTTP提供持久机制; Token就是令牌, 好比你受权(登陆)一个程序时,它就是个依据,判断你是否已经受权该软件;
Session和Token并不矛盾,做为身份认证Token安全性比Session好,由于每个请求都有签名还能防止监听以及重放攻击,而Session就必须依赖链路层来保障通信安全了。如上所说,若是你须要实现有状态的回话,仍然能够增长Session来在服务端保存一些状态。
cookie,session,Token没有绝对的好与坏之分,只要仍是要结合实际的业务场景和需求来决定采用哪一种方式来管理回话,固然也能够三种都用。