引言
最近做一個微信webapp單頁應用項目，項目只需要獲取用戶的openid；為了更好的用戶體驗，整個過程讓用戶無感知，我們采用靜默授權的方式來獲取openid；具體可以翻看微信開發者文檔--微信網頁授權部分。
按照微信開發文檔的步驟操作，很容易的就實現了獲取openid的功能。到此你可能心中竊喜，so easy！如果你認為實現到此結束，那么很可能qa就會找上來，並且還現場給你演示問題來源現場（如下圖）：
在授權后重定向的回調頁面(例如上面例子的下單頁面)點擊返回，怎么點擊都不能返回到正確的頁面，一直在這里跳轉死循環了，到底該如何解決呢？下面就給出一種實踐方案。
跳轉死循環的原因
跳轉死循環的原因，稍加分析就能知道原因。項目中需要openid的頁面會靜默獲取openid（一般建議在項目入口文件獲取，然后緩存起來供其他頁面使用）；
比方說上面在下單頁需要openid，這個時候當進入該頁面時，就會重定向到微信獲取授權頁面：
https://open.weixin.qq.com/connect/oauth2/authorizeappid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
授權成功后會重定向到回調鏈接地址（上面例子中的下單頁），並會帶上code參數。我們在實現時是使用location.replace將下單頁歷史記錄替換為微信授權頁面。
總的來說，一次授權瀏覽器歷史記錄增加了1條記錄。那么授權成功后瀏覽器歷史記錄到底是怎么樣的呢？
理論上，上述過程瀏覽器歷史記錄應該是下圖所示的結果：
但是經過在微信里面測試，發現並不是這樣的，而是如下圖所示，懷疑是微信瀏覽器做了特殊處理。
這樣在授權成功后的重定向頁面點擊微信返回按鈕，即上例中從下單頁點擊返回，會返回到不帶code參數的下單頁也就是第一次進入時的下單頁；然而頁面不做特殊處理的話，它會跳轉到微信授權頁面再次進行授權后又會重定向到指定的回調頁面即下單頁，這樣就會造成跳轉死循環的問題，表象上一直停留在下單頁，無法進入項目指定的其他頁面。
解決方案
通過對整個過程的分析，我們可以知道如果不做任何處理，只是在下單頁獲取授權后url中攜帶的code參數，就會出現這種死循環的問題，那么能否在授權頁面指定的redirect_uri頁面(本例的下單頁)做一下處理呢，滿足某個條件就不在跳往到微信授權頁？
答案當然是可以的，一種實現方案可以是這樣的：
-
指定一個用於授權成功后的回調鏈接redirect url，域名得和前端業務域名一致，並且整個鏈接是需要在微信開發者后台配置的。
-
在進入步驟1指定的頁面后，前端需要獲取url參數code和sessionStorage中的code值，根據二者code是否均有值來判斷是否需要重定向的微信授權頁面
-
在步驟2中兩種情況下的code值都為空時，前端使用location.replace(url)方法來跳轉到微信授權頁面，授權成功后跳轉到步驟1指定的回調頁面。此時瀏覽器歷史記錄只增加了1條，即微信授權頁面歷史記錄
-
在步驟2設置的回調頁面中，若url的code參數有值且sessionStorage獲取的code值為null時，將url的code參數值存到sessionStorage中，然后history.back()
-
在history.back()執行后，就又回到授權鏈接跳轉之前的那個頁面，即進入未跳轉前的下單頁。
-
再次點擊微信返回按鈕，就可以正常返回了
具體的代碼實現部分如下：
const params = getQueryParams()
const code = sessionStorage.getItem('code')
if (!params.code && !code) {
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${yourAppId}&redirect_uri=${encodeURIComponent(location.href)}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`
window.location.replace(url)
} else if(!code){
sessionStorage.setItem('code', params.code)
history.back()
}