单点登录前端方案

先说说什么是单点登录？

单点登录就是多个应用共用一套登录机制，并且只要在一个应用已经登录过，那么在另一个应用中可以直接使用登录权限进行操作，而不需要再次进行登录，这大大优化了用户体验。

方案一 基于cookie

我们可以利用cookie可以在相同主域的不同源下进行共享的特性，实现单点登录。这种方式比较简单，主要在服务端实现，但是由于cookie容易遭受xss攻击，所以需要考虑使用secure和httponly来提高安全性。

方案二 认证中心

这个方案需要前端单独做一个认证中心，我的建议是做一个功能单一的认证中心，只需要登录、注册和凭证验证等认证动作，并使用jquery这种轻量级js库，不要使用vuejs这种spa框架，因为这种框架会使首屏加载变慢，也就是会使认证中心加载变慢，影响用户体验。 认证中心的单点登录流程如下：

1. 打开系统1，系统1需要登录 那么就跳转认证中心
2. 认证中心登录并保存凭据token
3. 跳回到系统1并携带认证中心的token，系统1保存token，此时认证中心和系统2都已经登录成功
4. 打开系统2，系统2需要登录，那么也跳转认证中心
5. 此时认证中心已登录，直接带上token跳回系统2，系统2保存token，此时3个系统都已经登录成功

这种方式的优点是可以完全跨域，并且实现简单，缺点是需要频繁跳转，影响用户体验，并且跳回系统的时候需要带上token，影响系统安全性。

方案三 基于postMessage Api

postMessage可以实现不同窗口间的数据传递，并且可以实现完全跨域，不过他主要限制于两种窗口，一种是从系统1打开的系统2（从url输入网址打开是无法传递数据的），第二种是嵌入的iframe窗口，这两种窗口我们可以传递凭证token来实现单点登录。