vue项目做微信网页授权

直接进入正题

文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

目前还未完成网页授权，不过已经遇到问题了，借此记录一下问题以及解决方法

目前我知道的是，我需要拿到一个code，

微信网页授权第一步需要用户同意网页授权

widow.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_re

服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo

snsapi_base:静默获取用户信息 (不需要用户同意)只能获取openid

snsapi_userinfo:需要用户同意（弹出新页面用户点击同意），可以获取openid外，还可以获取用户名称以及头像

我这里用的是静默获取：（前提是在微信环境哦）

var url=encodeURIComponent(window.location.href);
var getCodeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${'appid'}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`;
window.location.href = getCodeUrl;

执行上述操作后，微信会跳转到一个新页面，这个页面的地址上会有code参数

http://www.xxx.cn/param1/?code=xxxaxxxyPDFw1DAzxxx0EsxxxiSZ&state=1#/query1/1

这个地址上的code值就是我们想要的code

扫描二维码关注公众号，回复： 10927297 查看本文章

可是我原来的页面地址是这样的：

http://www.xxx.cn/param1/#/query1/1

微信把#号后面的参数混淆了（位置错乱了，这在vue项目中是严重的，因为vue项目把#号后面的参数当做是路由，现在微信返回的路由错乱，肯定会出问题）

我想要微信返回的是这样的URI地址：

http://www.xxx.cn/param1/#/query1/1?code=xxxaxxxyPDFw1DAzxxx0EsxxxiSZ&state=1

。

vue项目做微信网页授权

猜你喜欢