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中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/78959.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在一台服务器上通过 Nginx 配置实现不同子域名访问静态文件和后端服务

一、域名解析配置 要实现通过不同子域名访问静态文件和后端服务,首先需要进行域名解析。在域名注册商或 DNS 服务商处,为你的两个子域名 blog.xxx.com 和 api.xxx.com 配置 A 记录或 CNAME 记录。将它们的 A 记录都指向你服务器的 IP 地址。例如&#x…

Opencv进阶操作:图像拼接

文章目录 前言一、图像拼接的原理1. 特征提取与匹配2. 图像配准3. 图像变换与投影4. 图像融合5. 优化与后处理 二、图像拼接的简单实现(案例实现)1.引入库2.定义cv_show()函数3.创建特征检测函数detectAndDescribe()4.读取拼接图片5.计算图片特征点及描述…

LLM 论文精读(三)Demystifying Long Chain-of-Thought Reasoning in LLMs

这是一篇2025年发表在arxiv中的LLM领域论文,主要描述了长思维链 Long Chain-of-Thought 对LLM的影响,以及其可能的生成机制。通过大量的消融实验证明了以下几点: 与shot CoT 相比,long CoT 的 SFT 可以扩展到更高的性能上限&…

计算机网络常识:缓存、长短连接 网络初探、URL、客户端与服务端、域名操作 tcp 三次握手 四次挥手

缓存: 缓存是对cpu,内存的一个节约:节约的是网络带宽资源 节约服务器的性能 资源的每次下载和请求都会造成服务器的一个压力 减少网络对资源拉取的延迟 这个就是浏览器缓存的一个好处 表示这个html页面的返回是不要缓存的 忽略缓存 需要每次…

《构建社交应用用户激励引擎:React Native与Flutter实战解析》

React Native凭借其与JavaScript和React的紧密联系,为开发者提供了一个熟悉且灵活的开发环境。在构建用户等级体系时,它能够充分利用现有的前端开发知识和工具。通过将用户在社交应用中的各种行为进行量化,比如发布动态的数量、点赞评论的次数…

接口自动化测试框架详解(pytest+allure+aiohttp+ 用例自动生成)

🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 近期准备优先做接口测试的覆盖,为此需要开发一个测试框架,经过思考,这次依然想做点儿不一样的东西。 接口测试是比较讲究效…

Linux-----文件系统

文件大家都知道,前面的我的博客课程也为大家解释了关于文件的打开等,今天我们要谈论的是 文件在没被打开的时候在磁盘中的位置和找到它的方式。 画图为大家展示: 方便理解 我们从下面几个方面入手: 1. 看看物理磁盘 2. 了解一…

C++ set替换vector进行优化

文章目录 demo代码解释&#xff1a; 底层原理1. 二叉搜索树基础2. 红黑树的特性3. std::set 基于红黑树的实现优势4. 插入操作5. 删除操作6. 查找操作 demo #include <iostream> #include <set>int main() {// 创建一个存储整数的std::setstd::set<int> myS…

如何巧妙解决 Too many connections 报错?

1. 背景 在日常的 MySQL 运维中&#xff0c;难免会出现参数设置不合理&#xff0c;导致 MySQL 在使用过程中出现各种各样的问题。 今天&#xff0c;我们就来讲解一下 MySQL 运维中一种常见的问题&#xff1a;最大连接数设置不合理&#xff0c;一旦到了业务高峰期就会出现连接…

QT的布局和弹簧及其代码解读

this指的是真正的当前正在显示的窗口 main函数&#xff1a; Widget w是生成了一个主窗口&#xff0c;QT Designer是在这个主窗口里塞组件 w.show()用来展示这个主窗口 头文件&#xff1a; namespace Ui{class Widget;}中的class Widget和下面的class Widget不是一个东西 Ui…

《AI大模型应知应会100篇》第52篇:OpenAI API 使用指南与最佳实践

第52篇&#xff1a;OpenAI API 使用指南与最佳实践 &#x1f4cc; 摘要 本文将带你从零开始掌握 OpenAI API 的核心使用方法&#xff0c;涵盖从基础调用到高级功能的完整实战路径。通过详细的代码示例、图文解析和可运行的 Python 脚本&#xff0c;帮助你快速上手 GPT-3.5、GP…

C#学习7_面向对象:类、方法、修饰符

一、类 1class 1)定义类 访问修饰符class 类名{ 字段 构造函数&#xff1a;特殊的方法&#xff08;用于初始化对象&#xff09; 属性 方法... } eg: public class Person { // 字段 private string name; private int a…

湖北理元理律师事务所:债务优化中的“生活保障”方法论

债务危机往往伴随生活质量骤降&#xff0c;如何在还款与生存间找到平衡点&#xff0c;成为债务优化的核心挑战。湖北理元理律师事务所基于多年实务经验&#xff0c;提出“双轨并行”策略&#xff1a;法律减负与生活保障同步推进。 债务优化的“温度法则” 1.生存资金预留机制…

Jetpack Compose与Kotlin UI开发革命

Jetpack Compose + Kotlin:Android UI 开发的革命 简介 Jetpack Compose 是 Google 推出的现代 Android UI 工具包,结合 Kotlin 语言,彻底改变了传统 Android 开发的模式。过去,开发者依赖 XML 布局和命令式编程(如 findViewById 和手动更新视图),导致代码冗长且易出错…

基于pyqt的上位机开发

目录 安装依赖 功能包含 运行结果 安装依赖 pip install pyqt5 pyqtgraph pyserial 功能包含 自动检测串口设备&#xff0c;波特率选择/连接断开控制&#xff0c;数据发送/接收基础框架&#xff0c;实时绘图区域&#xff08;需配合数据解析&#xff09; ""&q…

QT人工智能篇-opencv

第一章 认识opencv 1. 简单概述 OpenCV是一个跨平台的开源的计算机视觉库&#xff0c;主要用于实时图像处理和计算机视觉应用‌。它提供了丰富的函数和算法&#xff0c;用于图像和视频的采集、处理、分析和显示。OpenCV支持多种编程语言&#xff0c;包括C、Python、Java等&…

Python自学第5天:字符串相关操作

1.字符串运算符 作符描述字符串连接*重复输出字符串[]通过索引获取字符串中字符[ : ]截取字符串中的一部分&#xff0c;遵循左闭右开原则&#xff0c;str[0:2] 是不包含第 3 个字符的。in成员运算符 - 如果字符串中包含给定的字符返回 Truenot in成员运算符 - 如果字符串中不包…

RabbitMq(尚硅谷)

RabbitMq 1.RabbitMq异步调用 2.work模型 3.Fanout交换机&#xff08;广播模式&#xff09; 4.Diret交换机&#xff08;直连&#xff09; 5.Topic交换机&#xff08;主题交换机&#xff0c;通过路由匹配&#xff09; 6.Headers交换机&#xff08;头交换机&#xff09; 6…

分库分表后复杂查询的应对之道:基于DTS实时性ES宽表构建技术实践

1 问题域 业务发展的初期&#xff0c;我们的数据库架构往往是单库单表&#xff0c;外加读写分离来快速的支撑业务&#xff0c;随着用户量和订单量的增加&#xff0c;数据库的计算和存储往往会成为我们系统的瓶颈&#xff0c;业界的实践多数采用分而治之的思想&#xff1a;分库…

CVE-2024-4577:Windows 编码错误

CVE-2024-4577是一个 PHP-CGI 漏洞,就是其中一种情况:虽然有这个版本,但由于 PHP 经常被反向移植,因此无法可靠地使用。 这篇博文详细介绍了如何研究 CVE-2024-4577 以及当前用于检测它的方法。 CVE-2024-4577 CVE-2024-4577 是 Windows 版 PHP 安装中的一个高危漏洞,会…