解决微信授权成功后点击按返回键出现空白页和报错的问题

9 篇文章 3 订阅

微信授权 的操作可以阅读我的另一篇文章 https://blog.csdn.net/qq_35430000/article/details/79299529

微信授权我是 在index.vue做的授权,是一个空白页,因为授权需要回调所以这个页面会刷新两次,当我们授权成功进入主页面后,点击返回键或者点击手机的物理返回键,因为浏览器history机制,按物理返回或者返回肯定是会进入这个授权页面的,而此时code已经使用过,会报code错误,而且这个是空白页,多次点击也并不能回到微信的消息列表页,体验极差。。。

我的做法是引入微信的js sdk,使用vue-router 路由导航beforeEach 中的 to(即将到达的页面)和from(当前页面)来做判断,假如to是授权页,from是授权成功后首次进入的页面,在from页面点击返回 ,路由监听到这一满足条件就 调用 微信 wx.closeWindow() 方法即可关闭当前页面回到消息列表页,不是使用vue来开发的项目原理大概也是类似的。

具体代码如下:

①引入微信sdk,npm install 相对应的包即可。

②在路由配置页面配置路由守卫。

router.beforeEach((to, from, next) => {
    // 特殊处理授权成功后的user个人中心页面点击返回退出到微信消息列表页
    let mark = to.fullPath.indexOf('code')
    if (mark !== -1 && from.fullPath === '/user') {
        wx.closeWindow()
    }
})

因为微信授权页授权成功必会在url中带 code,所有我是通过判断路径中是否有 code认定是授权页(可能这种方式)不妥,但能确认to和from两个条件满足即可。

卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云

  • 1
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值