Vue微信公眾號開發踩坑記錄

需求

• 微信授權登錄（基于公眾號的登錄方案）
• 接入JS-SDK實現圖片上傳，分享等功能

現狀及難點

• 采用的Vue框架，前后端分離模式（vue工程僅作為客戶端），用戶通過域名訪問的是客戶端，但是微信授權中涉及簽名和token校驗依賴服務端
• JS-SDK需要向服務端獲取簽名，且獲取簽名中需要的參數包括所在頁面的url，但由于單頁應用的路由特殊，其中涉及到IOS和android微信客戶端瀏覽器內核的差異性導致的兼容問題

解決方案

授權登錄

授權流程如下：

詳細說明：

1. 用戶訪問網站主域名
2. vue客戶端(domain/)接收請求，在路由解析前判斷用戶是否登錄（比如檢查cookie）；
3. 如果沒有登錄，則通過api獲取微信授權地址，獲取后跳轉到微信服務端授權頁面；
4. 用戶確認授權，微信服務器發起回調請求，這時需要回調到服務器端（domain/api/xxx）
5. 服務器端保存用戶信息，進行注冊登錄操作（記錄cookie），重定向到vue客戶端（domain/）
6. 重復第一步，授權登錄成功

踩坑記錄：

以下是一個錯誤授權方案

這個方案為什么錯誤呢？其實如果只實現授權登錄到話，這個方案是可以的，而且也很清晰，vue客戶端單方面在服務器和微信服務器之間進行通信，微信服務器不能直接和服務器通信。這種方案的坑在于當微信授權回調時會攜帶一個code參數，該參數會污染vue路由導致ios上進行JS-SDK簽名時失敗（后續會具體描述這個問題）

JS-SDK簽名

對于簽名，官方是這么說的

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用

vue中路由有history和hash兩種模式；在history模式下，理想的設計方案是，當進入到需要用到JS-SDK組件時，獲取以下當前url（也就是通過 location.href.split(‘#’)[0]獲得到的地址）傳遞到服務端進行簽名，應該就沒問題了，但是 IOS獲取的url并不是調用微信js的時候所在頁面的地址，而是進入到網站第一個頁面的地址。

網上查詢到一個方案是針對ios設備進入頁面時先將當前url記錄下來，到授權頁面時將記錄的url傳遞給服務端進行簽名。該方案經實踐是可行的，媽媽再也不用擔心我的網址很丑很難看啦。

另外一個方案就是使用hash模式，這種模式下，url永遠都只是主域名地址，省去了傳遞url的煩惱，也沒必要處理兼容，所以如果不建議路由中有 # 的話，該方案應該是首選方案。

這里還有一個深坑，那就是如果授權方案采用了上述中的vue客戶端處理回調的方式，那么ios將永遠無法簽名成功，為什么呢，因為這種方案路由通常是這樣子的:

http://domain.com/?code=xxxxxx&stat=#/xxx

這種路由中帶了參數的url是沒法簽名校驗成功的！

這種路由中帶了參數的url是沒法簽名校驗成功的！

這種路由中帶了參數的url是沒法簽名校驗成功的！

重要的事情得說三遍啊

Coding

任何不上代碼的吹逼都是耍流氓，這里筆者分享下在vue中具體怎么coding的。

微信授權登錄

筆者在項目中使用的vue-router進行路由控制，使用了vuex記錄用戶登錄信息，但是由于vuex中存儲的內容在頁面刷新后會丟失，所以服務端同時也寫了用戶登錄狀態到cookie中，vue中需要通過這兩個條件進行登錄判斷，不多BB，直接看代碼吧

// ... other code

router.beforeEach((to, from, next) => {
  if ((!VueCookie.get('user') && !store.state.userInfo)) {
    // 第一次訪問
    console.log('授權登錄')
    // 跳轉到微信授權頁面，微信授權地址通過服務端獲得
    axios.post('/api/login').then(res => {
      var data = res.data
      if (data.code === 100) {
        window.location.href = data.data
      }
    })
  } else if (!store.state.userInfo) {
    // 刷新頁面，獲取數據存入vuex
    axios.get('/api/currentuser').then(res => {
      if (res.data.code === 100) {
        store.dispatch('setUserInfo', res.data.data)
        next()
      }
    })
    console.log('cookie生效期內登錄')
    next()
  } else {
    // 已經登錄
    console.log('已登錄')
    next()
  }
})
//... other code</code></pre> 
  
history模式下的JS-SDK簽名
 
  
在入口文件中將當前url存入vuex
 
  
// ... other code
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  // 處理jssdk簽名,兼容history模式
  if (!store.state.url) {
    store.commit('setUrl', document.URL)
  }
  // ... other code
 
  
在需要獲取簽名的組件中獲取并進行配置
 
  
// ... other code
created () {
      var sef = this
      var url = ''
      // 判斷是否是ios微信瀏覽器
      if (window.__wxjs_is_wkwebview === true) {
        url = this.$store.state.url.split('#')[0]
      } else {
        url = window.location.href.split('#')[0]
      }
      this.$http.get('/api/jssdk?url=' + url).then(function (res) {
        sef.lists = res.data.data
        hmTools.wechact(sef.lists, sef) //js-sdk配置
      })
    }
// ...other code
 
  
 
 
  
來自：https://segmentfault.com/a/1190000010753247