公众号h5页面微信授权(个人笔记)
2021-12-26 本文已影响0人
kevision
开发前必读:
网页授权:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
beforeRouteEnter(to, from, next) { // 本地测试在开发者工具域名要换成localhost
let params = location.href.split('?')[1]
let code = qs.parse(params).code
let token = store.getters.h5_AccessToken
if(token) {
next()
} else {
if (!code) { // 未授权
let uri = encodeURIComponent(env.redirect_uri) // hash模式#后面的会被放到url最后
// 跳转路径去掉state, 用户拒绝授权可以重新调起授权!!!
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${env.appid}
&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo#wechat_redirect`;
} else { // 已授权
next(vm => {
vm.handleLogin(code) // beforeRouteEnter访问不到this, 在next里面这样访问
})
}
}
}
handleLogin(code) {
this.$axios.jsCodeLogin({
jsCode: code
}).then(res => {
if(res.data.data.loginSuccess) {
setAccessToken(res.data.data.accessToken)
setUserInfo(res.data.data.clientUser)
}
})
}