传统登录方式
最传统的登录方式应该是客户端用cookie,服务器端用session。
现在一般都不使用session了,都使用token。
阮老师的 JSON Web Token 入门教程 里面讲了,为什么不使用服务器保存 session 数据,而使用把所有数据都保存在客户端,每次请求都发回服务器的JWT认证方式。
理由之一是:网站做大了,服务器集群,session不利于数据共享,虽然可以做,但是解决起来很麻烦,后端需要做很多后续的维护。
要继续使用session也可以使用数据持久化,这无疑也是后端比较麻烦的。工程量比较大,虽然也有架构计较清晰的优点。
我现在做的方案是:localStorage存储token。
但是由于账号密码验证机制还是使用cookie存储比较好, 所以还是要尝试一下cookie存储toekn的方案。为什么比较好,下面有说到。
说一下为什么使用localStorage 做客户端存储而不是cookie?
这里需要比较一下其优缺点和运用场景:
cookie的缺点:
1,cookie的主要缺点是存储大小不能超过4k,而webStorage有5M的存储大小。
2,使用cookie保存过多数据会带来性能问题。
3,cookie需要引入才能使用,h5规范新增了localStorage 的API, 可以直接使用。
4,cookie不可以跨域,当然了,跨域共享也是可以实现的,方法我现在知道的有两个。第一个是设置顶域;第二个是设置Nginx代理服务器,将两个服务器域名统一到一个反向代理服务器。
cookie有这么多缺点我们为什么还要使用呢?当然是因为它也有优点。
cookie的优点是可以设置过期时间,但是localStorage是永久存储,必需手动清除。不好控制失效时间。而且,webStorage的安全性的隐患比较大。细想一下,我们做用户登录验证最重要的是什么,当然是安全性啦!!!造成webStorage的安全隐患的原因应该和永久存储也有一定的关系,不过肯定还有别的原因,我这里就不细说了,因为我也不清楚,网上的博客也说不清楚,以后在哪看到了再补充。
localStorage存储方式:
// 存储token
localStorage.getItem('Authorization') : ''
// 修改token
localStorage.setItem('Authorization', user.Authorization);
cookie存储方式:
1.引入相应JS
<script src="web/js/jquery-1.9.1.min.js"></script>
<script src="web/js/jquery.cookie.js"></script>
2.保存cookie
$.cookie("名称","值")
$.cookie("名称","值",{expires:失效时间})
2.1 如果要设置失效时间就这么干:
{{
$.cookie("名称","值");
var expiresDate= new Date();
expiresDate.setTime(expiresDate.getTime() + (毫秒*60*1000));
$.cookie("名称",“值”,{expires:expiresDate});
}}
3.获取cookie
$.cookie("名称")
4.删除cookie
$.cookie("名称",null)
单点登录方式
这个说一下原理,学会用轮子就可以。
详情见我的下一篇博客
第三方登录
主要是接入微信登录和qq登录,淘宝登录、支付宝登录、微博登录先不管。
这里面的延伸知识
JWT: JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案。
OAuth 2.0
cookie不能跨域,一般的解决方式,将设置cookie的域设置为顶域。
session不能共享,一般的解决方式有:Spring-Session。
参考博客
http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
https://www.cnblogs.com/mengfangui/p/10521594.html