VUE 实现公众号网页微信授权登录

这里不做过多的解释，具体了解见官网文档。
网页授权官方文档

需要准备工作：

1、微信开发者工具
2、公众号添加开发者权限以及本地IP白名单
3、公众号唯一标识：appID
4、公众号配置网页授权域名

注：重定向地址的域名一定要和公众号所配置的域名为同一域名！！！ 不然会报 redirect_uri 参数错误！！！

放代码：

<template>
<button type="primary" @click="handLogin()">微信授权登录</button>
</template>

<script>
export default {
data() {
code: '' // 前端获取 code 传给后端调用相应接口
},
created() {
// 从 window.location.href 中截取 code 并且赋值
if(window.location.href.indexOf('CSDN_state') !== -1) { // 此方法仅供参考！！！
this.code = window.location.href.split('?')[1].split('=')[1].split('&')[0];
}

if(this.code) { // 存在 code 直接调用接口
this.handGetUserInfo(this.code);
}
},
methods: {
handLogin() {
// 重定向地址重定到当前页面，在路径获取 code
const hrefUrl = window.location.href;

if (this.code === '') {
window.location.href = `
https://open.weixin.qq.com/connect/oauth2/authorize
?appid=appid
&redirect_uri=${encodeURIComponent(hrefUrl)}
&response_type=code
&scope=snsapi_userinfo
&state=CSDN_state#wechat_redirect
`
}
},
handGetUserInfo(code) {
// 调用后端接口，参数为 code 剩下工作量交给后端即可
wxLogin({
data: {
code: code
},
method: 'GET',
}).then(res => {
// res => 登陆成功！
......
})
},
},
}
</script>

就这么多，如果能帮助萌新那就再好不过了， 大佬的话浏览浏览就行啦，啊hahahaha~~~