微信公众号网页授权--前端获取code及用户信息（vue）

前段时间开发微信公众号网页授权，虽然网上已经有很多关于这方面的博客或者教程，但是第一次开发还是遇到挺多坑的，以下分享一下我的踩坑填坑之路。

一、测试号相关配置

首先在你公司申请的测试号上配置好相关信息，这里直接上图吧：

URL与Token都是要后台配置好的，直接叫后台给过来就好啦，域名一定要和URL的域名保持一致。

然后，在体验接口权限表里面找到网页帐号--网页授权获取用户基本信息，点击修改：

 配置授权回调的域名，至于什么是OAuth2.0，大家自行百度吧。这里的域名也要与上面的域名一致。配置成功会有通过安全监测的提示，这里不上截图了。

二、获取code

配置好以上回调域名等后，就可以写代码了。首先是获取code，需要打开如下页面：

[code]https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

其中，这些参数说明在微信JSSDK说明文档里面都有说明，如下图：

 配置好参数后，进入这个页面微信会返回code在回调的url里给我们：

然后，我们只需去url里截取这个code即可，但是我们发现这个code并不是跟在url的最后面，所以一开始我用vue的this.$route.query.code方法行不通，得用js进行截取，以下是我的代码：

[code]methods: {
getCode () { // 非静默授权，第一次有弹框
this.code = ''
var local = window.location.href // 获取页面url
var appid = 'wx65adcf0753691319'
this.code = this.getUrlCode().code // 截取code
if (this.code == null || this.code === '') { // 如果没有code，则去请求
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
} else {
// 你自己的业务逻辑
}
},
getUrlCode() { // 截取url中的code方法
var url = location.search
this.winUrl = url
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
var strs = str.split("&")
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
}
}
return theRequest
}
}

我的代码逻辑是先判断有没有code，没有才去获取，encodeURIComponent()，是对回调url进行编码，这个微信JSSDK说明文档里面都有说明。拿到code以后，传给后台，让后台去获取用户信息再传给前端。我们拿到用户信息后，比如openId，头像等，可以用localStorage缓存起来，这样就不用每次都去请求code，每次都去后台拿信息了。所以，我们可以在mounted钩子函数里面这样处理：

[code]mounted() {
if(!window.localStorage.getItem('openId')){ // 如果缓存localStorage中没有微信openId，则需用code去后台获取
this.getCode()
} else {
// 别的业务逻辑
}
}