在我们做某个平台或者系统时，都需要有一个登录功能，传统的用户名、密码登录模式看起来似乎并没有手机扫码直接登录来的方便，那么在前端实现上，如何实现微信扫码登录呢？
1.我们可以在入口设置一个按钮，增加点击事件，点击后向后端发送请求，并返回一个微信登录的地址
eg:https://open.weixin.qq.com/connect/qrconnect?appid=wx46489bde9c72f3f1&redirect_uri=http://crm.17yingxiao.online/login&response_type=code&scope=snsapi_login&state=17xuexi#wechat_redirect
2.返回地址后，我们可以让页面跳转到该地址上去，我们可以使用
window.location.href = [URL]
3.用微信扫描该二维码，允许扫描并扫描成功后，微信会拉起应用或重定向到第三方网站，并且带上授权时的code参数
4.调取接口，将code参数值传给后端，并将返回的个人信息进行存储，再跳转至相应页面
以上步骤顺利完成后，我们就完成了微信扫码登录的功能。
eg:HTML代码,点击获取微信登录路径
<button class="subBtn" type="primary" @click="getLoginAddress" :loading="btnLoading">
{{showLogin ? "微信扫码登录" : "登录中..."}}
</button>
eg:获取微信可扫码路径
async getLoginAddress() {
// 打开loading
this.btnLoading = true;
try {
// 获取返回路径
const res = await this.$get('admin/login/address');
//跳转至该路径
window.location.href = res;
} catch (e) {
this.btnLoading = false;
this.showLogin = false;
}
},
授权成功之后，微信会自动调取redirect_url，返回我们刚刚登录的那个页面，因为这个相当于从另一个页面到之前的页面，所以vue中的声明周期会重新走一遍，这时我们可以在mounted中定义登录授权之后的方法
eg:授权之后所要执行的操作
mounted() {
// 用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数
// 若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数
const {code, state} = this.$route.query;
this.showLogin = !code;
if (code) {
this.login(code);
} else if (!code && state) {
console.log("拒绝授权")
}
},
eg:login方法的具体实现
async login(code) {
try {
const res = await this.$get('admin/login', {code});
this.saveHeader(res); //存储用户信息
this.btnLoading = false;
this.$router.push('/group/groups') //登录成功，前往首页
} catch (e) {
// 关闭loading
this.btnLoading = false;
}
}
以上就是有关我的微信登录实现时的逻辑和简单的做法，欢迎补充和提出修改意见~