需求
- 微信授權(quán)登錄（基于公眾號的登錄方案）
- 接入JS-SDK實現(xiàn)圖片上傳，分享等功能
現(xiàn)狀及難點
- 采用的Vue框架同眯，前后端分離模式（vue工程僅作為客戶端）南蓬，用戶通過域名訪問的是客戶端调炬，但是微信授權(quán)中涉及簽名和token校驗依賴服務端
- JS-SDK需要向服務端獲取簽名语盈，且獲取簽名中需要的參數(shù)包括所在頁面的url，但由于單頁應用的路由特殊缰泡，其中涉及到iOS和android微信客戶端瀏覽器內(nèi)核的差異性導致的兼容問題
解決方案
授權(quán)登錄
本人將授權(quán)流程設(shè)計如下：
詳細說明：
- 用戶訪問網(wǎng)站主域名
- vue客戶端(domain/)接收請求刀荒，在路由解析前判斷用戶是否登錄（比如檢查cookie）；
- 如果沒有登錄棘钞，則通過api獲取微信授權(quán)地址缠借，獲取后跳轉(zhuǎn)到微信授權(quán)頁面；
- 用戶確認授權(quán)宜猜，微信服務器發(fā)起回調(diào)請求烈炭，這時回調(diào)到服務器端（domain/api/xxx）
- 服務器端保存用戶信息，進行注冊登錄操作（記錄cookie）宝恶，重定向到vue客戶端（domain/）
- 重復第一步，授權(quán)登錄成功
踩坑記錄：
以下是另一個授權(quán)方案
其實如果只實現(xiàn)授權(quán)登錄到話趴捅，這個方案是可以的垫毙，而且也很清晰，vue客戶端單方面在服務器和微信服務器之間進行通信拱绑，微信服務器不能直接和服務器通信综芥。這種方案的坑在于當微信授權(quán)回調(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模式下国觉，理想的設(shè)計方案是，當進入到需要用到JS-SDK組件時虾啦，獲取以下當前url（也就是通過 location.href.split(‘#’)[0]獲得到的地址）傳遞到服務端進行簽名麻诀，應該就沒問題了，但是IOS獲取的url并不是調(diào)用微信js的時候所在頁面的地址傲醉，而是進入到網(wǎng)站第一個頁面的地址蝇闭。
網(wǎng)上查詢到一個方案是針對ios設(shè)備進入頁面時先將當前url記錄下來，到授權(quán)頁面時將記錄的url傳遞給服務端進行簽名硬毕。該方案經(jīng)實踐是可行的呻引，媽媽再也不用擔心我的網(wǎng)址很丑很難看啦。
另外一個方案就是使用hash模式吐咳，這種模式下逻悠，url永遠都只是主域名地址，省去了傳遞url的煩惱挪丢，也沒必要處理兼容蹂风，所以如果不建議路由中有#的話，該方案應該是首選方案乾蓬。
這里還有一個深坑惠啄，那就是如果授權(quán)方案采用了上述中的vue客戶端處理回調(diào)的方式，那么ios將永遠無法簽名成功任内，為什么呢撵渡，因為這種方案路由通常是這樣子的:
http://domain.com/?code=xxxxxx&stat=#/xxx
這種路由中帶了參數(shù)的url是沒法簽名校驗成功的！
這種路由中帶了參數(shù)的url是沒法簽名校驗成功的死嗦！
這種路由中帶了參數(shù)的url是沒法簽名校驗成功的趋距！
重要的事情得說三遍啊
在我另外一篇文章中對js-sdk簽名做了更多的介紹，可以移步到vue微信公眾號開發(fā)踩坑記錄（2）
Coding
任何不上代碼的吹逼都是耍流氓越除，這里筆者分享下在vue中具體怎么coding的节腐。
微信授權(quán)登錄
筆者在項目中使用的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('授權(quán)登錄')
// 跳轉(zhuǎn)到微信授權(quán)頁面，微信授權(quá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
結(jié)語
由于本人文筆一般狈邑，思維的表達估計不到位城须，見解也是淺嘗輒止，所以如果看官您有疑惑的地方或者有歧義歡迎來和本人交流米苹。為了方便大家互相溝通糕伐，本人也創(chuàng)建了一個vue公眾號開發(fā)的qq群，歡迎加入和大家一起分享開發(fā)心得驱入，qq群號：130903919
