前言
最近有小伙伴在聊天室中提到这么一个需求,就是说希望用户在博客首页中登录了之后,可以跳转到管理系统去发布文章。这个需求的话就涉及到了不同网站之间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中