vue微信受权解决方案（第三次优化）

github:vue-wechat-auth

以前是本身太年轻，写什么【最终解决方案】。这一次的项目vue移动端电商项目，作了不少的优化。你们都知道受权须要每次都要发布到线上，本地的须要代理，这让咱们很头疼。后面会介绍一个本地直接受权的方式，真的超级香。

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

另外也优化：

• 微信分享
• keep-alive返回到上次浏览的位置
• vue-router 全部页面携带参数
• ...

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

场景

整个项目不管什么页面进入都须要进行受权，通常微信公众号H5项目这一点都是须要作到

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

// 克隆项目
git clone https://github.com/sunniejs/vue-wechat-auth.git
//安装依赖
npm install 
复制代码

实现本地微信受权

1.工具

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

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

为何要部署auth.html呢？

实现微信受权，微信官方要你填写一个受权回到页面域名，受权的地址必须是这个域名，那localhost显然是不能够了，那怎么办呢？

咱们跳微信受权地址的时候redirect_uri 携带的地址为符合要求的微信回调域名，好比www.abc.com/auth.html?b… 回到这个页面的时候，咱们再跳转到本地http://localhost:9018/#/?code=23456789**带着咱们想要的code 就搞定了！那么开始吧。

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

2. 微信要求将MP_verify_xxx.txt文件放到服务器下。按照提示操做就能够了。

3. 部署auth.html(在github项目的根目录下) ，相同的，将 auth.html 上传至填写域名或路径指向的web服务器（或虚拟主机）的目录（ 例如 ：**www.abc.com/auth.html**…

在www.abc.com域名下的服务器上部署auth.html，不必定是根目录，例如：www.abc.com/xxx/auth.ht…       

这里咱们用auth.html是根据 GetWeixinCode 进行修改的，修复了一些bug，感谢做者

• 携带的参数在受权完以后没能所有带回来。
• hash回调url错误问题

3.设置相关变量

在开发以前你要首先在下面三个文件设置两个变量，若是你已经启动项目，设置后须要重启。

.env.development

.env.staging

.env.production

VUE_APP_WECHAT_APPID是你的appid，在.env.[环境] 文件中设置

VUE_APP_WECHAT_AUTH_URL是你的auth.html 访问地址。在.env.[环境] 文件中设置

设置好了以后咱们就能够经过 process.env.  使用了

4.实现微信受权相关方法

文件路径：src/plugins/wechatAuth.js，主要是先微信跳转地址拼接，获取地址参数等。

微信受权相关方法封装这里引用的是[vue-wechat-login]，作了简单的修改，直接在路由钩子文件permission.js使用。

在permission.js去调用一些方法好比： wechatAuth.returnFromWechat(to.fullPath);

5.permission.js 路由守卫

src/permission.js 里实现了主要的逻辑。

首先咱们现设置受权白名单whiteList，受权失败，或者其余错误进入404页面。

const whiteList = ['/404']  router.beforeEach(async (to, from, next) => {   // 在白名单，直接进入   if (whiteList.indexOf(to.path) !== -1) {      return next()    }
    // ....
  })
复制代码

接下来咱们设置一个loginStatus，用来表示登陆的状态 ，0表明没有登陆，那么就须要跳转到微信受权地址了。

// 设置回调地址，本地和线上不一样  
     wechatAuth.redirect_uri = processUrl()
     await store.dispatch('user/setLoginStatus', 1)
      // 跳转完整的受权地址
      window.location.href = wechatAuth.authUrl
复制代码

wechatAuth.authUrl 地址 https://open.weixin.qq.com/connect/oauth2/authorize...的redirect_uri 调用 processUrl方法，根据环境不一样返回不一样的地址。前面咱们提到受权的回到地址必须是微信公众号设置的受权页面域名，因此这里分两种状况

• 本地环境返回受权的回调地址：

  // 本地环境换经过auth.html拿code
  if (process.env.NODE_ENV === "development") { return https://test.top1buyer.com/auth.html?backUrl=${window.location.href}; }

 其中 process.env.VUE_APP_WECHAT_AUTH_URL 就是中间受权页面的网址。backUrl后面跟的是你本地开发的地址。processUrl() 返回 www.abc.com/auth.html?b…

• 线上环境返回的是正常的微信受权地址:

  const url = window.location.href;
  // 解决屡次登陆url添加剧复的code与state问题 const urlParams = qs.parse(url.split("?")[1]); let redirectUrl = url; if (urlParams.code && urlParams.state) {
  delete urlParams.code;
  delete urlParams.state;
  const query = qs.stringify(urlParams); if (query.length) {
  redirectUrl = ${url.split("?")[0]}?${query}; } else { redirectUrl = ${url.split("?")[0]};
  }
  } return redirectUrl;

processUrl() 返回 **线上你的项目地址，**不用中间页跳转。只要保证你的项目域名，(好比：www.abc.com/wxapp/ )，的域名在微信公众号设置的网页受权域名列表里就ok了。不跳转中间页会提高用户体验。

启动项目

必要的参数设置好就能够启动了

// 启动
npm run serve 
复制代码

赞成以后就看到code值了

到此主要的流程就结束了。

注意：当受权成功后须要经过code换取token，由于并无对接后台，因此这里我注释掉了

接下来操做在vuex中进行，用户根据需求对接后台接口便可。

/src/store/modules/user.js

好比这里我须要经过code换区用户信息，存储用户信息和token

const actions = { 
   // 登陆相关，经过code获取token和用户信息，用户根据本身的需求对接后台 
   loginWechatAuth({commit}, code) {     
   const data = {        code: code      } 
   return new Promise((resolve, reject) => {   
     loginByCode(data)
          .then(res => {
            // 存用户信息，token
          commit('SET_USERINFO', saveUserInfo(res.data.user))
            commit('SET_TOKEN', saveToken(res.data.token))
            resolve(res)
          })
          .catch(error => {
            reject(error)
          })
      })
    }, 
} 
复制代码

src/utils/request.js

axios数据请求封装，请根据用户需求自行修改

src/utils/cache.js文件用户来缓存数据

import cookies from 'js-cookie'import storage from 'good-storage'const LoginStatusKey = 'Login-Status' // 登陆态 0未受权未登陆 1受权未登陆 2 登录成功const TokenKey = 'Access-Token' // tokenconst UserInfoKey = 'User-Info' // 用户信息 {} {...}// 获取登陆状态export function loadLoginStatus() {  return cookies.get(LoginStatusKey) || 0}// 保持登陆状态export function saveLoginStatus(status) {  cookies.set(LoginStatusKey, status, {expires: 7})  return status}// 删除登陆状态export function removeLoginStatus() {  cookies.remove(LoginStatusKey)  return ''}// 获取tokenexport function loadToken() {  return storage.get(TokenKey, '')}// 保存tokenexport function saveToken(token) {  storage.set(TokenKey, token)  return token}// 删除tokenexport function removeToken() {  storage.remove(TokenKey)  return ''}// 获取用户信息export function loadUserInfo() {  return storage.get(UserInfoKey, {})}// 保存用户信息export function saveUserInfo(userInfo) {  storage.set(UserInfoKey, userInfo)  return userInfo}// 删除用户信息export function removeUserInfo() {  storage.remove(UserInfoKey)  return {}}
复制代码

项目地址

github:vue-wechat-auth

另外，项目架构介绍请看[ vue-h5-template]基于vue-cli4.0+webpack 4+vant ui + sass+ rem适配方案+axios封装。若是你只须要受权逻辑，只要把涉及到的相关文件放到你的项目下就能够。

常见问题

• 上线后一直循环跳转，清除缓存，注释掉 src/utils/request.js 里的 location.reload() 调试

关于我

若是您遇到了问题能够给我提 issues 

获取更多技术相关文章，关注公众号”前端女塾“。

回复‘前端’，便可加入”前端仙女群“

您也能够扫描添加下方的微信并备注 Sol 加前端交流群，交流学习。

若是对你有帮助送我一颗小星星，你的star是我前进的动力（づ￣3￣）づ╭❤～