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

需求

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

現(xiàn)狀及難點(diǎn)

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

解決方案

授權(quán)登錄

授權(quán)流程如下：

詳細(xì)說明：

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

踩坑記錄：

以下是一個錯誤授權(quán)方案

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

JS-SDK簽名

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

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

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

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

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

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

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

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

Coding

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

微信授權(quán)登錄

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

// ... other code

router.beforeEach((to, from, next) => {
 if ((!VueCookie.get('user') && !store.state.userInfo)) {
  // 第一次訪問
  console.log('授權(quán)登錄')
  // 跳轉(zhuǎn)到微信授權(quán)頁面，微信授權(quán)地址通過服務(wù)端獲得
  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簽名

在入口文件中將當(dāng)前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

在需要獲取簽名的組件中獲取并進(jìn)行配置

// ... 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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論