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

简单介绍h5微信授权流程

• 1、入口页跳转到我们自己创建的空白授权页
• 2、在空白授权页判断url上是否包含code，没有code拼接微信授权链接，通过location.href进行跳转

location.href = open.weixin.qq.com/connect/oau…

• 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](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() 关闭整个网页窗口即可完成应用退出。