微信公众号采坑之授权config

 

坑：

• 采用的Vue框架，前后端分离模式（vue工程仅作为客户端），用户通过域名访问的是客户端，但是微信授权中涉及签名和token校验依赖服务端
• JS-SDK需要向服务端获取签名，且获取签名中需要的参数包括所在页面的url，但由于单页应用的路由特殊，其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

JS-SDK签名（wx.config）

对于签名，官方是这么说的

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用

vue中路由有history和hash两种模式；在history模式下，理想的设计方案是，当进入到需要用到JS-SDK组件时，获取以下当前url（也就是通过 location.href.split(‘#’)[0]获得到的地址）传递到服务端进行签名，应该就没问题了，但是IOS获取的url并不是调用微信js的时候所在页面的地址，而是进入到网站第一个页面的地址。

网上查询到一个方案是针对ios设备进入页面时先将当前url记录下来，到授权页面时将记录的url传递给服务端进行签名。该方案经实践是可行的，妈妈再也不用担心我的网址很丑很难看啦。

另外一个方案就是使用hash模式，这种模式下，url永远都只是主域名地址，省去了传递url的烦恼，也没必要处理兼容，所以如果不建议路由中有#的话，该方案应该是首选方案。

这里还有一个深坑，那就是如果授权方案采用了上述中的vue客户端处理回调的方式，那么ios将永远无法签名成功，为什么呢，因为这种方案路由通常是这样子的:

http://domain.com/?code=xxxxxx&stat=#/xxx

这种路由中带了参数的url是没法签名校验成功的！
这种路由中带了参数的url是没法签名校验成功的！
这种路由中带了参数的url是没法签名校验成功的！
重要的事情得说三遍啊

经过博主千辛万苦的搜索，路由在history下解决方案如下：

问题：

在微信授权之后，需要调用微信的jsSDK，这样根据刚才上面说的需要信息config配置之后才能吊起微信提供的服务，

wx的config如下

其中的签名有签名算法，看官网！算法如下

问题源头：

因为用的是vue单页spa，在单页spa方面vue的history在iOS中页面地址会始终为第一次进入的链接地址。
而这里的授权会有一个获取openId的过程，所以就会有在iOS中授权失败的问题。

解决思路：

将授权页的地址链接利用vuex保存下来，判断机型，
如果是iOS机型就将授权页的链接参数发送给微信权限校验接口，最后返回的结果是成功。

 解决方法：

1、路由记录第一次进入时的路径

 2、授权页面进行保存路径第一次进入ios的路径

3、调用wx.config进行配置，具体看官网算法，下面是url需兼容部分！

let url = /(Android)/i.test(navigator.userAgent) ? 
location.href.split('#')[0] : 
process.env.BASE_URL + process.env.AUTHO_URI + '?code=' + tools.getStorage('code') + '&state=' + encodeURIComponent(tools.getStorage('state'));

4、调用wx的各种jsSDK即可顺心开发了 

采坑不易，自由转载，请注明出处！！！