企业官网建设流程全解析

可以做超链接或锚文本的网站有哪些,360网站怎么做链接,网站建设推广新闻,ppt的制作方法微信扫码登录 iframe 方案中的状态拦截陷阱 背景 在 Web 端实现微信扫码登录时#xff0c;常见的方案是使用 iframe 嵌入微信二维码页面。用户扫码授权后#xff0c;iframe 内部会重定向到我们配置的回调页面#xff0c;回调页面再通过 postMessage 通知父页面完成登录。 …微信扫码登录 iframe 方案中的状态拦截陷阱背景在 Web 端实现微信扫码登录时常见的方案是使用 iframe 嵌入微信二维码页面。用户扫码授权后iframe 内部会重定向到我们配置的回调页面回调页面再通过postMessage通知父页面完成登录。最近在给登录流程增加「用户协议勾选」功能时遇到了一个有趣的问题用户勾选协议后扫码在手机上确认授权前又取消了勾选结果登录流程依然执行了。问题现象预期行为用户取消勾选协议 → 拦截登录流程 → 不跳转实际行为用户取消勾选协议 → 控制台显示未同意协议不触发事件 →页面依然跳转了架构分析整个微信登录的组件结构如下Login.vue (页面) └── Container.vue └── wxQrCodeLogin.vue └── iframe (微信二维码) └── WxLogin.vue (回调页面iframe 内部)登录流程用户勾选协议 → 显示二维码iframe用户手机扫码 → 微信授权页面用户确认授权 → iframe 重定向到WxLogin.vueWxLogin.vue调用后端接口获取 token通过postMessage通知父页面父页面完成登录跳转问题根因在wxQrCodeLogin.vue中我添加了协议状态拦截window.addEventListener(message,(msg){// 未勾选协议直接返回if(!isAgree.value){console.log(未同意协议不触发事件);return;}if(msg.data.type1){emit(qrLoginSuccess,msg.data.token);}});看起来没问题但实际上拦截失效了。原因在WxLogin.vueiframe 内的回调页面if(token){Store.set_cookie(token,token);// 问题在这里window.parent.postMessage({type:1,token},*);}iframe 内部直接设置了 cookie由于 iframe 和父页面同域cookie 是共享的。当 token 被写入 cookie 后主站的登录状态检测逻辑检测到 token自动触发了页面跳转。整个过程微信授权成功 → iframe 内WxLogin.vue执行Store.set_cookie(token, token)→cookie 已写入postMessage发送给父页面父页面isAgree检查 → 返回不处理但 cookie 已经存在 → 主站检测到登录状态 → 跳转拦截的是postMessage但 cookie 的写入发生在postMessage之前根本拦不住。解决方案核心原则iframe 回调页面只负责「中转」不应该直接操作登录状态cookie、localStorage 等。状态的写入应该由父页面根据业务逻辑决定。代码修改WxLogin.vueiframe 回调页面// 修改前if(token){Store.set_cookie(token,token);// 删除这行window.parent.postMessage({type:1,token},*);}// 修改后if(token){// 只传递 token不设置 cookiewindow.parent.postMessage({type:1,token},*);}父页面在收到postMessage后根据isAgree状态决定是否设置 cookie 并完成登录window.addEventListener(message,(msg){if(!isAgree.value){// 可以弹出协议确认弹窗让用户选择return;}if(msg.data.type1){// 在这里设置 cookieawaitloginCallback({token:msg.data.token});emit(qrLoginSuccess,msg.data.token);}});延伸思考为什么 v-show 不能解决问题最初尝试用v-show隐藏 iframe但v-show只是display: noneiframe 依然存在内部的回调逻辑照常执行。为什么 v-if 也有问题v-if会销毁 iframe但如果用户已经扫码进入微信授权页面此时销毁 iframe 再重建新的 iframe 无法接收之前扫码的授权回调用户需要重新扫码。最佳实践iframe 回调页面职责单一只负责接收授权结果、调用后端接口、通过postMessage传递数据状态操作由父页面控制cookie、localStorage、页面跳转等操作都应该在父页面根据业务状态决定考虑异步流程中的状态变化用户可能在异步操作过程中改变状态设计时要考虑这种边界情况总结这个问题的本质是职责划分不清晰导致的。iframe 内的回调页面越权操作了本应由父页面控制的登录状态使得父页面的拦截逻辑形同虚设。在设计跨窗口/跨 iframe 通信的功能时要明确各个组件的职责边界状态的写入和业务逻辑的执行应该集中在一个地方避免分散导致的控制失效。