欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

簡單介紹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() 關閉整個網頁窗口即可完成應用退出。