需求场景
作为前端经常会开发网站扫二维码登录功能,目前开发的逻辑有两种,一种是公众号或小程序登录,一种是微信开放平台登录。
设计方案
微信关注公众号登录步骤:
1、生成特定的推送链接,或者临时的二维码码图
2、展示二维码,开启定时器,轮询特定的接口。当扫码后关注公众号或扫描二维码,轮询接口返回对应的是否登录
3、通过轮询接口返回的数据,进行微信登录或者绑定微信的操作。
在这里为了更方便的使用,直接将生成二维码的功能模块进行了封装。
代码实施
#安装依赖,动态生成二维码
npm install qrcodejs2 --save
<template>
<div class="ercodeBox">
<div style="width:250px;height:250px;margin: 0 auto;background:#D8D8D8;" ref="qrCodeUrl">
</div>
<div class="ercode">{{ props.title }}</div>
</div>
</template>
<script setup>
import { ref, onMounted, reactive, defineExpose, defineProps,defineEmits, inject } from 'vue';
import defHttp from "@/utils/http.js";
import QRCode from 'qrcodejs2'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue';
const router = useRouter()
const emit = defineEmits(['callback'])
const props = defineProps(['title', 'type'])
const wxConfig = ref({
wxAppid: '',
url: '',
ercode: '',
scene_str: '',
intval: '',
type: 0,
redirectUrl: 'https://xxxxx.xxx.com'
})
const qrCodeUrl = ref()
const tmessage = inject('tmessage')
const initData = (type) => {
wxConfig.value.intval = null
wxConfig.value.type = type
getWxQrCode()
}
//清理定时器
const initClose = () => {
clearInterval(wxConfig.value.intval)
}
//轮询登录接口,登录成功之后,清理定时器
const wxLogin = () => {
defHttp.post('轮询登录接口', { scene_str: wxConfig.value.scene_str }).then(data => {
if (data.Success) {
clearInterval(wxConfig.value.intval)
updateToken(data.Data.role, data.Data.token)
}
})
}
//轮询绑定二维码接口,绑定之后,清理定时器
const saveWeChat = () => {
defHttp.post('轮询绑定接口', { scene_str: wxConfig.value.scene_str }).then(data => {
if (data.Success) {
clearInterval(wxConfig.value.intval)
tmessage.getBaseInfo()
emit('callback')
}
})
}
//获取二维码
const getWxQrCode = () => {
defHttp.get('获取二维推送链接或者临时的二维码接口', {}).then(data => {
if (data.Success) {
wxConfig.value.url = data.Data.url
wxConfig.value.scene_str = data.Data.scene_str
creatQrCode()
if (wxConfig.value.type == 1) {
wxConfig.value.intval = setInterval(saveWeChat, 2000)
} else {
wxConfig.value.intval = setInterval(wxLogin, 2000)
}
} else {
message.error(`${data.Message}`)
}
})
}
//展示二维码,将链接转化成二维码;如果是临时的二维码,可以省略这一步
const creatQrCode = () => {
//每次重新生成前,清空原来div的子元素
qrCodeUrl.value.innerHTML = ''
new QRCode(qrCodeUrl.value, {
text: wxConfig.value.url, // 需要转换为二维码的内容
width: 250,//和div的宽度保持一致
height: 250,//和div的高度保持一致
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
}
const updateToken = (role, token) => {
localStorage.setItem('token-smartvg-teacher', token)
}
//暴露初始方法和清理定时器的方法
defineExpose({
initData,
initClose
})
</script>
<style lang="less" scoped>
.ercodeBox {
padding: 20px;
.ercode {
font-family: Source Han Sans;
font-size: 24px;
color: #333333;
text-align: center;
margin-top: 32px;
}
}
</style>
写作目的
写即思。每天工作的过程中会处理很多的问题,而写是了将处理过的问题进行回顾,将成功的经验固化,形成成果。