Taro H5端发起请求微信授权链接获取code,返回数据通过this.$router.params获取不到
-
1.问题:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0 微信授权登录的官方步骤,目前做第一步请求获取code,微信会回调访问redirect_uri 将code返回接口,我们在页面componentWillMount() 中this.$router.params是获取不到的2.为什么呢?
我们预想的回调结果是这样的:(避免敏感信息,我把请求域名换成了localhost)
http://localhost:10086/#/pages/identification/identification?code='xxxxx'
实际返回的结果是这样的:
http://localhost:10086?code=071UBEge2snGkI0Szxhe2BPNge2UBEgU&state=123#/pages/identification/identification
这就是导致获取不到的根本原因,
目前解决办法只能解析地址路径的方式获取code
-
以下处理的代码
componentWillMount() { //this.$router.params.code获取不到,原因见:https://www.jianshu.com/p/9282d33e3eeb //let code = this.$router.params.code let appid = 'wx97fdfccf11c9941c' //公众号appId let cur_url = window.location.href console.log('redirect_uri: ' + cur_url) if (cur_url.indexOf('code') < 0){ //当前地址不含code,则需要请求code,通过回调当前页面来返回code Taro.navigateTo({ url: `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(cur_url)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect` }) } else { //解析地址的方式获取code let code = this.getCodeFromUrl(cur_url) //继续发送code至服务端获取openid } } /** * 解析微信redirect_uri地址中的code */ getCodeFromUrl = (cur_url) => { //目标地址:http://roche.demo.imohe.com/index.html?code=071UBEge2snGkI0Szxhe2BPNge2UBEgU&state=123#/pages/identification/identification let code = '' let index = cur_url.indexOf('?') let paramStr =cur_url.substring(index+1,cur_url.length); let params = paramStr.split('&') params.forEach(element => { if (element.indexOf('code') >= 0) { code = element.substring(element.indexOf('=')+1,element.length) } }); return code }