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 地址，返回完整 IP
  if (/^(\d{1,3}\.){3}\d{1,3}$/.test(hostname)) {
    return hostname
  }
  // 获取顶级域名，例如 example.com
  const 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中