Vue微信授权

流程图

微信网页授权流程。
image

调用流程
image

发送授权请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 重定向地址、AppId已经Scpore
import { REDIRECT_URI, APP_ID, SCOPE } from '@/api/config'

wechatLogin: (url = null) => {
let tempUrl = REDIRECT_URI
if (url !== null) {
tempUrl = url
}
// 打开授权页面。用户同意授权则跳转到重定向页面
// 重定向地址一定要进行URI编码 encodeURIComponent
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APP_ID +
'&redirect_uri=' + encodeURIComponent(tempUrl) +
'&response_type=code&scope=' + SCOPE + '&state=STATE#wechat_redirect'
}

微信回调处理

为了统一授权管理,需要判断路由地址是否带有微信回调的授权Code,所以把微信的回调处理放在了路由的钩子函数中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
router.beforeEach((to, from, next) => {
// URL解析 微回调地址中code存在 ?....# 中
if (document.URL.match(/\?.*#/)) {
let temp = document.URL.match(/\?.*#/)[0]
if (temp.match(/=.*&/)) {
// 解析Code
let code = temp.match(/=.*&/)[0]
code = code.substr(1, code.length) // 去掉 ?
code = code.substr(0, code.length - 1) // 去掉 #
// 重置URL(去掉code参数,避免重复调用)
window.history.pushState({}, 0, document.URL.replace(temp.substr(0, temp.length - 1), ''))
// 通过Code请求获取openId或者用户信息(这里axios是被我封装过的)
axios.post('/wxLogin/callBack', { code: code}, (data) => {
if (data.openId && data.openId !== null) {
localStorage.setItem('openId', data.openId)
}
})
}
}
next()
})

URL处理

因为我的路由mode是hash模式,微信带有code的回调地址会变成[地址:端口]?[code参数]#[路由URL]的形式。比如:

1
http://develop.qdcollege.cn/?code=001Rx7wI1f1FQ80XpvzI1yvdwI1Rx7w7&state=STATE#/wechat/consultation

所以要获取其中的code参数必须得对URL进行解析。

如果路由mode为history,用to.query.code就可以获取到微信的code,获取code过后,一定要记住清除to.query.code

通过code获取openId或者用户信息

上面获取到code过后,就可以通过发送请求获取openId或者用户信息了。在这里可以对返回结果进行处理,用户信息可以用VUEX状态管理器处理。这里用localStorage存储openId是因为我们的逻辑处理是只验证一次,永久有效。退出登录后会清掉openId。

最后

一定不要忘了next(),少了这句路由不会跳转。

打个小广告。QD校园,请用手机模式打开。

坚持原创技术分享,您的支持将鼓励我继续创作!