微信公众号授权成功重定向后点击返回最上一层时显示空白页

本文讲述了作者在Vue2.x环境中遇到的微信公众号授权返回空白页问题,通过调整路由策略和使用WeixinJSBridge控制返回流程,解决了用户在授权后返回时的空白页面问题。

微信公众号授权返回时显示空白页

前言

之前也做过公众号相关的开发,网页授权、模板消息、关键词回复、自动回复、设置公众号菜单等配置我搞过。但为啥不记得网页授权返回最上面一层显示空白页面的问题了呢?小朋友…我现在有一些?回忆了一下,应该是当前授权模式跟之前的网页授权模式不同,之前是只在刚进入某个具体页面时获取授权。
有这么一句话:只要我们够努力,老板才能开上法拉利,只要我们够辛苦,老板才能提路虎。二期小程序也做完以后,公众号的开发需求就如约…不期而至。用户在公众号中可以看到3个大菜单:报表(总览)、管理(设备管理、订单管理)、我的,以及若干子页面,在进入以上任何一级页面的时候,都需要去微信那里拿一个code来对用户进行认证,认证成功服务端再给一个临时的通讯令牌。后面的所有交互全部以通讯令牌为用户标识。

环境

  • Language: Vue 2.x
  • Tool: VS Code + 微信开发者工具
  • Server:JAVA(复用PC端接口)

迷途

因为需要每次当用户第一次进入页面时,就去拿授权Code进行用户认证获取临时通讯临牌,并且该通讯令牌在进入页面后还要使用。故,我将与微信认证的交互写在了router的路由前置过滤器中。只有认证完成后才会next()进行页面跳转显示。PS:写在App.vue中也可以,但需要写一个全局异步回调,在用户进入的页面中使用这个回调继续页面请求操作。参考

很顺利的,我将所有页面开发完成并完成了联调测试。但大多数时候,不出意外的话,意外就要发生了…

当我在微信公众号中进行操作时发现用户进入的第一个页面底部的返回按钮是可以操作的!并且点了返回按钮出现了空白页面。在这里插入图片描述
没有错,首页就应该给个特写。此页面底部返回按钮是可以点击的!!!并且返回了空白页面。

于是乎,我就开始查看空白页面的原因。我的页面->右上角复制链接 + 空白页面->右上角复制链接。发现两个链接竟然是一模一样的。我的天呐~怎么回事?在路由前置拦截器中来一个log日志吧,看看我这个返回时从哪里来,要到哪里去?

但在微信开发者工具中实际测试下来发现,当点击返回的时候路由前置拦截器什么都没有打印。反而出现了这么一个日志
在这里插入图片描述
这?如果我没猜错的话,是微信的授权页面吧!果然靠自己的努力是不够的。赶紧的找找大家的灵感
在这里插入图片描述
找了几个例如

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值