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

需要准备工作：

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~~~