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.html 复制代码3.实现代码逻辑主要文件：src/plugins/wechatAuth.js微信授权相关方法封装这里引用的是[vue-wechat-login]，做了简单的修改，直接在路由钩子文件permission.js使用。const qs = require(‘qs’)// 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）const SCOPES = [‘snsapi_base’, ‘snsapi_userinfo’]class VueWechatAuthPlugin { constructor() { this.appid = null this.redirect_uri = null this.scope = SCOPES[1] this._code = null this._redirect_uri = null } static makeState() { return ( Math.random() .toString(36) .substring(2, 15) + Math.random() .toString(36) .substring(2, 15) ) } setAppId(appid) { this.appid = appid } set redirect_uri(redirect_uri) { this._redirect