Vue实现不同网站之间的Cookie共享功能
前言
最近有小伙伴在聊天室中提到这么一个需求，就是说希望用户在博客首页中登录了之后，可以跳转到管理系统去发布文章。这个需求的话就涉及到了不同网站之间cookie共享的功能，那么咱们就来试着解决一下这个功能。
实现方式
1. 后端做中转
我们可以通过后端服务去做一个中转，即如第三方登录一样，前端点击按钮，然后把cookie当做参数传给后端，然后后端重定向到管理系统，并把cookie值拼接到地址栏后面，然后管理系统就可以解析地址栏获取到cookie值。
2. js-cookie
我们项目中用的是js-cookie来管理cookie的，那我们就可以使用它来更快更方便的解决这个需求。当然其他第三方cookie都是可以的，基本代码都是通用的。
具体代码
import Cookies from 'js-cookie'const TokenKey = 'blog_token'// 获取当前域名
const getDomain = () => {const hostname = window.location.hostname// 如果是 localhost，返回 null 让 cookie 在所有端口共享if (hostname === 'localhost' || hostname === '127.0.0.1') {return null}// 如果是 IP 地址，返回完整 IPif (/^(\d{1,3}\.){3}\d{1,3}$/.test(hostname)) {return hostname}// 获取顶级域名，例如 example.comconst domainParts = hostname.split('.')if (domainParts.length > 2) {return '.' + domainParts.slice(-2).join('.')}return hostname
}export function getToken() {return Cookies.get(TokenKey)
}
从以上代码我们可以看出来解决这个需求的关键点其实就是通过domain属性，通过getDomain先判断是本地开发还是线上环境，本地开放的话全端口共享，线上访问的就子域名共享。
要注意俩个网站的Tokenkey需要一致
缺陷
通过以上代码大家在测试验证之后会发现，删除cookie操作也是同步的，也就说一但其中一个网站删除了cookie就会导致另一个网站也没有了数据，这可能是大家想要的效果，但不是我想要的，那么我们就需要去解决删除同步的问题。
// 获取当前完整域名，用于删除操作
const getCurrentDomain = () => {return window.location.hostname
}export function setToken(token) {// 设置 cookie，7天有效期，并添加 domain 配置return Cookies.set(TokenKey, token, { expires: 7,domain: getDomain()})
}我们还是通过domain去指定只有在当前域名才可以删除，这样我们就解决了删除同步的缺陷。
改进
虽然通过以上步骤可以实现cookie共享和删除，但是不要忘了咱们的需求点，我们是要不重新登录，虽然共用一个token是可以不需要重新登录，但是一但某一边退出了，那么另一边的token也就会失效。
要实现这个功能，具体就要看各位项目中的权限认证代码环节了，如本项目用到的是sa-token，我们就可以使用sa-token去生成一个临时token，再把临时token赋值到管理系统中的cookie中