js - 单点登录

1、引言

最近在改造项目前端登录流程，有些心得，分享一下如何实现单点登录

2、什么是单点登录

单点登录(Single Sign On)，也简称sso，意思就是在一个项目手动登录后，在访问同一登录体系的另一个项目时会自动登录。

3、实现

1、思路

1、单点的实现

普通的登录的流程通过账号密码向后端换取token，或者通过账号密码向后端获取code，在用code换取token，不论哪种方式，最终前端都会得到一个token，在将token写入到localStorage或者cookie，在接口请求的时候带上这个token给后端鉴权，实现登录。我们在此基础上增加一个流程，使用一个公共Iframe来存储token，即每次项目登录的时候将token存到公共iframe的localStorage中，使用的时候在从这个iframe中的localStorage中取出token，简单来说就是各个项目共用一个iframe来存取token，使每个项目共用同一个地方的token，达到单点登录。

2、兼容

由于登录组件使用vue2.0开发，但是有的项目已经开始使用vue3.0开发，直接引入组件会报错，以后甚至可能出现其他框架项目，为了兼容这个情况，将整个登录都放到iframe中去维护，包括登录界面、登录接口调用、token存储等核心登录流程，而外部提供一个只含有js的npm包，主要用来创建iframe和iframe通信。不管是vue3.0还是其他js框架都能直接无负担接入登录组件

2、整体流程

4、优缺点

1、优点

• 实现了单点登录

• 各框架接入简单，无需关心兼容性问题，且接入方无需考虑接口跨域问题

• 便于升级，核心流程都在iframe中，流程升级无需更新npm包

2、缺点

• iframe有白屏问题，建议增加个loading态

5、结语

通过这次登录的实践也踩了不少坑，如登录组件都是以npm包的形式，导致vue3不兼容vue2组件，并花了半个五一假期重构成iframe形式，本文主要提供实现思路，其他细节实现起来其实也不复杂，主要就是登录组件的封装和iframe之间的通信，整个流程搞完后也收获了不少的知识和经验。