angular.js - Angular開發的單頁應用，如何正確實現在微信裡的網頁授權和調用js sdk

Question

一個微信公眾號的外鏈網頁，使用angular做成了單頁應用，目前碰到了 微信網頁授權 和 呼叫 js sdk 的問題

---

微信授權

據我所目前所知，調用了微信授權後，單頁應用的入口 url 會長成這樣（假定域名為:example.com）：

• ①http://example.com?code=aaabbb/#/home

或(啟用了html5 mode) 長成這樣：

• ②http://example.com/home?code=aaabbb

?code=aaabbb, 是微信授權後重定向時填充的，有了這個才能進一步去獲取用戶信息，參見 微信開發文檔 > 獲取code

至此，還不會出現問題

---

呼叫 js sdk

由於Android微信客戶端不支援pushState的H5新特性，url②廢棄(親測，確實不能通過驗證)，所以入口url是這樣：

• http://example.com?code=aaabbb/#/home

現在問題來了，如果沒有?code=aaabbb就能通過簽名驗證, 然後成功調用 js sdk，但實際情況是：如果需要授權?code=aaabbb必然存在，簽名驗證必定失敗。那麼到底如何做到授權和呼叫sdk均可用？ ？ ？

我目前的想法和做法是：微信授權重定向到http://example.com?code=aaabbb/#/home後，拿到code，然後再location.href = http://example .com/#/home。這樣做是能拿到用戶信息，並且成功調用sdk，但問題是每次進入應用，會刷新兩次,這樣用戶體驗極差，而且有強迫症的我也接受不了。

請教各位給個可靠的方案

---

Answer 1

純前端是沒辦法實現了，只能將授權回呼頁面網域配置到後台伺服器，再由後台重新導向

Answer 2

可以用過indexOf()取出code值

var url  = 'http://example.com?code=aaabbb/#/home';
var n = url.indexOf('code=')+5;
var m = url.indexOf('/#');
var code = url.substr(n, m-1)；

這樣就能拿到code值

Answer 3

純前端沒辦法實現，剛好最近我做過類似的項目，也是用的 angularjs，透過 angular-route.js 實作單頁程式。

在單一頁面程式（index.html）中透過ajax 呼叫後台接口，
如果成功返回：{status:true,...}
如果未登入失敗返回：{status:falst,next:'login',errmsg :'錯誤'}
其他錯誤回傳：{status:falst,next:'接下來的操作',errmsg:'錯誤'}

如果回傳狀態 result.status==false，result.next=='login':

case "login":
    $http.get($api.callback($api.login)).success(function(val){
        //通过后台返回 授权地址
        location.href = val.loginUrl;
    });
    return;

授權跳到wxlogin.php，驗證登入成功後，設定SESSION後，跳到單頁面程式(index.html)
接下來程式會繼續呼叫接口，因為已經登入了，所以回傳：{status:true ,...}

Answer 4

樓主最終還是location.href=""?麼

Answer 5

這個該怎麼解決了,樓主發下答案來解決一下,我準備也用vue開發微信