vue微信H5页面,首次进入授权之后的页面,按手机返回键导致重新授权等问题等解决办法

最新推荐文章于 2025-10-22 16:59:40 发布
原创 最新推荐文章于 2025-10-22 16:59:40 发布 · 4.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js #html5

vue微信H5页面,首次进入授权之后的页面,按手机返回键导致重新授权等问题等解决办法

问题产生的场景:vue微信h5页面,授权后通常会进入到某个指定到页面,此时若用户点击手机的返回键或浏览器的返回键时,页面会重新授权和跳转,但此时code已经失效了,获取微信的openId就会导致失败,因此需要阻止用户点击返回键,这里想到但办法是在进行微信授权前存个缓存值,例如

window.sessionStorage.setItem('historyNum','1')

授权后改变historyNum的值,在点击返回时判断这个值是否为1,若为1表示正常授权后,若不为1表示已经授权了,此时就可以做一些阻止授权的方法等,具体可能需要根据业务需求来改动.

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键

JCAL123
关注
uniapp - 详解H5微信公众号网页微信授权登录后重复跳转登录页，点同意后频繁授权登录无法返回上一页，微信h5登录后如何跳转到原来的页面，公众号网页授权，已授权用户会再次弹出授权框页（完美解决教程
🏆 前端领域优质创作者
07-07 5095
uniapp，vue2，vue3，微信授权登录，公众号网页，vue3公众号登录，h5，网页，网站，移动端H5，微信登陆，重复跳转问题，一直来回来总是授权登录，路由，UniApp微信授权登录详细教程，出不去怎么办，授权页面频繁重复，用户都已经同意已授权登录了还会再弹出授权框，微信公众平台网页授权两次或多次重定响应问题，多次重定向跳转，导致code使用多次问题，vue微信公众号如何授权登录后返回到原来的页面，跳不出去，点击同意后授权登录还会再跳转回来，用户同意授权后还是会回到登录页，苹果IOS手机无限，死循环一
vue3：解决H5网页苹果ios手机键盘弹起再收回的时候页面会留白问题，页面软键盘弹起后页面下方空白区域，vue3 h5页面在iphone手机上底部会有留白解决办法（兼容微信公众号H5微信内置浏览器）
高级前端工程师
11-01 3123
vue3 H5解决IOS端微信H5页面软键盘弹起后页面下方留白的问题，h5页面在iphone手机上底部会有留白解决办法，vue3 h5页面IOS唤起键盘后--导致页面底部空白问题，vue3移动端解决h5页面在ios端输入框失去焦点后页面底部留白问题，微信浏览器中，微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白，iOS Safari浏览器，h5 移动端 iphone键盘弹起再收回的时候，页面会留白，需要手动下拉，ios弹出键盘后，页面位置有一截空白，移动端IOS的H5页面被键盘顶
H5微信授权登录后点击返回出现循环登录无法退出问题
qq_30040899的博客
06-04 6929
简单介绍h5微信授权流程 1、入口页跳转到我们自己创建的空白授权页 2、在空白授权页判断url上是否包含code，没有code拼接微信授权链接，通过location.href进行跳转 location.href = https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&stat
H5/vue/uniapp嵌入微信登录遇到的一些问题（后端版本）
f1752388440的博客
10-22 810
本文介绍了在微信公众平台实现微信登录授权的完整流程。首先需要准备测试公众号（可通过微信公众平台沙箱获取），配置网页授权回调域名。开发时需构造授权链接引导用户授权，获取code后通过后端请求access_token接口（需使用公众号的appid和secret）。重点注意事项包括：回调域名需与配置一致、secret需后端保护、授权链接只能在微信浏览器打开。文中提供了微信官方文档链接和具体接口调用示例，帮助开发者快速实现微信登录功能。
vue中解决微信html5原生ios虚拟键返回不刷新问题
01-18
问题描述： 做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会重新加载。 实现功能： 解决IOS问题(在home页面点返回时路由还是在home页面，并完成重新加载) 分析： 需要在进入页面时加入监听，并在页面离开时移除监听。因为home页面是个滚动列表，所以我采用了keep-alive路由缓存，所以不能在created()和beforeDestroy()生命周期中写，因此我在home.vue中加了组件内的守卫befo
vue项目 ios 微信内置浏览器 H5页面授权后 有返回按钮问题
哼哼哼哼哼
05-08 4686
ios 微信的内置浏览器 会出现返回键 点击的时候是不触发 window.addEventListener("popstate",this.isBack,false) 这个方法的 所以下面讲下我的处理方法： 微信 需要授权 而授权得时候 需要跳转到 code页面 使用 location.replace next({ path: store.state.token.after_login_go, replace: true }); router.replace('/'...
H5企业微信授权登录后 手机左滑返回出现循环登录无法退出问题解决
weixin_44670774的博客
04-27 2366
企微开发企业自建应用，我们使用企微内嵌浏览器时，发现H5页面认证成功后，左滑返回会回退到入口页再次触发认证，影响体验，无限循环。下面是问题解决方案
解决微信授权成功后点击按返回键出现空白页和报错的问题
11-20
微信授权我是 在index.vue做的授权，是一个空白页，因为授权需要回调所以这个页面会刷新两次，当我们授权成功进入主页面后，点击返回键或者点击手机的物理返回键，因为浏览器history机制，按物理返回或者返回肯定是...
Vue3 - 手机移动端H5网页强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页微信内置浏览器）
热门推荐
🏆 前端领域优质创作者
06-22 1万+
vue3，h5网页，input输入框组件，vue3 h5软键盘弹出，vue3输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决vue3输入框，键盘弹起时页面整体上移问题，vue3调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决VUE3软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，Vue中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在，Vue3软键盘把界
vue实现微信浏览器左上角返回按钮拦截功能
11-21
　在微信公众号开发中，有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页，之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好，所以...
html5 微信返回按钮,vue中解决微信html5原生ios虚拟键返回不刷新问题
weixin_33329746的博客
06-04 518
问题描述：做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会重新加载。实现功能：解决IOS问题(在home页面点返回时路由还是在home页面，并完成重新加载)分析：需要在进入页面时加入监听，并在页面离开时移除监听。因为home...
uniapph5授权成功后返回上一页_微信小程序：授权登录
weixin_39829073的博客
12-04 1587
一：原因看到标题也许也许有的人会奇怪，我们不是已经在页面中显示用户的头像和昵称了吗，而且open-data组件也可以显示用户的其他信息。其实，仅仅是这样只是让用户看到了他自己的头像和昵称不足以我们让对用户信息进行管理。我们需要通过授权将得到的用户信息上传至云数据库，才能方便我们管理用户信息。再来回顾一下我们编写的“个人”页面：习惯了首页的简洁，再看个人页面文件夹混乱的文件都快看不下去了，...
详解uniapp开发h5页面在微信浏览器跳转外链，ios按底部返回键，需要刷新页面数据的问题
GongWei_的博客
09-22 7792
处理ios 点击微信浏览器返回键刷新页面的问题
h5 获取微信公众号授权登录
byf5229的博客
03-12 3808
微信扫码打开h5 获取微信公众号授权登录的code，如果跳转时自己原本携带的参数该如何进行授权。
h5页面返回到微信首页
weixin_34221036的博客
06-13 1726
h5页面返回到微信首页等同于关闭当前打开页面 使用微信内置WeixinJSBridge.call直接关闭 setTimeout(function() { //这个可以关闭安卓系统的手机 document.addEventListener( "WeixinJSBridgeReady", function() { WeixinJSBridge.call("closeWindow");...
vue项目调用微信授权
gyy191425的博客
03-07 995
1.先去公众号下配置appid和授权回调域名：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index （1）.配置授权回调域名如下： （2）.将域名写入里面，注意："不需要把“http://”写进去，否则会提示redirect_uri参数错误。 （3）查看appid： 登录你所关...
vue微信授权页面重定向遇到的问题
qq_41985464的博客
03-03 4041
问题描述：当时获取微信的code的时候，直接再created里面调用的，然后用sesssionStorage储存的code，这样每次进入页面，页面都会重新重定向获取code，这样页面重定向的话，获取code的哪个页面就是重定向的页面，刚开始进来的哪个就没有code，用手机自带的返回键回退到这个页面就没有code了，解决办法就是使用cokie存储，使用它是因为他又过期时间，这样可以考虑code的时效...
vue2 写的h5链接 在移动端跳到下一个页面时候,禁止手机自带返回按钮返回,怎么解决
最新发布
12-11
在Vue2开发H5页面时，可通过以下两种情况禁止手机自带返回按钮返回到上一页。 ### 通用禁止物理返回键的方法 在Vue组件中，可在`mounted`生命周期中往历史记录添加当前页面URL，同时监听`popstate`事件，在页面销毁时取消监听，避免影响其他路由页面。示例代码如下： ```vue <template> <div> <!-- 页面内容 --> </div> </template> <script> export default { mounted() { if (window.history && window.history.pushState) { // 往历史记录里面添加一条新的当前页面的url history.pushState(null, null, document.URL); // 给 popstate 绑定一个方法 监听页面刷新 window.addEventListener('popstate', this.goBack, false); } }, methods: { goBack() { // 阻止返回操作，可根据需求添加逻辑 history.pushState(null, null, document.URL); } }, beforeDestroy() { // 页面销毁时，取消监听 window.removeEventListener('popstate', this.goBack); } }; </script> ``` ### 针对iOS微信内置浏览器的特殊处理 若需针对iOS微信内置浏览器进行特殊处理，可在组件中判断设备和浏览器类型，根据不同情况处理返回操作。示例代码如下： ```vue <template> <div> <!-- 页面内容 --> </div> </template> <script> export default { mounted() { this.isBack(); if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); } }, methods: { isBack() { var u = navigator.userAgent; var ua = window.navigator.userAgent.toLowerCase(); var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 首次进入马上点返回 if (isIOS) { if (ua.match(/micromessenger/i) === 'micromessenger') { // 微信 if (localStorage.getItem('login_go') === 'null') { wx.closeWindow(); } if (this.$route.name === localStorage.getItem('login_go') || this.$route.name === null) { wx.closeWindow(); } } } localStorage.setItem('login_go', this.$route.name); }, goBack() { history.pushState(null, null, document.URL); } }, beforeDestroy() { window.removeEventListener('popstate', this.goBack); } }; </script> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值