背景

最近项目开发中有两个网站http://a.x.com.cn和http://b.x.com.cn要做单点登录a和b网站登录使用的都是a网站的登录页即cookie中的token取得是a网站中的在b网站中只拿到token即可并未新建token所以在b网站只需要在退出时一并移除token即可但在a网站中需要在set和remove中都要操作

基础知识

首先什么是单点登录
简单粗暴地举个例子淘宝、天猫都属于阿里旗下当用户登录淘宝后再打开天猫系统便自动帮用户登录了天猫这种现象就属于单点登录

其次什么是顶级域名
域名可以分为gTLD通用顶级域名、ccTLD国别域名和NEW gTLD新通用顶级域三种。
其中我们常用的.com、.net、.org都属于通用顶级域名gTLD
代表中国的.cn、代表日本的.jp、代表美国的.us都属于国别域名ccTLD
.网址、.公司.top、.xyz等都属于新通用顶级域名NEW gTLD。

域名级数是指一个域名由多少级组成域名的各个级别被“.”分开简单来说有几个点就属于几级域名。最右边的那个词称为顶级域名。

再者怎么实现cookie共享
相信大家通过搜索可以看到cookie中有个属性为domain可以通过设置域名来实现对应的方法一般domain默认为网站自己。如果设置为“.google.com”则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”。

最后让我们复习下cookie的属性及方法

1. 新建或修改

cookies.set(keyName, value[, expireTimes[, path[, domain[, secure[,sameSite]]]]])

2. 获取

cookies.get(keyName)

3. 移除

cookies.remove(keyName [, path [, domain]])

4. 判断是否存在

cookies.isKey(keyName)

5. 获取所有cookie键名

cookies.keys()

解决办法

在a网站的set方法修改为

Cookie.set(token,token值,{domain:'.x.com.cn'})

remove方法修改为

Cookie.remove(token)
Cookie.remove(token,{domain:'.x.com.cn'})

b网站仅需修改移除方法参考自身项目是否有set方法有的话同上设置

Cookie.remove(token)
Cookie.remove(token,{domain:'.x.com.cn'})

可能会遇到的问题及解决办法

由于我的b项目是vue3写的所以使用的插件为vue3-cookies,但是我发现

Cookie.remove(token,{domain:'.x.com.cn'})

这行代码在项目中并不奏效所以我尝试着修改为

Cookie.set(token,‘’,{domain:'.x.com.cn'})

可以实现一同退出的效果

或者还可以更改插件为js-cookie使用remove方法也同样奏效了
再者可以试着在方法中添加path试试例如Cookie.remove(token,{path:‘/’,domain:‘.x.com.cn’}),path值要与目标域名一直哦可以在控制台查看想要操作的域名相关属性值