h5微信本地调试 vue_vue微信授权解决方案[如何本地实现授权]

之前是自己太年轻，写什么【最终解决方案】。这一次的项目vue移动端电商项目，做了很多的优化。大家都知道授权需要每次都要发布到线上，本地的需要代理，这让我们很头疼。后面会介绍一个本地直接授权的方式，真的超级香。

时隔几年，第三次升级我的微信授权，每一次思路都更加清晰，当我的知识越来越广，越来越深，我相信会有第四次，第五次。。。

另外也优化：

微信分享

keep-alive返回到上次浏览的位置

vue-router 所有页面携带参数

...

后续会持续分享，接下来首先优化的就是授权逻辑的优化。

场景

整个项目无论什么页面进入都需要进行授权，一般微信公众号H5项目这一点都是需要做到

接下来我们开始吧，先克隆安装依赖，不要着急启动，先把准备工作做好。

// 克隆项目

git clone https://github.com/sunnie1992/vue-wechat-auth.git

//安装依赖

npm install 复制代码

实现本地微信授权

1.工具

实现本地开发授权，你需要使用微信开发者工具，网页是没有办法直接本地拿到授权的。

2.将auth.html部署到服务器上

这里我们用到了 GetWeixinCode ，使用的时候修复了一些bug

携带的参数在授权完之后没能全部带回来。

hash回调url错误问题

部署auth.html(在github项目的根目录下)到你的微信授权回调域名的目录下。

前往微信公众平台->接口权限->网页授权获取用户基本信息->修改，填写授权回调页面域名，例如www.abc.com

在www.abc.com域名下部署auth.html，不一定是根目录，例如：https://www.abc.com/xxx/auth....

微信登录

var GWC = {

version: '1.2.0',

urlParams: {},

appendParams: function (url, params) {

if (params) {

var baseWithSearch = url.split('#')[0];

var hash = window.location.hash.split('#')[1];

if (hash) {

baseWithSearch = baseWithSearch + '#' + hash;

}

for (var key in params) {

var attrValue = params[key];

if (attrValue !== undefined) {

var newParam = key + "=" + attrValue;

if (baseWithSearch.indexOf('?') > 0) {

var oldParamReg = new RegExp('^' + key + '=[-%.!~*\'\(\)\\w]*', 'g');

if (oldParamReg.test(baseWithSearch)) {

baseWithSearch = baseWithSearch.replace(oldParamReg, newParam);

} else {

baseWithSearch += "&" + newParam;

}

} else {

baseWithSearch += "?" + newParam;

}

}

}

}

return baseWithSearch;

},

getUrlParams: function() {

var pairs = location.search.substring(1).split('&')

for (var i = 0; i < pairs.length; i++) {

var pos = pairs[i].indexOf('=')

if (pos === -1) {

continue

}

GWC.urlParams[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1))

}

},

doRedirect: function() {

var code = GWC.urlParams['code']

var appId = GWC.urlParams['appid']

var scope = GWC.urlParams['scope'] || 'snsapi_base'

var state = GWC.urlParams['state']

<