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脚手架,微信公众号授权(微信网页授权)

你可能感兴趣的:(Vue,Vue,爬坑之旅,vue,微信授权)