使用serviceWorker做前端的单点登陆

网上关于serviceWorker一般是用于做PWA的，这里介绍的不是这个，如需了解，自行百度

原理：

serviceWorker是一个独立于页面的，浏览器级别的线程

serviceWorker线程可以与页面间通过addEventListener('message',postMessage进行通信

serviceWorker线程中可以获取到所有被此线程控制的浏览器窗口 self.clients.matchAll()

代码解析

1. 首先页面中初始时要初始化serviceWorker：

navigator.serviceWorker
      .register('serviceWorker.js', {
        scope: '/',
      })
      .then(function(registration) {
        if (config && config.onRegister) {
          config.onRegister(registration)
        }
        ...

2. 每个页面进入时，通知serviceWorker有新页面打开了，并监听serviceWorker的信息。

页面代码：

navigator.serviceWorker.controller.postMessage({
    type: 'closeOtherClient',
 })

if (event.data.oprType && event.data.oprType === 'close') {
    disconnectCBS.forEach(cb => cb())
}

3. serviceWorker.js代码

serviceWorker收到新窗口打开信号后，去通知其他所有页面执行关闭代码（比如页面上弹框提示用户，您的账号已在别处登陆）

this.addEventListener('message', function(event) {
  const senderId = event.source ? event.source.id : 'unknow'

  if (event.data.type === 'closeOtherClient') {
    self.clients.matchAll().then(function(clients) {
      if (clients && clients.length) {
        clients.forEach(function(client) {
          if (senderId !== client.id) {
            client.postMessage({
              oprType: 'close'
            })
          }
        })
      }
    })
  }
})