最近有用戶反饋，小程序登陸有問題

小程序成功登陸后，安卓用戶預(yù)約操作時，偶爾會出現(xiàn)登陸異常情況。

登陸失敗現(xiàn)象極其詭異，問題難以復(fù)現(xiàn)。

1 用戶10秒前剛登陸，用戶后續(xù)操作馬上提示“登陸異常”

2 部分安卓用戶在登陸后，在后續(xù)操作提示“登陸異?！?，這種現(xiàn)象是偶然發(fā)生的，安卓用戶出現(xiàn)登陸異常概率大概是10分之1。

2 蘋果用戶從未沒有出現(xiàn)”登陸異?！艾F(xiàn)象。

 2 登陸實現(xiàn)方案

在介紹問題前，本文先簡單描述下本文應(yīng)用登陸實現(xiàn)方案。

本文的小程序應(yīng)用是單獨使用Cookie來維護登陸狀態(tài)，登陸并未使用小程序的sessionKey來維護后臺登陸狀態(tài)。

后端Cookie校驗用戶登陸狀態(tài)

為什么不使用小程序SessionKey維護登陸狀態(tài)？

1 老應(yīng)用有單獨Cookie登陸方式。

2 后臺支持多平臺登陸（比如小程序、h5網(wǎng)頁等），不完全依賴小程序SessionKey完成登陸 。

Shiro控制用戶權(quán)限

1 獲取微信小程序code值

2 code值以及appId換取用戶openId

3 openId快捷登陸

4 小程序保存登陸Cookie

5 小程序攜帶Cookie請求后端應(yīng)用

6 后端根據(jù)前端的Cookie校驗用戶的登陸情況

可惜小程序不支持Cookie，（瀏覽器一般會保存用戶Cookie，方便后續(xù)瀏覽網(wǎng)頁使用）

如何解決小程序支持Cookie登陸？

以下是網(wǎng)上常見的Cookie登陸解決方式。

// 登錄
      wx.login({
        success: function (res) {
          log.info(res)
          //獲取登錄的臨時憑證
          var code = res.code;
          //調(diào)用后端，獲取微信的session_key,secret
          wx.request({
            url: domain + '/user/wxLogin',
            header: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            method: "POST",
            data: util.json2Form({
              code: code,
              appId: that.globalData.appId
            }),
            success: function (result) {
              // cookie存儲起來
              var cookie = result.header['Set-Cookie']
              wx.setStorageSync('cookie', cookie)
              
            },
            fail: function (res) {
              
            }
          })
        }
      })
    })

wx.request從res.header['Set-Cookie']中獲取cookie信息，并使用wx.setStoargeSync將cookie信息同步寫入小程序私有存儲空間中

wx.request({
      url: domain + '/api/xxx/xxx',
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        'cookie': wx.getStorageSync("cookie")
      },
      method: 'POST',
      data: util.json2Form({ xx1: xx1, xx2: xx2 }),
      success: function (result) {
        
      },
      fail: function (res) {
        log.info("服務(wù)器異常:" + res)
        wx.showToast({
          title: '服務(wù)器異常',
          icon: 'none',
          duration: 2000
        })
      }
    })

wx.getStorageSync同步將cookie從小程序中取出，小程序攜帶該cookie請求后臺服務(wù)，完成用戶登陸狀態(tài)校驗。

 3、排查過程

問題不可怕，可怕的是不能穩(wěn)定地復(fù)現(xiàn)case。本人平時使用iphone手機，重復(fù)用戶的操作，基本復(fù)現(xiàn)不出來“登陸異?！钡默F(xiàn)象，只能在服務(wù)后臺以及小程序前端瘋狂埋點打日志。

1）后臺日志排查，用戶Cookie無效

從后臺日志可以看出，用戶成功登陸，但是用戶沒有在后續(xù)的請求使用用有效cookie去請求后臺服務(wù)，后臺直接拒絕服務(wù)。

2）微信小程序日志排查，安卓用戶有問題

通過后臺和小程序日志發(fā)現(xiàn)，出現(xiàn)“登陸異常”的用戶基本是安卓用戶，蘋果用戶基本沒有這個問題。

 3）現(xiàn)象復(fù)現(xiàn)，安卓手機提示異常

目標鎖定安卓手機，直接找了臺安卓手機，重復(fù)登陸、預(yù)約操作，大概反復(fù)操作10次，終于復(fù)現(xiàn)了“登陸異?！钡默F(xiàn)象，喜大普奔啊。

 4）微信小程序埋點輸出日志，Cookie存取正常

起初懷疑wx.setStoargeSync有bug，未將cookie成功寫入小程序。

驗證方式：將res.header['Set-Cookie']、wx.getStorageSync日志輸出。

如果res.header['Set-Cookie']輸出日志為空，則定位是后端服務(wù)問題，未將cookie攜帶返回。

如果res.header['Set-Cookie']輸出日志不為空，wx.getStorageSync('cookie')輸出日志為空，則定位setStorageSync寫入有bug

但是最終現(xiàn)象res.header['Set-Cookie']、wx.getStorageSync('cookie')輸出日志均不為空，排查思路中斷了。

5）正常與異常Cookie對比，Cookie順序不對

對比正常請求的cookie與異常請求的cookie

發(fā)現(xiàn)cookie的順序不一樣

后臺shiro做權(quán)限控制，返回3個Set-Cookie值，蘋果用戶的請求基本是以JESSIONID開頭，而有問題的安卓用戶請求是以remeberMe=Delete開關(guān)

 6）異常Cookie排查，Cookie拼接不正確

將登陸異常請求的cookie按照正常請求cookie的順序調(diào)整了下， 用戶請求后端可以成功登陸。

使用錯誤順序cookie請求后端，后端解析cookie并未獲取到JESSIONID。

后端是如何解析Cookie，根據(jù)分號";"分割Cookie字符串，由于錯誤順序Cookie是使用逗號做分割符，后端將Expires與JESSIONID視為一個整體，所以無法解析出JESSIONID

4、為什么蘋果手機、部分安卓手機沒有問題？

沒有問題的Cookie，JESSIONID可以被后臺正確分割出來。蘋果手機獲取Set-Cookie順序是嚴格一致的，安卓手機Set-Cookie順序是隨機的。

 

5、問題原因

騰訊小程序Bug，Set-Cookie逗號拼接方式有問題

微信開放社區(qū)也有人反饋過這個bug，但是以微信社區(qū)人員解決問題的稀爛態(tài)度，至今未解決該bug。

解決bug只能靠自己去兼容這個bug

 

6、解決方法

當返回結(jié)果的header有多個Set-Cookier時，微信小程序獲取res.header['Set-Cookie']，已經(jīng)是將Set-Cookie用逗號拼接好的字符串。

如果使用簡單的逗號分割，Expires時間也含有逗號，Cookie結(jié)果是錯誤的。

Cookie正則分割，分號重新拼接

見示例

簡單的逗號無法分割，可以使用正則表達式去分割Cookie字符串，

需要被分割的逗號，后繼字符串是含有=

 

7、標準答案

微信小程序使用Cookie登陸標準答案

// 登錄
      wx.login({
        success: function (res) {
          log.info(res)
          //獲取登錄的臨時憑證
          var code = res.code;
          //調(diào)用后端，獲取微信的session_key,secret
          wx.request({
            url: domain + '/user/wxLogin',
            header: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            method: "POST",
            data: util.json2Form({
              code: code,
              appId: that.globalData.appId
            }),
            success: function (result) {
              // Set-Cookie字符串獲取
              var cookie = result.header['Set-Cookie']
              // 字符串分割成數(shù)組
              var cookieArray = cookie.split(/,(?=[^,]*=)/)
              // 分號拼接數(shù)組
              var newCookie = cookieArray.join(';')
              // 存儲拼接后的cookie
              try {
                wx.setStorageSync('cookie', newCookie)
              } catch (error) {
                log.error('setStorageSync cookie fail')
              }
              
            },
            fail: function (res) {
              
            }
          })
        }
      })