单点登录(SSO),前端需要考虑些什么？

前言

最近在做单点登录的前端适配工作，包括移动端、小程序、web。也许一些人还没有接触过单点登录，接下来我将以keycloak为例进行探讨。首先介绍两个概念:

单点登录（Single Sign On），简称为 SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。(百度百科)

Keycloak是一个为浏览器和RESTful Web服务提供 SSO 的集成。

声明：本文仅代表个人观点

Refresh_token

如果做过微信开发的人应该看到过refresh_token这个概念。我就直接引用官方的解释

refresh_token由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。(微信开放文档)

简单介绍一下，在token即将过期时，通过refresh_token来拿到最新的token

在接下来的介绍中也会用到refresh这个概念。

流程图

先来看一下整体的流程图，如果不是很明白，可以先往下看，之后再翻上来看就容易理解了

先来想几个问题

1. 首次登录如何处理？
2. 之前登录过如何处理？(考虑关掉后和重新打开的间隔时间)
3. 用户在使用当中，网络断了，然后几分钟网好了如何处理？(比如过隧道)
4. 定时器选择setInterval还是选择setTimeout?(考虑使用过程中，token过期的时间是否可能在服务端被修改)

问题1和问题2我们可以在流程图中找到答案；

问题3(考虑用户体验)：在过隧道的时候，假如正好是定时器请求刷新token的时间，这时候刷新token肯定会失败，那也不能直接就让定时器断掉，而是多次尝试重新连接，直到refresh_token也过期。

问题4：考虑到token过期的时间会被在服务端更改，所以setTimeout是更好的选择

核心代码

token检查，我们需要考虑超时时间(我们的技术栈是vue)

// 返回值为过期时间
function checkTokenExpire(type: string) {
   
  let kcData: any = localStorage.getItem('keycloak')
  if (kcData) kcData = JSON