前言
这里主要讲解什么是单点登录以及前端如何实现单点登录。但注意单点登录并不安全，因为只要数据在前端，不管你怎么加密，都只是相对安全，而非绝对安全，你用cookie和session安全级别都差不多，都很容易被攻击。所以做单点登录的系统，就不要出现很重要的信息，或是要做很重要的信息修改或获取时，得再进行一次安全验证。
另外推荐一个前端加密的文章，内容相对比较全，有兴趣可以看看 https://mp.weixin.qq.com/s/V-g2P42t8EJDl-wFhWxSUQ
什么是单点登录？
单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。
常用的地方例如学校，医院，或类似豆瓣这种大型网站，他们可能开发了很多不同的系统，像是上豆瓣，要登录豆瓣FM、豆瓣读书、豆瓣电影、豆瓣日记，如果我们访问豆瓣读书、豆瓣电影、豆瓣日记都需要进行一次登录认证，那么用户体验是非常不好的。所以引用了单点登录。只要一次登录就可以访问所有相互信任的应用系统。
上图实现的是如何使用cookie进行单点登录
客户端持有ID，服务端持有session，两者一起用来保持登录状态。客户端需要用ID来作为凭证，而服务端需要用session来验证ID的有效性。但是session这东西一开始是每个server自己独有的，豆瓣FM有自己的session、豆瓣读书有自己的session，而记录ID的cookie又是不能跨域的。所以，我们要实现一次登录一次退出，只需要想办法让各个server的共用一个session的信息，让客户端在各个域名下都能持有这个ID就好了。再进一步讲，只要各个server拿到同一个ID，都能有办法检验出ID的有效性、并且能得到ID对应的用户信息就行了，也就是能检验ID。
实现方式
前端经常使用cookie或session来存储Token，撇开安全性不说，怎么让别的域名也能够拿到这个域名下的cookie？同域名很简单，我们可以把token存在cookie里，把cookie的路径设置成顶级域名下，这样在当前浏览器打开的所有子域都能读取cookie中的token。这就是共享cookie的方式。
例如：cn.yahoo.com和www.yahoo.com，存入到任何一个域里的cookie都能被另一个域获取，因为顶级域名都是yahoo.com。
只要拿到的cookie里的token，进入另一个系统时写个判断，例如利用vue的路由管理，判断用户信息与后台的是否一致，是的话允许进入，否则直接跳转到登录页。
总结
单点登录的优点
1、提高用户的效率。 用户不再被多次登录困扰，也不需要记住多个 ID 和密码。另外，用户忘记密码并求助于支持人员的情况也会减少。
2、提高开发人员的效率。 SSO 为开发人员提供了一个通用的身份验证框架。实际上，如果 SSO 机制是独立的，那么开发人员就完全不需要为身份验证操心。他们可以假设，只要对应用程序的请求附带一个用户名，身份验证就已经完成了。
3、简化管理。 如果应用程序加入了单点登录协议，管理用户帐号的负担就会减轻。简化的程度取决于应用程序，因为 SSO 只处理身份验证。所以，应用程序可能仍然需要设置用户的属性（比如访问特权）。
单点登录的缺点
1、不利于重构 因为涉及到的系统很多，要重构必须要兼容所有的系统，可能很耗时。
2、无人看守桌面 因为只需要登录一次，所有的授权的应用系统都可以访问，可能导致一些很重要的信息泄露。