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

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

准备工作

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

微信网页授权流程

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

拼接授权链接，向微信发起授权请求
获取微信返回的授权 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 路由就拿不到微信返回的授权 codeif (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 页面中，我们要做的事情就简单了，

从 url 中拿到微信返回的授权 code
用该 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脚手架，微信公众号授权（微信网页授权）