日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

簡單介紹h5微信授權(quán)流程

1. 入口頁跳轉(zhuǎn)到我們自己創(chuàng)建的空白授權(quán)頁

2. 在空白授權(quán)頁判斷url上是否包含code，沒有code拼接微信授權(quán)鏈接，通過location.href進行跳轉(zhuǎn)location.href = open.weixin.qq.com/connect/oau…

3. 微信重定向到我們自己創(chuàng)建的空白授權(quán)頁，空白授權(quán)頁重新判斷url上是否包含code，包含code，傳遞code給后臺進行登錄

4. 登錄成功，保存用戶信息，token，跳轉(zhuǎn)到子頁面

從子頁面返回到入口頁形成的循環(huán)授權(quán)登錄

完成了入口頁面到子頁面的跳轉(zhuǎn)，現(xiàn)在點擊返回按鈕或者通過手勢操作滑動屏幕回到入口頁面，頁面流轉(zhuǎn)過程如下圖所示：（這里有個前置知識：返回到上級頁面微信內(nèi)置瀏覽器會觸發(fā)上級頁面重新加載。）

是否可以通過location.replace解決頁面返回出現(xiàn)循環(huán)授權(quán)的問題？

location.replace() 方法可以用一個新文檔取代當(dāng)前文檔，如在 A頁面中通過location.href跳轉(zhuǎn)到B頁面，我們可以通過瀏覽器后退按鈕返回到A頁面。若使用location.replace(B.html)跳轉(zhuǎn)到B頁面，則A頁面會被B頁面替換掉，用戶無法通過瀏覽器返回按鈕進行返回。

了解了location.replace()的作用，我們現(xiàn)在將之前的授權(quán)流程通過location.replace來改造一下。

通過location.replace替換當(dāng)前頁的方法，頁面棧中最后只剩下了入口頁面與子頁面，現(xiàn)在點擊返回按鈕自然就回到了入口頁面。不過，真的是這樣嗎？: (

微信瀏覽器中的location.replace

如果通過location.replace就能解決問題，微信開放社區(qū)也不會有同學(xué)從16年到現(xiàn)在都在咨詢?nèi)绾谓鉀Q返回循環(huán)授權(quán)問題。這里直接告訴大家，location.replace在微信瀏覽器中不生效，而且ios，安卓，微信開發(fā)者工具里使用location.replace的表現(xiàn)不一致：

• ios真機：location.replace完全不起作用，效果等同于location.href ， 頁面棧中會存在一個無code的授權(quán)頁，有code的授權(quán)頁

• 安卓真機與微信開發(fā)者工具：頁面棧中會存在一個無code的授權(quán)頁

解決方案

了解了整個問題形成的原因，以及使用location.replace之后頁面棧中的狀況，再來解決返回循環(huán)授權(quán)這一問題就很簡單了。

在有code的頁面調(diào)用登錄接口成功之后，我們向sessionStorage中存一個臨時值再跳轉(zhuǎn)到子頁面，然后修改空白授權(quán)頁的初始化邏輯即可：

// 偽代碼
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，跳轉(zhuǎn)微信授權(quán)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，調(diào)用登錄接口
  $.ajax(login_api, {
    data: {
      code
    }
  }).then(res = >{
    // 儲存臨時值
    sessionStorage.setItem('key', code)
    // 跳轉(zhuǎn)到子頁面
    location.replace(子頁面地址)
    ])
  }
}

注：空白授權(quán)頁為應(yīng)用的入口，頁面返回即關(guān)閉應(yīng)用。我們可以判斷臨時值是否存在，存在則執(zhí)行 wx.closeWindow() 關(guān)閉整個網(wǎng)頁窗口即可完成應(yīng)用退出。

?

作者：小草先森tyro
鏈接：https://juejin.cn/post/6969876122871791623
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。