Vue项目中完全跨域的单点登录实现

前言

前段时间公司要求把几个内部系统做成单点登录，不知道单点登录是什么的点击这里，我们的各个系统是部署在不同域名底下的，所以这个需求的本质就变成了如何跨域共享token

尝试过程

1.首先跨域共享token，同域名下使用cookie的domain配置，这个方式肯定是行不通了。
2.在A系统中跳转B系统的时候，在url上带上token信息，这种方式也不行，首先在url上带token不太安全，其次就是不能保证用户是在A系统中跳转B系统，用户可能在A系统中登录之后，直接打开B系统，所以这种方式也被放弃。
3.我想到了天猫淘宝的单点登录，我翻了天猫淘宝登录页面无数个XHR请求之后，终于发现了其实现原理，天猫在登录页面通过iframe内嵌了一个淘宝登录页。在天猫登录页登录，实际上还是走的淘宝中的登录接口，并且登录成功之后cookie也是设置在淘宝的域名底下，在淘宝iframe中登录成功之后，通过postMessage进行iframe父子窗口通讯，天猫登录页得知用户在淘宝中已经登录成功，就通过get的请求，去请求淘宝的认证接口，此时会带上淘宝域名底下的cookie中的token，认证接口校验token有效性，并且返回token，此时在天猫登录页就拿到淘宝域名下的token，实现了token共享，为了方便理解，我画了一张图。

Demo地址

https://gitee.com/GaoWeiQiang1996/vue-sso-demo

具体的使用说明请查看码云上的readme.md文件