1. 程式人生 > >解決微信授權成功後點擊按返回鍵出現空白頁和報錯的問題

解決微信授權成功後點擊按返回鍵出現空白頁和報錯的問題

微信授權 的操作可以閱讀我的另一篇文章 https://blog.csdn.net/qq_35430000/article/details/79299529

微信授權我是 在index.vue做的授權,是一個空白頁,因為授權需要回調所以這個頁面會重新整理兩次,當我們授權成功進入主頁面後,點選返回鍵或者點選手機的物理返回鍵,因為瀏覽器history機制,按物理返回或者返回肯定是會進入這個授權頁面的,而此時code已經使用過,會報code錯誤,而且這個是空白頁,多次點選也並不能回到微信的訊息列表頁,體驗極差。。。

我的做法是引入微信的js sdk,使用vue-router 路由導航beforeEach 中的 to(即將到達的頁面)和from(當前頁面)來做判斷,假如to是授權頁,from是授權成功後首次進入的頁面,在from頁面點選返回 ,路由監聽到這一滿足條件就 呼叫 微信 wx.closeWindow() 方法即可關閉當前頁面回到訊息列表頁,不是使用vue來開發的專案原理大概也是類似的。

具體程式碼如下:

①引入微信sdk,npm install 相對應的包即可。

②在路由配置頁面配置路由守衛。

router.beforeEach((to, from, next) => {
    // 特殊處理授權成功後的user個人中心頁面點選返回退出到微信訊息列表頁
    let mark = to.fullPath.indexOf('code')
    if (mark !== -1 && from.fullPath === '/user') {
        wx.closeWindow()
    }
})

因為微信授權頁授權成功必會在url中帶 code,所有我是通過判斷路徑中是否有 code認定是授權頁(可能這種方式)不妥,但能確認to和from兩個條件滿足即可。

卓越的雲端計算服務提供商,230萬+使用者正在享受阿里雲"穩定,安全,低成本"的產品服務,金牌服務:免費體驗,專業快速備案,7x24小時售後,伺服器只選阿里雲