最近項目有個需求是企業(yè)微信掃碼登錄蛙埂，看過官方文檔后感覺挺簡單的知残，然而還是踩了好多坑廓俭，折騰了好久云石。。
在此記錄下遇到的坑研乒。
URI的編碼
官方文檔的參數(shù)說明是這樣的
image.png
其中特別說明 'redirect_uri' 是需要進行Urlcode汹忠，我就天真地用window.encodeURI來編碼，當時的我并不知道還有window.encodeURIComponent，更別說兩者的區(qū)別了宽菜，因此就引發(fā)了一系列的問題谣膳！
- 掃碼成功后的重定向地址
因為用戶登錄后的一系列操作，比如獲取token铅乡、獲取用戶權(quán)限菜單等继谚，都是在Login組件里進行的，因此我希望重定向的地址也是/login路由阵幸。
然而花履，重定向地址是: http://www.xxx.com/?code=xxx&state=xxx&appid=xxx#/login
重點是querystring的位置，當時一直很納悶挚赊，后來查閱了URI的標準诡壁，發(fā)現(xiàn)其標準規(guī)定querystring就是在錨點('#')之前的！
然后荠割，這個url地址是一個空白頁妹卿，也就是說未匹配到任何路由？ - window.location.href重定向的問題
由于加了一級路由后重定向到空白頁蔑鹦，因此我以為redirect_uri參數(shù)只識別域名(比較天真)夺克，就去掉了路由，將重定向地址變?yōu)? http://www.xxx.com
然后項目中路由的配置為 '/' 會被 redirect 到 '/index'嚎朽，然后/index路由對應的頁面有n個請求铺纽，axios攔截器又會根據(jù)是否登錄進行攔截，若未登錄火鼻，則用window.location.href重定向到http://www.xxx.com/#/login
按道理邏輯是這樣室囊，但結(jié)果是axios攔截會失敗，也就是后面的請求的還會繼續(xù)進行魁索，并且window.location.href = 'http://www.xxx.com/#/login' 這句代碼也執(zhí)行了，最終導致的結(jié)果就是頁面會一直刷新且彈出錯誤警告盼铁。
但是粗蔚，我將querystring加上，也就是 window.location.href = 'http://www.xxx.com/?code=xxx&state=xxx&appid=xxx#/login'饶火，也就就能正常跳轉(zhuǎn)Ｅ艨亍（至今還不清楚其中的原因，還是太菜了）
最后肤寝，將encodeURI改成了encodeURICompoent当辐，一切就正常了!
重定向的地址變成了: http://www.xxx.com/#/login?code=xxx&state=xxx&appid=xxx
注意，querystring加在了路由的后面鲤看，也就是此時的querystring的并非URI標準中的querystring缘揪，而是vue-router中的querystring。而改變路由的querystring，是不會刷新頁面的找筝，只會刷新組件蹈垢，因此，只要在watch中監(jiān)聽this.$route.query的變化袖裕，加上一些邏輯判斷即可曹抬！
watch: {
['$route.query'] (val) {
if (Object.keys(val).length) {
this.query = val;
this.qrcodeLogin();
}
}
}
