vue前端开发两个窗口之间的互相通信

一个页面window.open了一个新窗口,要关闭新窗口的同时进行老窗口的路由跳转。

方法1:网上查找的postMessagr方法 

在新窗口进行路由跳转判断并关闭新窗口的浏览器页面:

在老的窗口进行消息接收监听进行路由跳转

这个方法本地测试没问题后测试环境无法使用   解决无果后换了方法二用localStorage存储信息 发现依然不可取  ------可能是代码哪里不到位或者版本问题

方法三:在新窗口构建老窗口的url跳转  

### 实现同一台电脑多个用户登录 Vue 前端应用程序 为了实现在同一台计算机上的不同浏览器标签页中允许多个用户的登录,主要挑战在于处理 token 的存储和管理机制。当使用单页面应用(SPA)技术如 Vue.js 开发的应用程序时,默认情况下,浏览器中的全局状态(例如 localStorage 或 sessionStorage 中保存的 token)会被所有同源策略下的标签共享。 一种解决方案是在创建新的浏览上下文来隔离这些 session 数据。具体方法如下: #### 使用无痕模式窗口打开新会话 鼓励用户利用浏览器提供的隐私浏览功能(也称为隐身模式或 InPrivate 浏览),这将为每个新开的无痕窗口提供独立的 cookie 和缓存空间,从而允许不同的用户同时登录而不会相互干扰[^2]。 另一种更灵活的方法涉及修改前端代码以支持多账户并行工作: #### 修改 Token 存储逻辑 改变默认的 token 存储位置,不再依赖于整个域名范围内的 storage 选项(localStorage/sessionStorage)。而是采用更加细粒度的方式,比如基于 URL 参数传递 token 或者针对特定路径设置 cookies,并确保 API 请求携带正确的认证信息。 对于基于 Vue 应用来说,可以通过调整 Vuex store 来维护多个用户的 state 对象,在每次发起 HTTP 请求之前动态附加相应的 Authorization header: ```javascript // main/src/store/index.ts import { createStore } from 'vuex'; export default createStore({ modules: { user1: /* 用户1的状态 */, user2: /* 用户2的状态 */ } }); ``` 然后可以在 axios 拦截器里根据不同情况选择合适的 token 进行发送: ```javascript // main/src/plugins/axios.js import axios from 'axios'; const instance = axios.create(); instance.interceptors.request.use((config) => { const currentTabId = getCurrentTabId(); // 获取当前 tab ID 函数待实现 config.headers.Authorization = `Bearer ${store.state[currentTabId].token}`; return config; }); function getCurrentTabId() { // 返回唯一标识符用于区分各个 Tab 页面, 可能是通过 hash、query string 等方式获取 } ``` 这种方法不仅解决了 token 被覆盖的问题,还提高了用户体验的安全性和便利性[^4]。 另外值得注意的是,如果项目采用了微前端架构,则需要特别关注子应用之间通信以及各自的身份验证流程设计,确保它们能够正确地管理和交换身份令牌[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值