H5微信授权登录后点击返回出现循环登录无法退出问题

简单介绍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&state=STATE#wechat_redirect

3、微信重定向到我们自己创建的空白授权页，空白授权页重新判断url上是否包含code，包含code，传递code给后台进行登录
4、登录成功，保存用户信息，token，跳转到子页面

从子页面返回到入口页形成的循环授权登录
完成了入口页面到子页面的跳转，现在点击返回按钮或者通过手势操作滑动屏幕回到入口页面，页面流转过程如下图所示：（这里有个前置知识：返回到上级页面微信内置浏览器会触发上级页面重新加载。）

是否可以通过location.replace解决页面返回出现循环授权的问题？
location.replace() 方法可以用一个新文档取代当前文档，如在 A页面中通过location.href跳转到B页面，我们可以通过浏览器后退按钮返回到A页面。若使用location.replace(B.html)跳转到B页面，则A页面会被B页面替换掉，用户无法通过浏览器返回按钮进行返回。

了解了location.replace()的作用，我们现在将之前的授权流程通过location.replace来改造一下。

通过location.replace替换当前页的方法，页面栈中最后只剩下了入口页面与子页面，现在点击返回按钮自然就回到了入口页面。不过，真的是这样吗？: (

微信浏览器中的location.replace
如果通过location.replace就能解决问题，微信开放社区也不会有同学从16年到现在都在咨询如何解决返回循环授权问题。这里直接告诉大家，location.replace在微信浏览器中不生效，而且ios，安卓，微信开发者工具里使用location.replace的表现不一致：

ios真机：location.replace完全不起作用，效果等同于location.href ，页面栈中会存在一个无code的授权页，有code的授权页

安卓真机与微信开发者工具：页面栈中会存在一个无code的授权页

解决方案
了解了整个问题形成的原因，以及使用location.replace之后页面栈中的状况，再来解决返回循环授权这一问题就很简单了。

在有code的页面调用登录接口成功之后，我们向sessionStorage中存一个临时值再跳转到子页面，然后修改空白授权页的初始化逻辑即可：

// 伪代码
code = getSearchParams(‘code’) // 获取url search中的code
临时值 = sessionStorage.getItem(‘key’)

if (临时值) {
// 进行返回逻辑
sessionStorage.removeItem(‘key’)
if (ios) {
history.go(-2)
}else {
history.go(-1)
}
}else {
if (!code) {
// 没有code，跳转微信授权oauth地址
location.replace(https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect)
}else {
// 有code，调用登录接口
$.ajax(login_api, {
data: {
code
}
}).then(res => {
// 储存临时值
sessionStorage.setItem(‘key’, code)
// 跳转到子页面
location.replace(子页面地址)
])
}
}

注：空白授权页为应用的入口，页面返回即关闭应用。我们可以判断临时值是否存在，存在则执行 wx.closeWindow() 关闭整个网页窗口即可完成应用退出。

H5微信授权登录后点击返回出现循环登录无法退出问题相关推荐

H5微信支付完成后点击完成，H5页面直接关闭
以为点击完成会返回到发起支付的页面,但是事实是整个H5页面直接关闭原因是微信支付将对JSAPI支付场景的"支付后跳转指定页面"功能进行升级 ,服务商jsapi支付后回到商家页面的 ...
uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...
pc、h5微信授权登录
pc登录微信登录(通过后端返回一个qrcode重定向到页面上,进行扫码授权,获取code即可,再根据code获取登录信息) h5登录微信授权登录:(支持微信浏览器,其它浏览器无法拉起微信的授权): ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
flutter web h5微信授权与支付
flutter web h5微信授权与支付最近一直在弄flutter web h5微信授权与支付,目前已经调通,方案可行,目前发现的网上这块好像还没人弄过,特此记录.(注:只涉及flutter h5 ...
H5微信授权登录弹窗提示
如下图:用户授权登录前,先通过静默授权,拿到token,展示部分信息,用户通过授权后拿到头像昵称,该弹窗让用户有个比较好的体验请求过程如下: 1.首次在没有UID.code的情况下:静默授权(&am ...
android微信支付黑屏,【报Bug】本地打包的APP成功调起微信支付后点击返回APP出现卡死黑屏...
详细问题描述(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 使用本地打包SDK进 ...
微信内置浏览器点击“返回”关闭窗口
场景:开发微信内的H5活动,需要进行微信授权,我们采用的是在一个静态页面(只有js,所以是个空白页面)内进行授权,授权后再跳转到活动主页. 客户需求:从活动主页返回时不显示这个授权页面(空白页面),直 ...
【H5微信授权】简单实现H5页面微信授权功能，微信开发者工具报错系统错误，错误码-1，undefined解决办法【详细】
前言最近写到了H5公众号,需要微信授权的功能. 这里记录一下授权的流程和踩了个坑图片授权代码执行后会跳转到授权的地方,没有授权的会有确认授权,授权过得会这样,直接自动登录,然后再跳转到中转页授 ...

H5微信授权登录后点击返回出现循环登录无法退出问题

H5微信授权登录后点击返回出现循环登录无法退出问题相关推荐

最新文章

热门文章