微信公众号开发网页登录授权

Question

大家好，我现在遇到了关于网页登录授权的问题。
我的h5页面是vue写的，后台是WebAPi页面。我当时的思路是：当用户进入首页时，先判断是否有code，如果没有就跳转微信的登录授权页面。当用户点击授权后再有微信跳转回来。

跳转到微信授权页面地址：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb151e12a34cc0c35&redirect_uri=http%253a%252f%252fwm.52xdz.top%252f%2523%252f&response_type=code&scope=snsapi_userinfo&state=20180121101028814&uin=MjYzNDA1NDgw&key=c705caf0549e8234ec1a024281f7839a03bf5e2e70a069bd1bdca0a402ab0e2cc5a3042d810ccace4e89af9bb494dec8&pass_ticket=a7nze2OM+L+VnfduTlbTFfQuJmPoFXFX2kDFO9LGonhwiiOXR46Yr7kn4r3wXA+XV7jAnOmna+Ng3fAVgHlLnA==

我的首页面地址时：http：//xxxx.com,由于是vue写的页面所以它加载的首页地址是http：//xxxx.com/#/

实际微信返回的回掉地址是：http：//xxxx.com/?code=xxx&state=xxx#/

由于生成这样的地址后，我的vue首页不能获取到code值，所以就出现了类似于死循环的那样，调到微信等授权，再调回首页，再跳到微信等授权~~~~~~·

Answer 1

需要后台配合的。
微信回调地址到http://xxx.com/site/redirect?code=xxx&state=xxx。

然后site/redirect这个路由再跳转到http://xxx.com/#/?code=xxx&state=xxx

我现在一个移动端的站就是这么处理的，没有其他坑，改动也小

Answer 2

这个由于是微信的机制所以你没办法处理，只能考虑自己本地修改做兼容，或者写一个中间页面，由中间页面自行做跳转，例如你定义一个

http://xxx.com/wechat/redirect.html?redirect_url=http:%2F%2Fxxxx.com%2F%23%2F

为微信的跳转返回页面。

Answer 3

根据url取出code不会？

Answer 4

vue是单页面开发，应该是前后端分离。

例子：

vue 首页 http://www.ceshi.com/#vueindex

授权获取 连接 http://www.ceshi.com/
微信回调 http://www.ceshi.com?code=xxxx

解决方案

微信授权控制器中，http://www.ceshi.com?return_url=vueindex&code=xxxx
根据 return_url中的内容，跳转到相应的前端页面地址

你后续还会遇到其它问题:请参考vue+微信公众号