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

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

一、测试号相关配置

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

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

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

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

二、获取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进行截取，以下是我的代码：

methods: {
getCode () { // 非静默授权，第一次有弹框this.code = ''var local = window.location.href // 获取页面urlvar appid = 'wx65adcf075369****' this.code = this.getUrlCode().code // 截取codeif (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.searchthis.winUrl = urlvar 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钩子函数里面这样处理：

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