前端单点登录（SSO）方案思考

其实单点登录的关键在于，如何让%20Session%20Id（或%20Token）在多个域中共享。但是%20Cookie%20是不支持跨主域名的，而且浏览器对%20Cookie%20的跨域限制越来越严格。

在前后端分离的情况下，完全可以不使用%20Cookie，我们可以选择将%20Session%20Id%20（或%20Token%20）保存到浏览器的%20LocalStorage%20中，让前端在每次向后端发送请求时，主动将%20LocalStorage%20的数据传递给服务端。这些都是由前端来控制的，后端需要做的仅仅是在用户登录成功后，将%20Session%20Id%20（或%20Token%20）放在响应体中传递给前端。

在这样的场景下，单点登录完全可以在前端实现。前端拿到%20Session%20Id%20（或%20Token%20）后，除了将它写入自己的%20LocalStorage%20中之外，还可以通过特殊手段将它写入多个其他域下的%20LocalStorage%20中，比如通过H5的新属性postMessage来实现跨域共享等等。

总结：此种实现方式完全由前端控制，几乎不需要后端参与，同样支持跨域。

实现思路：当用户访问公司某系统(如product.html)时，在product中会首先加载一个iframe，iframe中可以获取存储在localStorage中的token，如果没有取到或token过期，iframe中内部将把用户将重定向到登录页，用户在此页面登录，仍将去认证系统取得token并保存在iframe页面的localStorage，实现方案大概如下所示：

• 实现方案

  前端拿到%20Token%20后，不仅要将它写入当前域下的%20localStorage%20中，还要通过%20iframe%20+%20postMessage()%20的方式将它写入多个信任的其他域下的%20localStorage%20中，从而实现登录状态的共享

• 实现代码

  将 Token 写入多个域名下的 localStorage 中

  const iframe = document.createElement('iframe')
  iframe.src = 'http://www.app.com/static/bridge.html'
  iframe.addEventListener('load', event => {
    iframe.contentWindow.postMessage(token, 'http://www.app.com/static/bridge.html')
  })
  document.body.append(iframe)
  
  

  在 iframe 加载的页面中绑定事件监听器，用来接收 Token 数据

  window.addEventListener('message', ({ data, origin, srouce }) => {
    localStorage.setItem('AUTH-TOKEN', data)
  })
  
  

  在各个应用系统请求的 Header 中携带 Token 令牌

  config.headers.common['Authorization'] = 'Bearer ' + token
  
  

Tip:Bearer 是 JWT 的认证头部信息，另外postMessage还是存在一定的兼容性问题，有兼容性要求的可以使用别的思路~

SSO 单点登录退出

目前我们已经完成了单点登录，在同一套认证中心的管理下，多个产品可以共享登录态。现在我们需要考虑退出了，即：在一个产品中退出了登录，怎么让其他的产品也都退出登录？

原理其实不难，可以在每一个产品在向认证中心验证 ticket(token) 时，其实可以顺带将自己的退出登录 api 发送到认证中心。

sso认证中心一直监听全局会话的状态，一旦全局会话销毁，监听器将通知所有注册系统执行注销操作。当某个产品 c.com 退出登录时：

1. 清空 c.com 中的登录态 Cookie。
2. 请求认证中心 sso.com 中的退出 api。
3. 认证中心遍历下发过 ticket(token) 的所有产品，并调用对应的退出 api，销毁局部会话，完成退出。
4. sso认证中心引导用户至登录页面

单点登录前端面试话术：

主要提出以下几个关键的点，其他的自己发挥：

1. sso提供一个所有系统重定向认证登录页面，浏览器和sso服务建立关系，分发令牌
2. 任意一个子系统进行登录，先验证未登录，登录过了就在认证中心存储对应的令牌（ticket或token）；
3. 不同的子系统只要有一个系统开始过了，皆可使用认证中心的令牌来进行面登录访问其他子系统；
4. 高阶组件HOC验证是否有token令牌来进行sso登录页面及相关逻辑和展示正常页面；
5. sso单点登录退出会清空全局会话进而清空所有的局部会话；