本文介紹了Vue微信公眾號開發(fā)踩坑全記錄，分享給大家，也給自己留個筆記。

需求

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

現(xiàn)狀及難點

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

解決方案

授權登錄

授權流程如下：

詳細說明：

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

踩坑記錄：

以下是一個錯誤授權方案

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

JS-SDK簽名

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

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

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

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

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

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

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

這種路由中帶了參數(shù)的url是沒法簽名校驗成功的！
這種路由中帶了參數(shù)的url是沒法簽名校驗成功的！
這種路由中帶了參數(shù)的url是沒法簽名校驗成功的！
重要的事情得說三遍啊

Coding

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

微信授權登錄

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

// ... other code

router.beforeEach((to, from, next) => {
 if ((!VueCookie.get('user') && !store.state.userInfo)) {
  // 第一次訪問
  console.log('授權登錄')
  // 跳轉(zhuǎn)到微信授權頁面，微信授權地址通過服務端獲得
  axios.post('/api/login').then(res => {
   var data = res.data
   if (data.code === 100) {
    window.location.href = data.data
   }
  })
 } else if (!store.state.userInfo) {
  // 刷新頁面，獲取數(shù)據(jù)存入vuex
  axios.get('/api/currentuser').then(res => {
   if (res.data.code === 100) {
    store.dispatch('setUserInfo', res.data.data)
    next()
   }
  })
  console.log('cookie生效期內(nèi)登錄')
  next()
 } else {
  // 已經(jīng)登錄
  console.log('已登錄')
  next()
 }
})

//... other code

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論