angular.js - Angular开发的单页面应用，如何正确地实现在微信里的网页授权和调用js sdk

问题描述

一个微信公众号的外链网页，使用angular做成了单页应用，目前碰到了 微信网页授权 和 调用 js sdk 的问题

据我所目前所知，调用了微信授权后，单页应用的入口 url 会长成这样（假定域名为:example.com）：

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

或者(启用了html5 mode) 长成这样：

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

?code=aaabbb, 是微信授权后重定向时填充的，有了这个才能进一步去获取用户信息，参见 微信开发文档 > 获取code

至此，还不会出现问题

由于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，但问题是每次进入应用，会刷新两次,这样用户体验极差，而且有强迫症的我也接受不了。

请教各位给个靠谱的方案

问题解答

纯前端是没法实现了，只能将授权回调页面域名配置到后台服务器，再由后台重定向

可以用过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值

纯前端没法实现，恰巧最近我做过类似的项目，也是用的 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,...}

楼主最终还是location.href='https://www.haobala.com/wenda/13892.html'?么

这个应该怎么解决了,楼主发下答案来解决一下,我准备也用vue开发微信