Vue 爬坑之旅 -- 微信网页授权

现在的 H5 开发，微信授权和微信分享基本是必备功能，昨天将微信分享的相关功能和踩坑过程做了一个总结，今天就来说下微信授权的功能具体到 vue 项目中该要怎么做。
Vue 爬坑之旅 – history 路由模式下微信分享爬坑总结

准备工作

在开始码代码之前需要先做一些准备工作，其实也是做微信分享需要做的准备工作，申请公众号，绑定域名，申请 AppId 等。这些事情做完之后还需要做的事情就是先通读一下 微信网页授权官方文档 ，先读一遍文档，了解一些基本的概念，我这篇文章中并不会讲解这些基本概念。

微信网页授权流程

在微信文档里面说到，要获取微信授权需要经过四步，其他微信文档里面说的四步是针对整个授权流程的，这四步是前后端加在一起需要走这四步流程。具体到我们前端，其实只需要两步。

1. 拼接授权链接，向微信发起授权请求
2. 获取微信返回的授权 code，用这个 code 请求后端服务，拿到用户信息

拼接链接，发起授权请求

一个应用，何时发起授权请求是根据业务需要来定的，有的是在一进入应用的时候就要求授权，有的是达到了什么条件之后才触发的，比如说点击了微信登录。我这次碰到的需求是要求在刚进入页面时就要授权，所以就以这种情况来说下该怎么做。

首先来分析下这个需求，要想一进入应用就触发授权操作，那么相关代码就必须写在具体的业务代码之前。符合这个条件的其实有二个地方，分别为作为整个应用入口的 main.js，然后就是路由的 router.beforeEach 钩子函数。具体到我们这个需求，其实是不能放在 main.js 里面的，因为微信授权的时候需要进行路由跳转，所以放在 router.beforeEach 里面比较合适。

文档里面说了，发起授权的链接里面需要拼接一个重定向的 redirectUrl ，这个 url 是用来获取微信返回的 code 的，微信在收到授权请求后，会把 code 拼接到我们定义的 redirectUrl 后面返回给我们。我们拿到这个 code 后传给后端，后端再用这个 code 和另外一个参数 access_token，去请求微信的服务器，这样才能拿到发起授权请求的客户端相对应的用户信息。

所以我们需要定义一个接收微信 code 的路由页面 WxAuth，路由为 ‘/WxAuth’，将重定向的 redirectUrl 指向这个路由，**这里有二点需要注意，redirectUrl 需要是 https 开始的全链接，并且拼接之前需要用 encodeURIComponent 方法转义下，**做好上面这些之后，我们就可以在定义路由的 router.js （vue-cli3下）或者是 router 文件夹的 index.js （vue-cli2下）文件中写入如下代码：

router.beforeEach((to, from, next) => {
  if (!/micromessenger/i.test(navigator.userAgent)) {
    next()
    return
  }
  //不要对 WxAuth 路由进行拦截，不进入 WxAuth 路由就拿不到微信返回的授权 code
  if (to.name === 'WxAuth') {
    next()
    return
  }
  
  let wxUserInfo = localStorage.getItem('wxUserInfo')
  if (!wxUserInfo) {
    //保存当前路由地址，授权后还会跳到此地址
    sessionStorage.setItem('wxRedirectUrl', to.fullPath)
    //请求微信授权,并跳转到 /WxAuth 路由
    let appId = '测试服的AppId'
    let redirectUrl = encodeURIComponent('https://m1.xxxxxx.com/WxAuth')
    //判断是否为正式环境
    if (window.location.origin.indexOf('https://m.xxxxxx.com') !== -1) {
      appId = '正式服的AppId'
      redirectUrl = encodeURIComponent('https://m.xxxxxx.com/WxAuth')
    }
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
  } else {
    next()
  }
})

这样的话，当用户从 WxAuth 以外的路由进入应用时都会先判断是否有微信的用户信息，没有的话就发起微信授权请求，请求发起成功后微信会跳转到我们指定的 redirectUrl ，也就是上面的 /WxAuth 路由。

获取微信授权 code，向后端请求用户信息

在 WxAuth 页面中，我们要做的事情就简单了，

1. 从 url 中拿到微信返回的授权 code
2. 用该 code 向后端请求用户信息

具体代码如下：

<template>
  <div>
  
  </div>
</template>

<script>
  /**
   * 微信网页授权
   */
  export default {
    name: 'WxAuth',
  
    async created(){
      // 如果连接中有微信返回的 code，则用此 code 调用后端接口，向微信服务器请求用户信息
      // 如果不是从微信重定向过来的，没有带着微信的 code，则直接进入首页
      if (this.$route.query.code) {
        let res = await this.apis.public.getWxUserInfo({
          code: this.$route.query.code,
          platform: 1,
        })
        alert(JSON.stringify(res))
        localStorage.setItem('wxUserInfo', JSON.stringify(res))
        let redirectUrl = sessionStorage.getItem('wxRedirectUrl')
        this.$router.replace(redirectUrl)
      } else {
        this.$router.replace('/')
      }
    },
  }
</script>

总结

其实整个过程做下来，代码不多，一共就几十行，但是如果是初次做的话还是有点绕，需要把这里面的弯弯绕绕理清楚，一旦想通了，理解了，做起来也就顺了。

参考资料：
vue脚手架，微信公众号授权（微信网页授权）