cookie实现单点登录的具体方案

前言

网上搜单点登录的文章有很多实现方案有cookie、session、jwt等但大多讲的都是原理核心问题都没提到因此这里我根据以下2个条件整理一个可行方案

• 只考虑同域不跨域
  如a.my.com、b.my.com等都在*.my.com主域内因此使用cookie比较方便
• 前后端分离
  目前大多前端项目都基于react、vue因此必须要考虑

问题

看了不少文章有个问题一直没找到方案使用cookie时前端如何判断是否登录因此我按自己的理解想了两个方法

• 方法一HttpOnly设为false
  后端设置cookie时将HttpOnly设为false这样前端js就能读取cookie判断是否存在登录信息但是安全性会降低
• 方法二使用nginx判断
  nginx代理判断header里是否有指定cookie没有则跳转sso登录页

场景如下

• A网站a.my.com
• B网站b.my.com
• SSO网站 sso.my.com
• 存储用户已登陆cookie的值为tk=xxxxxx为后端加密后的用户id和过期时间

实现逻辑

A网站

• 浏览器打开 a.my.com/index.html
• 前端判断是否登录
  • 方法一HttpOnly设为false
    • js判断浏览器cookie是否存在tk有就继续打开网页否则跳转sso.my.com/login.html?return=a.my.com/index.html
  • 方法二nginx判断
    • nginx代理请求头cookie是否存在tk存在返回静态文件否则跳转sso.my.com/login.html?return=a.my.com/index.html
• 输入账号密码点击登录post请求给sso.my.com/api/login
• sso服务端验证信息成功则返回200状态码并设置cookietk=xxx域名设为.my.com方法一中在此处设置HttpOnly为false
• 前端判断状态码为200获取url中return值的A网站链接a.my.com/index.html并跳转过去
• A网站每次请求api时A后台获取请求cookie里的tk没有则返回401
• 若存在tk则用sso服务中的加解密方法进行解析可封装成sdk获取到用户id和过期时间如果过期则返回401
• 前端js判断返回状态码为401则跳转SSO登录页sso.my.com/login.html?return=当前url

B网站

• 浏览器打开b.my.com/index.html
• 请求时会自动带上.my.com域中的cookie实现登陆状态
• 其他同上