最近正在做企业微信内的h5应用，有微信授权登录这么个需求。微信授权登录并不复杂，整个流程就是按照文档上描述的：在入口页构造网页授权链接，跳转到该链接，微信会重定向到入口页并将code拼在url上，前端将code给到后端，后端调用微信提供的服务端api即可完成登录。
// 构造如下链接来获取code参数
https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect\_uri=REDIRECT\_URI&response\_type=code&scope=snsapi\_base&state=STATE#wechat\_redirect
下面贴上代码，供没做过的同学参考：
onload(params) {
// 获取url上的code
let code = params.code
if (code) {
// code存在,调用接口将code传递给后端
} else {
// code 不存在，走微信网页授权逻辑
// 当前网页的url，供微信重定向使用
let loc_href = window.location.href;
// 对当前页面的url进行微信要求的urlEncode 处理
loc_href = encodeURIComponent(loc_href);
// 构造获取code的链接
let appId = '';
// 企业微信应用的CorpID 或者 微信公众号的appid
let wxUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect\_uri=${loc_href}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
// 跳转链接获取code
location.href = wxUrl; } }
代码写好后，在微信开发者工具进行调试，发现页面在微信授权链接与当前页面链接之间来回跳转，说明我们的代码一直在执行onload中的else逻辑，表示我们并没有拿到code。 因为之前做过微信网页授权登录，确信自己的代码逻辑是没有问题的。唯一区别是之前的项目做的是多页面应用，使用的是自己开源的框架fast-h5plus。
我将微信重定向之后的链接拷贝了出来，如下所示：
http://www.xxxx.com/index.html?code=xxxxxx/#/pages/weAuth/weAuth
将链接贴出来之后，发现微信并没有出现bug，它把code返给了我们，只是拼的位置有些不同
// 我们需要的
http://www.xxx.com/index.html#/pages/weAuth/weAuth?code=xxxxx
// 微信实际提供的
http://www.xxx.com/index.html?code=xxxx/#/pages/weAuth/weAuth
代码无法获取code说明code拼接在路由的#号之前uniapp是无法进行解析的，自然就不能通过onload的回调参数去获取。
当时去微信社区搜索了一番，社区中提供的解决办法有两种：
- 使用hsitory模式替代hash路由模式
- 使用其他方法获取url上的code值
因为公司没打算使用history模式，所以只能使用第二种解决办法，代码如下
onload(){
// 获取url上的code
let code = this.getQueryVariable('code')
if (code) {
// code存在,调用接口将code传递给后端
} else {
// code 不存在，走微信网页授权逻辑
// 当前网页的url，供微信重定向使用
let loc_href = window.location.href;
// 对当前页面的url进行微信要求的urlEncode 处理
loc_href = encodeURIComponent(loc_href);
// 构造获取code的链接
let appId = '';
// 企业微信应用的CorpID 或者 微信公众号的appid
let wxUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect\_uri=${loc_href}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
// 跳转链接获取code
location.href = wxUrl; } }
},
// 获取url参数
getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
通过手动解析url获取code成功的解决了该问题，拿到code，返给后端，登录成功跳转首页，一切正常。
本来文章写到这里就该结束了，但在后续开发中，当页面需要使用微信jsapi时出问题了。
某个页面需要使用微信jsapi时，流程为 前端将当前url返给后端，后端将timestamp，nonceStr，signaure返过来。前端调用wx.config方法进行接口注入权限验证配置
wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，企业微信的corpID
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
在开发者工具调试时，控制台一直提示授权失败，签名无效。查看了文档中对签名生成的描述如下：
签名生成规则如下： 参与签名的参数有四个:
- noncestr（随机字符串）,
- jsapi_ticket(如何获取参考“获取企业jsapi_ticket”以及“获取应用的jsapi_ticket接口”),
- timestamp（时间戳）,
- url（当前网页的URL， 不包含#及其后面部分）
前端只是传递了url给后端生成签名，后端同学也反复检查了代码表示没有问题。那问题只有可能出在传递的这个url上。
微信文档描述 url 参数为当前网页的URL，不包含#及其后面部分。
正常的一个url
http://www.xxx.com/index.html#pages/index/index?id=xxxx
去掉#号之后的url
http://www.xxx.com/index.html
但因为我们在hash模式下，微信授权之后url变成了这样：
http://www.xxx.com/index.html?code=xxxx#/pages/index/index?id=xxx
去掉#号之后地址
http://www.xxx.com/index.html?code=xxxx
问题极有可能出在这里。去掉url上的?及后面的所有字符，传递给后端，后端重新生成签名后再执行wx.config，授权成功，问题解决！